/* Home View */

#home-header-container {
	display: inline-block;
	left: 0;
	top: 0;
	width: 100vw;
    background-position: center center;
	background-image: url('../assets/images/home_background_me.jpg');
	text-align: center;
}
@media (orientation: landscape) {
	#home-header-container {
		height: var(--vh);
    	background-size: auto var(--vh);
	}
}
@media (orientation: portrait) {
	#home-header-container {
		height: 100vw;
    	background-size: auto 100vw;
	}
}
@media (min-aspect-ratio: 3072/1730) {
	#home-header-container {
    	background-size: 100vw auto;
	}
}

#home-header-name-container {
	display: inline-block;
	text-align: center;
	color: white;
	background: radial-gradient(rgba(0,0,0,.6) 20%, rgba(0,0,0,0) 60%, rgba(0,0,0,0));
    margin-top: calc(.7 * var(--vh));
    transform: translateY(-50%);
}
@media (orientation: portrait) {
	#home-header-name-container {
		margin-top: 70vw;
		max-width: 90%;
	}
}

#home-header-name {
	font-family: 'RobotoBold';
	font-size: 40px;
}
@media (min-width: 376px) { #home-header-name { font-size: 40px; } }
@media (min-width: 768px) { #home-header-name { font-size: 48px; } }
@media (min-width: 1024px) { #home-header-name { font-size: 60px; } }

#home-header-divider {
	width: 100%;
	height: 4px;
	margin: 10px 0;
	background-color: white;
}

#home-header-links {
	font-family: 'RobotoBold';
	white-space: nowrap;
	font-size: 28px;
}
@media (min-width: 376px) { #home-header-links { font-size: 28px; } }
@media (min-width: 768px) { #home-header-links { font-size: 38px; } }
@media (min-width: 1024px) { #home-header-links { font-size: 48px; } }

.home-header-link {
	margin-left: 40px;
	margin-right: 40px;
	cursor: pointer;
}
@media (orientation: portrait) {
	.home-header-link {
		width: 33%;
		margin: 0;
	}
}
.home-header-link:first-child {
	margin-left: 0px;
	margin-right: 40px;
}
@media (orientation: portrait) {
	.home-header-link:first-child {
		width: 33%;
		margin: 0;
	}
}
.home-header-link:last-child {
	margin-left: 40px;
	margin-right: 0px;
}
@media (orientation: portrait) {
	.home-header-link:last-child {
		width: 33%;
		margin: 0;
	}
}

#home-about-container {
	display: inline-block;
	width: 60vw;
	padding: 10vw 20vw;
	line-height: 34px;
}
@media (orientation: portrait) {
	#home-about-container {
        width: 100vw;
        padding: 5vw;
        box-sizing: border-box;
        flex-grow: 1;
	}
}

#home-view .primary-text {
	line-height: 32px;
}
@media (min-width: 768px) { #home-view .primary-text { line-height: 48px; } }
@media (min-width: 1024px) { #home-view .primary-text { line-height: 52px; } }
@media (min-width: 1280px) { #home-view .primary-text { line-height: 56px; } }