/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

body{
	margin: 0;
	height: 100vh;
	width: 100vw;
	font-size: 100%;
}

#wrapper{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#header-container{
	width: 100%;
	height: 15%;
	background: rgb(165, 238, 190);
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	z-index: 5;
}
#header-content{
	position: relative;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
#typewriter{
	color: white;
	font-family: "Press Start 2P", cursive;
	text-align: center;
	margin: 0;
}

#content-container{
	width: 100%;
	height: 70%;
	position: relative;
	z-index: 5;
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(218, 248, 247)), color-stop(rgb(218, 248, 247)), color-stop(rgb(218, 248, 247)), color-stop(rgb(218, 248, 247)), color-stop(rgb(244, 212, 233)), to(rgb(223, 128, 255)));
	background: -o-linear-gradient(top, rgb(218, 248, 247), rgb(218, 248, 247), rgb(218, 248, 247), rgb(218, 248, 247), rgb(244, 212, 233), rgb(223, 128, 255));
	background: linear-gradient(to bottom, rgb(218, 248, 247), rgb(218, 248, 247), rgb(218, 248, 247), rgb(218, 248, 247), rgb(244, 212, 233), rgb(223, 128, 255));
}
.rain-container{
	height: 100%;
	margin: 0;
	overflow: hidden;
	position: relative;
	padding: 0;
	z-index: 3;
}
.rain{
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.back-row {
	z-index: 1;
	bottom: 60px;
	opacity: 0.5;
}
.drop{
	position: absolute;
	bottom: 100%;
	width: 15px;
	height: 120px;
	pointer-events: none;
	-webkit-animation: drop 0.5s linear infinite;
	        animation: drop 0.5s linear infinite;
}
.stem{
	width: 1px;
	height: 60%;
	margin-left: 7px;
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(165, 238, 190, 0)), color-stop(rgba(165, 238, 190, 0.5)), color-stop(rgba(165, 238, 190, 0.5)), to(rgb(255, 255, 255)));
	background: -o-linear-gradient(top, rgba(165, 238, 190, 0), rgba(165, 238, 190, 0.5), rgba(165, 238, 190, 0.5), rgb(255, 255, 255));
	background: linear-gradient(to bottom, rgba(165, 238, 190, 0), rgba(165, 238, 190, 0.5), rgba(165, 238, 190, 0.5), rgb(255, 255, 255));
	background-color: rgb(165, 238, 190);
	-webkit-animation: stem 0.5s linear infinite;
	        animation: stem 0.5s linear infinite;
}
.splat{
	width: 15px;
	height: 12px;
	border-top: 2px dotted rgba(255, 255, 255, 1.0);
	border-radius: 50%;
	opacity: 1;
	-webkit-transform: scale(0);
	    -ms-transform: scale(0);
	        transform: scale(0);
	-webkit-animation: splat 0.7s linear infinite;
	        animation: splat 0.7s linear infinite;
}
@-webkit-keyframes drop{
	0%{
		-webkit-transform: translateY(0vh);
		        transform: translateY(0vh);
	}
	75%{
		-webkit-transform: translateY(80vh);
		        transform: translateY(80vh);
	}
	100%{
		-webkit-transform: translateY(80vh);
		        transform: translateY(80vh);
	}
}
@keyframes drop{
	0%{
		-webkit-transform: translateY(0vh);
		        transform: translateY(0vh);
	}
	75%{
		-webkit-transform: translateY(80vh);
		        transform: translateY(80vh);
	}
	100%{
		-webkit-transform: translateY(80vh);
		        transform: translateY(80vh);
	}
}
@-webkit-keyframes stem{
	0%{
		opacity: 1;
	}
	65%{
		opacity: 1;
	}
	75%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}
@keyframes stem{
	0%{
		opacity: 1;
	}
	65%{
		opacity: 1;
	}
	75%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}
