*{
    margin:0;
    padding:0;
}
body{
    background-color:crimson;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
}
.contenedor{
    width:600px;
    border:5px solid white;
    padding:15px 15px 0;
    display:flex;
    flex-wrap:wrap;
}
.circulo{
    width:120px;
    height:120px;
    border-radius:50%;
    background-color:white;
    margin:0 15px 15px;
    cursor:pointer;
}
.invisible{
    animation:eliminar 0.3s;
    animation-fill-mode:forwards;
    /*pointer-events:none;*/
}
.timer{
    width:600px;
    border:5px solid white;
    padding:15px 0;
    display:flex;
    margin-top:20px;
    height:15px;
}
.timer div{
    background-color: white;
    margin:0 10px;
}

.modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background-color:rgba(0,0,0,0.6);
    display:none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.visible{
    display:flex;
}
.modal p{
    font-size: 8em;
    color:white;
}
.modal button{
    display:flex;
    margin-top:20px;
    background-color:transparent;
    width:auto;
    border:2px solid white;
    border-radius:10px;
    color:white;
    font-size:1.5em;
    padding:15px;
}


.modal button:hover{
    transform: scale(1.2);
    transition: transform 0.3s;
    background-color:white;
    width:auto;
    border:2px solid white;
    border-radius:10px;
    color:crimson;
}

@keyframes eliminar{
    0%{
        transform:scale(1);
        opacity:1;
    }
    5%{
        transform:scale(1.4);
        opacity:1;
    }
    99%{
        transform:scale(0.001);
        opacity:1;
    }
    100%{
        transform:scale(0.001);
        opacity:0;
    }
}