.final-surprise{
    text-align: center;
    color:white;
    font-size: clamp(2rem,6vw,3.5rem);
    margin-top:5rem;
}

.container-align-center{
    margin-top:2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.container-secret-code{
    width:clamp(15rem,40%,60rem);
    position:relative;
    height:4.5rem;
    line-height: 6rem;
}

input{
    position: absolute;
    outline:none;
    font-size: 1.2rem;
    line-height: 4rem;
    border-radius: 10px;
    border:4px solid #ffffff;
    width:90%;
    background: transparent;
    transition:0.1s ease;
    padding-left:1.5rem;
    z-index:1;
}

.secret-code{
    position:absolute;
    font-size:1.2rem;
    height:1rem;
    top:-.75rem;
    color:#828282;
    padding:0 25px;
    background-color: #000c20;
    transition:0.2s ease;    
}

input:focus,input:valid{
    color:#66ff00;
    border:4px solid #66ff00;
}

input:focus+.secret-code,input:valid+.secret-code{
    color:#66ff00;
    height:30px;
    line-height:30px;
    translate:(-1rem,-2.25rem) scale(0.75);
    z-index: 5;
}

.check-code{
    border:none;
    outline:none;
    cursor: pointer;
    border-radius:20px;
    height:2rem;
    width:3.2rem;
    scale:1.5;
    background-color:#00b80c;
    color:white;
    transition:0.3s;
    transform: scale(1);
}

.check-code:active,.check-code:hover{
    transform: scale(1.2);
}

@media(max-width:400px) {
    .container-align-center{
        flex-wrap: wrap;
        flex-direction: column;
        height:10rem;
        justify-content: center;
        align-items: center;
    }
    .container-secret-code{
        margin:0;
    }
    .check-code{
        margin-top:2rem;
    }
}