html{
	font-family: 'Lato', sans-serif;
}

#test{
	height: 100vh;
	width: 0px;
	position: fixed;
	top: 0;
	left: -10px;
}

#split-screen{
	display: flex;
}

.text-wrapper{
	padding: 40vh 0 0 40vh;
}

#text{
	font-family: 'Fahkwang', sans-serif;
	height: 100vh;
	width: 100%;
}

.emphasis-span{
	font-weight: bold;
	color: rgb(0,213,241)
}

#sidebar{
	width: 40px;
	height: 100vh;
	position: fixed;
	right: 0;
}

#sidebar ul {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#sidebar ul li {
	margin: 10px 0;
	text-align: center;
	color: rgb(0,213,241)
}

#sidebar ul li i{
	transition: .5s;
}

#stressor {
	position: relative;
	height: 300vh;
	z-index: -1;
	background-size: cover;
}

.square{
	height: 3vh;
	font-size: 3vh;
	line-height: 0;
    display:inline-block;
    padding-right: 5px
}

.border-bottom {
	height: calc(3vh - 3px);
	border-bottom: 3px solid rgba(8, 61, 102, 1.0);
}

.no-border{
	border-bottom: none;
}

.blink {
	width: 1vw;
	animation: blink 1s infinite ease-out;
}

.settled {
	width: 0;
}

.half-screen{
	opacity: 0;
	width: 100vw;
	top: 0;
	left: 0;
	background-color: rgba(226, 230, 255, 0.5);
	animation-duration: 1s;
}

.position-ab{
	position: absolute;
	top: 10vh;
}

.position-rel{
	position: relative;
}

.first-text {
	color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-boxes {
    display: flex;
    justify-content: center;
    height: 100%;
}


.shown h2, .risen h2 {
	padding-bottom: 20px;
    font-size: 25px;
}

.shown h1, .risen h1 {
	padding-bottom: 20px;
    font-size: 35px;
}

.shown h3, .risen h3 {
    font-size: 20px;
}

.first-text h2 {
	width: 50%;
	align-self: center;
}

.professional-container {
	position: fixed;
	top: 55vh;
	width: 100vw;
    display: flex;
    flex-direction: column;
}

.hidden-container{
	display: flex;
	justify-content: space-around;
	color: white;
}

.professional {
	padding: 30px;
	text-align: center;
}

.professional-header{
	text-align: center;
	font-size: 25px;
	color: white;
}

#me-image{
	right: 5vw;
}

#second-text{
	right: 0;
	width: 10vw;
}

.shown {
	animation-name: dropin;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
}

.open{
	opacity: 1;
	height: 50vh;
	animation-name: open;
}


.close{
	opacity: 0;
	height: 0vh;
	animation-name: close;
}

.hidden {
	opacity: 0;

}

.risen {
	animation-name: riseout;
	animation-duration: 0.5s;

}

.white-text{
	color: white;
}

.first-text {

}

@keyframes dropin {
	0% {opacity: 0; transform: translateY(-50px)}
	100%{opacity: 1; transform: translateY(0px);}
}

@keyframes riseout {
	0% {opacity: 1;}
	100%{opacity: 0;}
}


@keyframes open {
	from {height: 0vh;}
	to {height: 50vh;}
}

@keyframes close {
	from {height: 50vh; opacity: 1;}
	to {height: 0vh; opacity: 0;}
}

@keyframes blink {
	from {opacity: 1;}
	to {opacity: 0};
}


@media screen and (max-aspect-ratio: 1/1){
	.first-text h1{
		font-size: 5vh;
	}

	.stressor{
		height: 200vh;
	}

	.text-wrapper{
		padding: 30vh 0 0 20vh;
	}

	.professional-container{
		top: 60vh;
	}

	.hidden-container{
		flex-direction: column;
		align-self: center;
		width: 70vw;
	}
}