*{
	margin : 0 ;
	position:relative;
}

body{
	font-family: "Public Sans","Zen Kaku Gothic New",sans-serif;
	font-weight:500;
	color:black;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
a{
	text-decoration:none;
}
p{
	text-align:center;
	font-size:1.5vmin;
}
h1{
	text-align:center;
	font-size:3.5vmin;
}
h2{
	text-align:center;
	font-size:3vmin;
}
h3{
	text-align:center;
	font-size:2.5vmin;
}

form *, form *:focus{
	font-family: "Public Sans","Zen Kaku Gothic New",sans-serif;
    border: none;
}

input, textarea{
    border-radius: 1vmin;
	background:lightgray;
    font-size:2vmin;
    line-height:3vmin;
    padding:1vmin;
}
textarea{
	resize: none;
}

input:invalid{
    outline: solid #00ffd3 0.2vmin;
}

input:focus, textarea:focus{
    outline: solid gray 0.2vmin;
}


.btn{
    margin:4vmin auto;
    background:white;
    border-radius:2vmin;
    outline:solid black 0.1vmin;
    
    font-size:2vmin;
    line-height:4vmin;
    padding:0 8vmin;
    color:black;
    
    transition:background 1s,color 1s;
}
.btn:hover{
    background:black;
    color:white;
}
.user_icon{
	border-radius: 50%;
	overflow: hidden;
	transition:  opacity 0.5s;
}
a.user_icon:hover{
	opacity:0.5;
}



.blue{
	color:#00ffd3;
}


.wave{
	animation-name: waveAnime;
	animation-fill-mode:forwards;
	animation-duration:1.5s;
	animation-iteration-count:1;
	animation-timing-function:ease;
	animation-direction:normal;
}

@keyframes waveAnime {
	0%{
	opacity:0;
	transform:translate(0px,-4px);
	}
	
	100%{
	opacity:1;
	transform:translate(0px,0px);
	}
}



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


#header{
	position:relative;
	height:7vmin;
	width:100%;
	z-index:1;
	background:white;
	display: flex;
}

#headerLogo{
	margin:0.5vmin;
	margin-left:2vmin;
}

#headerLogo img{
	width:15vmin;
	height:6vmin;
}

#headerLinks {
	margin: auto 0;
	margin-left: 5vmin;
	height:1.5vmin;
	display:flex;
}

#headerLinks a{
	margin-right: 3vmin;
	color:black;
	font-size:1.2vmin;
	line-height: 1.5vmin;
}

#headerLinks a::after{
    content: "";
    background:white;
    position:absolute;
    right:0;
    left:0;
    margin: auto;
    transition: width 0.5s,background 0.5s;
    height:0.2vmin;
    width:0;
    bottom:-0.1vmin;
}

#headerLinks a:hover::after{
    background:#00ffd3;
    width:100%;
}

#header .loginBtn{
    position:absolute;
	right:3vmin;
	height:3vmin;
	border-radius: 1.5vmin;
    background:black;
    color:white;
	font-size: 1.5vmin;
	line-height:3vmin;
	padding: 0 2vmin;
	margin: 2vmin 0;
    outline:solid black 0.1vmin;
    transition:background 1s,color 1s;
}
#header .loginBtn:hover{
	background:white;
	color:black;
}

#main{
	width:60%;
	margin:0 auto;
	animation: 1s ease-in both fadeIn paused;
}

#top{
	display: flex;
	justify-content: center;
	overflow:hidden;
	flex-direction: column;
}

#top p{
	font-size:2vmin;
}



#footer{
	margin-top:auto;
	height:20vmin;
	background:black;
	display:flex;
	justify-content:center; 
}

#footer p{
	color:white;
	text-align:center;
	line-height:3vmin;
	font-size:1vmin;
	margin:auto 0;
}


#footer a{
	position: absolute;
	color:white;
	text-align:right;
	line-height:3vmin;
	font-size:1vmin;
	right: 5vmin;
	bottom:0;
}