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

body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#f5ffff;
overflow:hidden;
}

.container{
width:95%;
max-width:700px;
padding:20px;
}

.instructions{
width:100%;
border-radius:25px;
box-shadow:0 15px 40px rgba(0,0,0,.15);
animation:fade .8s ease;
}

.background{
position:fixed;
width:100%;
height:100%;
z-index:-1;
overflow:hidden;
}

.background span{
position:absolute;
border-radius:50%;
opacity:.25;
animation:move 18s linear infinite;
}

.background span:nth-child(1){
width:250px;
height:250px;
background:#0C7C86;
top:5%;
left:-80px;
}

.background span:nth-child(2){
width:180px;
height:180px;
background:#5FD2DB;
right:-40px;
top:60%;
}

.background span:nth-child(3){
width:130px;
height:130px;
background:#C8F5F8;
left:70%;
top:15%;
}

.background span:nth-child(4){
width:220px;
height:220px;
background:#2FB9C4;
bottom:-70px;
left:25%;
}

@keyframes move{
0%{transform:translateY(0) rotate(0deg);}
50%{transform:translateY(-40px) rotate(180deg);}
100%{transform:translateY(0) rotate(360deg);}
}

@keyframes fade{
from{
opacity:0;
transform:scale(.95);
}
to{
opacity:1;
transform:scale(1);
}
}