body{
    background-image: linear-gradient(to left top, #9b3a71, #8d4b80, #7e5888, #73638b, #6c6b88, #6c728f, #6d7896, #6d7f9c, #6788b3, #5c92ca, #479ce1, #05a7f8);;
    background-repeat: no-repeat;
    height: 100vh;
}

nav{
    background-color: rgb(233, 229, 222);
}

/* nav{
    margin-bottom: 1rem;

} */

div.container{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 12fr 1fr;
    gap: 0.5rem;
}

main{
    background-color: rgb(233, 229, 222);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

.phone{
    width: 18.5rem !important;
    

}

.tel{
    font-weight: 400;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;

}

form{
    text-align: center;

}

small{
    display: block;
}


small + small{
    display: none;
}

input:valid + small{
    display: none;
}

input:valid + small + small {
    display: block;

}

input:invalid + small + small + small {
    display: block;

}

#recall{
    background-color: #38a3fd;
    border:4px solid #c5c7e7;
    border-radius:100%;
    height: 8rem;
    width: 8rem;
    font-weight: 400;
    transition: 0.5s;
}

#recall:hover{
    border-color: rgb(6, 73, 117);
    transition: 0.5s;
    transform: scale(1.1);
}



footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}