@charset "UTF-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
	font-weight: 200;
	letter-spacing: -.05em;
}

html,body{
	background-color: #161616;
	color: white;
}

header{
	position: relative;
	height: 80px;
	display: flex;
	align-items: center;
	padding: 0.5%;
	text-align: center;
}


	
p{
	margin-bottom: 2em;
	font-size: clamp(10px,5vw,40px);
	padding: 0 5%;
	text-align: center;
}

span{
	opacity: .1;
}

#bottom{
	margin-bottom: 30vh;
}


section{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	min-height: 30vh;
	background: #1f242d;
	
}

h1{
	font-size: 90px;
	color: #fff;
}

section .animate {
	transition: 1s;
}

.sec-1 .animate {
	transform: translateX(-100%);
}

.sec-1.show-animate .animate {
	transform: translateX(0);
}

.sec-1 p{
	
	color: #0ef;	
}


.sec-2 .animate {
	transform: translateX(-100%);
}

.sec-2.show-animate .animate {
	transform: translateX(0);
}

.sec-2 p{
	
	color: #0ef;
	
}