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

body{

height:100vh;

font-family:'Oswald',sans-serif;

background:url(background.png) center center/cover no-repeat fixed;

overflow:hidden;

}

.overlay{

height:100%;

background:rgba(25,25,25,.55);

display:flex;

flex-direction:column;

justify-content:space-between;

animation:fade 1.5s;

}

.container{

flex:1;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

color:#fff;

text-align:center;

padding:20px;

}

h1{

font-size:72px;

font-weight:500;

line-height:70px;

letter-spacing:5px;

margin-bottom:20px;

}

p{

font-size:12px;

letter-spacing:4px;

margin-bottom:25px;

}

.progress{

width:320px;

max-width:90vw;

height:5px;

background:#d9d9d9;

border-radius:30px;

overflow:hidden;

}

.bar{

height:100%;

width:0%;

position:relative;

background:linear-gradient(90deg,#4d9df5,#8cc6ff,#4d9df5);

background-size:300%;

animation:gradient 2s linear infinite;

}

.bar::after{

content:"";

position:absolute;

left:-50px;

top:0;

width:50px;

height:100%;

background:rgba(255,255,255,.7);

filter:blur(4px);

animation:shine 2s infinite;

}

.labels{

width:320px;

max-width:90vw;

display:flex;

justify-content:space-between;

margin-top:8px;

font-size:11px;

}

#percent{

color:#89c8ff;

}

button{

margin-top:35px;

padding:10px 35px;

background:#7fb6f2;

border:none;

color:#fff;

cursor:pointer;

transition:.3s;

font-family:inherit;

}

button:hover{

background:#5ea3ef;

transform:translateY(-2px);

}

.social{

margin-top:60px;

display:flex;

gap:20px;

}

.social a{

width:45px;

height:45px;

border:1px solid #fff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

text-decoration:none;

transition:.3s;

}

.social a:hover{

background:#fff;

color:#222;

transform:translateY(-5px);

}

footer{

padding:25px;

color:#ddd;

font-size:12px;

text-align:center;

}

@keyframes gradient{

0%{background-position:0%;}

100%{background-position:300%;}

}

@keyframes shine{

0%{

left:-60px;

}

100%{

left:350px;

}

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}

@media(max-width:768px){

h1{

font-size:48px;

line-height:48px;

}

.social{

gap:12px;

}

.social a{

width:40px;

height:40px;

}

}

@media(max-width:480px){

h1{

font-size:36px;

line-height:38px;

letter-spacing:3px;

}

.progress{

width:90%;

}

.labels{

width:90%;

}

button{

width:180px;

}

}