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

body{

    background:#f7fcfc;
    min-height:100vh;
    overflow-x:hidden;
    font-family:Arial,sans-serif;

}

.container{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}

.instructions{

    width:100%;

    max-width:700px;

    height:auto;

    border-radius:25px;

    box-shadow:0 25px 60px rgba(0,0,0,.15);

    animation:show .8s ease;

    transition:.4s;

}

.instructions:hover{

    transform:scale(1.02);

}

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-1;

}

.circle{

    position:absolute;

    border-radius:50%;

    opacity:.18;

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

}

.one{

    width:320px;

    height:320px;

    background:#0C7C86;

    top:-100px;

    left:-120px;

}

.two{

    width:220px;

    height:220px;

    background:#38B7C4;

    right:-70px;

    top:120px;

}

.three{

    width:280px;

    height:280px;

    background:#CDEFF2;

    bottom:-100px;

    left:20%;

}

.four{

    width:170px;

    height:170px;

    background:#7ADDE4;

    bottom:80px;

    right:15%;

}

@keyframes float{

0%{

transform:translateY(0) translateX(0);

}

50%{

transform:translateY(-40px) translateX(20px);

}

100%{

transform:translateY(0) translateX(0);

}

}

@keyframes show{

from{

opacity:0;

transform:scale(.95);

}

to{

opacity:1;

transform:scale(1);

}

}

@media(max-width:768px){

.instructions{

max-width:100%;

border-radius:18px;

}

}