*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{

height:100%;
overflow:hidden;
font-family:Montserrat,sans-serif;

}

body{

background:url(../img/bg.jpg) center center/cover no-repeat;
display:flex;
justify-content:center;
align-items:center;
color:white;
position:relative;

}

.overlay{

position:absolute;
inset:0;

background:
radial-gradient(circle at center,
rgba(45,66,140,.25),
rgba(4,7,18,.80));

}

.hero{

position:relative;
z-index:5;
text-align:center;
width:min(900px,90%);

}

.logo{

width:500px;
max-width:90%;

animation:float 6s ease-in-out infinite;

filter:drop-shadow(0 20px 35px rgba(0,0,0,.45));

}

.line{

margin:35px auto;
width:100px;
height:3px;
background:#E5332A;

}

h1{

font-size:58px;
font-weight:800;
letter-spacing:12px;

margin-bottom:25px;

opacity:0;

animation:fadeUp 1.3s forwards .4s;

}

p{

font-size:22px;
font-weight:300;

color:#d7dff9;

margin-bottom:45px;

opacity:0;

animation:fadeUp 1.3s forwards .8s;

}

a{

display:inline-block;

padding:18px 42px;

border:2px solid #4966d5;

color:white;

text-decoration:none;

border-radius:40px;

transition:.35s;

opacity:0;

animation:fadeUp 1.3s forwards 1.2s;

}

a:hover{

background:#4966d5;

box-shadow:0 0 40px rgba(73,102,213,.5);

transform:translateY(-3px);

}

.water{

position:absolute;

bottom:40px;
left:-50%;

width:200%;
height:120px;

background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='100'%3E%3Cpath d='M0 50 Q60 20 120 50 T240 50 T360 50 T480 50 T600 50 T720 50 T840 50 T960 50 T1080 50 T1200 50 T1320 50 T1440 50 T1560 50 T1680 50' stroke='%232D428C' stroke-width='2' fill='none'/%3E%3C/svg%3E");

opacity:.4;

animation:wave 22s linear infinite;

}

@keyframes wave{

from{
transform:translateX(0);
}

to{
transform:translateX(-300px);
}

}

@keyframes float{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}

@media(max-width:768px){

.logo{

width:300px;

}

h1{

font-size:34px;
letter-spacing:5px;

}

p{

font-size:17px;

}

a{

width:100%;

}

}