*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:Arial,sans-serif;
background:#05090d;
overflow:hidden;

}

.background{

width:100%;
height:100vh;

display:flex;

justify-content:center;

align-items:center;

position:relative;

background:

radial-gradient(circle at top,
#2bbb47,
#272727,
#272727);

}

.lab-card{

width:700px;

padding:60px;

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

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.1);

border-radius:30px;

text-align:center;

box-shadow:

0 0 50px rgba(0,255,255,.1);

z-index:5;

}

.logo{

width:170px;

margin-bottom:35px;

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

}

h1{

font-size:48px;

color:white;

margin-bottom:20px;

}

p{

font-size:19px;

line-height:34px;

color:#d0d0d0;

margin-bottom:40px;

}

h3{

color:#76ffd1;

letter-spacing:5px;

margin-bottom:25px;

}

.progress{

width:100%;

height:14px;

background:#1d1d1d;

border-radius:30px;

overflow:hidden;

margin-bottom:35px;

}

.fill{

width:60%;

height:100%;

background:

linear-gradient(
90deg,
#2bbb47,
#77f2ff,
#2bbb47);

animation:loading 4s infinite;

}

.icons{

font-size:34px;

letter-spacing:12px;

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

}

.bubble{

position:absolute;

border-radius:50%;

background:rgba(110,255,255,.18);

animation:rise linear infinite;

}

.b1{

width:35px;
height:35px;
left:8%;
bottom:-80px;
animation-duration:12s;

}

.b2{

width:18px;
height:18px;
left:25%;
bottom:-80px;
animation-duration:8s;

}

.b3{

width:50px;
height:50px;
left:70%;
bottom:-80px;
animation-duration:10s;

}

.b4{

width:24px;
height:24px;
left:88%;
bottom:-80px;
animation-duration:7s;

}

.b5{

width:28px;
height:28px;
left:45%;
bottom:-80px;
animation-duration:11s;

}

.molecule{

position:absolute;

border:2px solid rgba(0,255,255,.25);

border-radius:50%;

}

.m1{

width:90px;
height:90px;

top:80px;

left:100px;

animation:rotate 12s linear infinite;

}

.m2{

width:120px;
height:120px;

bottom:100px;

right:120px;

animation:rotate 16s linear infinite reverse;

}

.m3{

width:70px;
height:70px;

top:180px;

right:250px;

animation:rotate 10s linear infinite;

}

@keyframes loading{

0%{

width:10%;

}

50%{

width:80%;

}

100%{

width:40%;

}

}

@keyframes rise{

0%{

transform:translateY(0);

opacity:0;

}

30%{

opacity:1;

}

100%{

transform:translateY(-120vh);

opacity:0;

}

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}

@keyframes rotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@media(max-width:768px){

.lab-card{

width:92%;

padding:40px 25px;

}

.logo{

width:120px;

}

h1{

font-size:34px;

}

p{

font-size:16px;

line-height:28px;

}

.icons{

font-size:24px;

}

}