/* ================= PAGE ================= */

html {
	height: 2400px; /* set page height */
}

.background {
	position: fixed; /* fixed attachment */
    top: 0; /* top */
    left: 0; /* left */
    width: 100vw; /* full width */
    height: 100vh; /* full height */
    z-index: -1; /* background layer */
    transform: scale(1.0); /* full scale */
    &:after {
        content: ""; /* no text */
        display: block; /* block display */
        position: absolute; /* absolute position */
        top: 0; /* top */
        left: 0; /* left */
        width: 100%; /* full width */
        height: 100%; /* full height */
        background-image: url("./assets/homepage.jpg"); /* background image */
        background-position: 50%, 50%; /* centered image */
        background-size: cover; /* full cover size */
        background-repeat: no-repeat; /* no repeat */
        background-attachment: fixed; /* remain fixed */
    }
}

@media (max-width: 1000px) {
	.background:after {
		background-position: 75%, 50%;
	}
}

/* ================= HEADER ================= */

header {
	animation:
		blur 2.0s ease-out forwards, /* animate blur */
		fade 2.5s ease-out forwards; /* animate fade */
}

.gradient {
	position: absolute; /* relative position */
	top: 0%; /* vertical position */
	left: 0%%; /* horizontal position */
	z-index: 2; /* bring to front */

	background-image:
		linear-gradient(to right, #FFFFFFFF 0%, #FFFFFF00 35%), /* left to right gradient */
		linear-gradient(to bottom right, #FFFFFFFF 0%, #FFFFFF00 80%); /* top-left to bottom-right gradient */
		
	width: 100%; /* full width */
	height: 100%; /* full height */
}

.title {
	position: absolute; /* relative position */
	top: 8%; /* vertical position */
	left: 8%; /* horizontal position */
	color: #7092BE; /* text color */
	font-size: 120px; /* text size */
	z-index: 2; /* bring to front */
	text-shadow: 0px 12px 20px #0000004D; /* text shadow */
}

.instruction {
	position: absolute; /* relative position */
	top: 74%; /* vertical position */
	left: 50.5%; /* horizontal position */
	color: #FFFFFFFF; /* text color */
	font-size: 25px; /* text size */
	z-index: 2; /* bring to front */
	text-shadow: 0px 12px 20px #0000004D; /* text shadow */
	transform: translate(-50%, -50%);
	animation: blink 1s ease-in-out infinite;
	transition: opacity 0.3s ease-out;
	cursor: pointer;
}

.scroll {
	position: absolute;
	top: 83%;
	left: 50%;
	width: 16px;
  	height: auto;
	transform: translate(-50%, -50%);
	animation: float 1s ease-in-out infinite;
	transition: opacity 0.3s ease-out;
	cursor: pointer;
}

@keyframes blink {
	0%, 100% {
   		color: #FFFFFFFF;
  	} 50% {
  		color: #F0F1FFDD;
  	}
}

@keyframes float {
	0%, 100% {
   		transform: translateY(0);
  	} 50% {
  		transform: translateY(-10px);
  	}
}

@keyframes blur {
	from {
    	backdrop-filter: blur(25px); /* strarting blur */
  	} to {
    	backdrop-filter: blur(0px); /* ending blur */
  	}
}

@keyframes fade {
	from {
		background-color: #FFFFFFFF;
	} to {
		background-color: #FFFFFF00;
	}
}

@media (max-width: 1800px) {
	.title {
		top: 0%; /* vertical position */
		width: 10%;
		font-size: 100px; /* text size */
	}
	
	.scroll {
		width: 16px;
	}
	
	.instruction {
		left: 50.7%;
		font-size: 20px;
	}
}

@media (max-width: 1000px) {
	.title {
		top: 0%; /* vertical position */
		width: 10%;
		font-size: 70px; /* text size */
	}
	
	.scroll {
		width: 16px;
	}
	
	.instruction {
		left: 52%;
		font-size: 20px;
	}
}

/* ================= CONTENT ================= */

.bio {
	position: absolute; /* relative position */
	width: 35%;
	top: 128%; /* vertical position */
	left: 10%; /* horizontal position */
	font-size: 50px; /* text size */
	padding: 20px; /* apply padding */
}