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

body{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(180deg,#ffffff,#eefcfb);

overflow:hidden;

font-family:Arial,sans-serif;

}

.container{

width:100%;

padding:30px;

display:flex;

justify-content:center;

align-items:center;

animation:fade .8s ease;

}

.instructions{

width:100%;

max-width:680px;

border-radius:25px;

box-shadow:0 20px 60px rgba(0,0,0,.12);

transition:.4s;

}

.instructions:hover{

transform:translateY(-5px);

}

.bubbles{

position:fixed;

inset:0;

overflow:hidden;

z-index:-1;

}

.bubbles span{

position:absolute;

bottom:-150px;

border-radius:50%;

background:rgba(12,124,134,.15);

animation:up 18s linear infinite;

}

.bubbles span:nth-child(1){

left:10%;
width:120px;
height:120px;
animation-duration:18s;

}

.bubbles span:nth-child(2){

left:30%;
width:60px;
height:60px;
animation-duration:12s;

}

.bubbles span:nth-child(3){

left:55%;
width:90px;
height:90px;
animation-duration:15s;

}

.bubbles span:nth-child(4){

left:75%;
width:150px;
height:150px;
animation-duration:22s;

}

.bubbles span:nth-child(5){

left:90%;
width:70px;
height:70px;
animation-duration:16s;

}

.bubbles span:nth-child(6){

left:45%;
width:180px;
height:180px;
animation-duration:25s;

}

@keyframes up{

0%{

transform:translateY(0) scale(.5);

opacity:0;

}

20%{

opacity:.3;

}

100%{

transform:translateY(-120vh) scale(1.3);

opacity:0;

}

}

@keyframes fade{

from{

opacity:0;

transform:scale(.95);

}

to{

opacity:1;

transform:scale(1);

}

}

@media(max-width:768px){

.instructions{

max-width:100%;

border-radius:18px;

}

}