@-webkit-keyframes splat{
	0%{
		opacity: 1;
		-webkit-transform: scale(0);
		        transform: scale(0);
	}
	80%{
		opacity: 1;
		-webkit-transform: scale(0);
		        transform: scale(0);
	}
	90%{
		opacity: 0.5;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
	100%{
		opacity: 0;
		-webkit-transform: scale(1.5);
		        transform: scale(1.5);
	}
}
@keyframes splat{
	0%{
		opacity: 1;
		-webkit-transform: scale(0);
		        transform: scale(0);
	}
	80%{
		opacity: 1;
		-webkit-transform: scale(0);
		        transform: scale(0);
	}
	90%{
		opacity: 0.5;
		-webkit-transform: scale(1);
		        transform: scale(1);
	}
	100%{
		opacity: 0;
		-webkit-transform: scale(1.5);
		        transform: scale(1.5);
	}
}
#reveal-wrapper{
	position: absolute;
	bottom: 0;
	right: 0;
	left: 100%;
	background-color: black;
	overflow: hidden;
	width: 0;
	height: 100%;
	z-index: 6;
	-webkit-transition: 2s ease;
	-o-transition: 2s ease;
	transition: 2s ease;
}
#reveal-text {
	color: white;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	white-space: nowrap;
	font-family: 'Little Miss Loudonbold';
	font-size: 2rem;
}
.reveal-slide{
	opacity: 1;
	width: 100%;
	left: 0;
}

#footer-container{
	width: 100%;
	height: 15%;
	z-index: 5;
}
#footer-content{
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	position: relative;
	z-index: 5;
}
.footer-btns{
	opacity: 0.75;
	-webkit-transition: opacity 1s, -webkit-transform 1.12s;
	transition: opacity 1s, -webkit-transform 1.12s;
	-o-transition: transform 1.12s, opacity 1s;
	transition: transform 1.12s, opacity 1s;
	transition: transform 1.12s, opacity 1s, -webkit-transform 1.12s;
	font-family: 'Little Miss Loudonbold';
	font-size: 1.1rem;
}
.footer-btns:hover{
	-webkit-transform: scale(1.2,1.2);
	    -ms-transform: scale(1.2,1.2);
	        transform: scale(1.2,1.2);
	opacity: 1.0;
}
.btn-text{
	margin: 0;
	vertical-align: middle;
}
#resume-btn{
	position: relative;
	width: 16.6%;
	height: 100%;
	background: rgba(255,13,251,.92);
}
#classes-btn{
	position: relative;
	width: 16.7%;
	height: 100%;
	background: rgba(152,7,235,.92);
}
#github-btn{
	position: relative;
	width: 16.7%;
	height: 100%;
	background: rgba(69,0,255,.92);
}
#linkedin-btn{
	position: relative;
	width: 16.7%;
	height: 100%;
	background: rgba(30,51,235,.92);
}
#about-btn{
	position: relative;
	width: 16.7%;
	height: 100%;
	background: rgba(23,130,255,.92);
}
#quotes-btn{
	position: relative;
	width: 16.6%;
	height: 100%;
	background: rgba(0,180,255,.92);
}
span{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
}
h3{
	text-align: center;
	color: white;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
}

@media screen and (min-width: 481px) and (max-width: 768px){
	#resume-btn{
		width: 33.33%;
		height: 50%;
	}
	#classes-btn{
		width: 33.34%;
		height: 50%;
	}
	#github-btn{
		width: 33.33%;
		height: 50%;
	}
	#linkedin-btn{
		width: 33.33%;
		height: 50%;
	}
	#about-btn{
		width: 33.34%;
		height: 50%;
	}
	#quotes-btn{
		width: 33.33%;
		height: 50%;
	}
}

@media screen and (max-width: 480px){
	#resume-btn{
		width: 50%;
		height: 33.33%;
	}
	#classes-btn{
		width: 50%;
		height: 33.34%;
	}
	#github-btn{
		width: 50%;
		height: 33.33%;
	}
	#linkedin-btn{
		width: 50%;
		height: 33.34%;
	}
	#about-btn{
		width: 50%;
		height: 33.33%;
	}
	#quotes-btn{
		width: 50%;
		height: 33.34%;
	}
}