styles.css

body{
    background-color:#474747 ;
    font-family:sans-serif;
    text-align:center;
    display:flex;
    flex-direction:column;

}
.form{
    display:flex;
    flex-direction:column;
    gap:20px;
}
#birthdate{
    background-color: rgb(252, 252, 253);
    font-size:20px;
    width:fit-content;
    margin-left:auto;
    margin-right: auto;
    font-weight: 800;
    color:rgb(10, 10, 10);
    border-radius: 9px;

}
.btn{
    width:fit-content;
    margin-left:auto;
    margin-right: auto;
    margin-top:20px;
    font-size:15px;
    border-radius:5px;
    background-color: rgb(20, 22, 26);
    color:beige;
    transition: all linear 0.3s  0.1s;
}


.content{
    margin-left:auto;
    margin-right: auto;
    margin-top:100px;
    width:450px;
    background-color: rgb(0, 0, 0);
    border-radius: 25px;
    box-shadow: 0px 0px 23px;
    color:white;
    text-shadow:0px 0px 10px white;
}
@media(max-width:600px){
    body{
        background-color:#474747;
         }
     
         .content{
             font-size:0.5rem;
             width:200px;
             padding:40px;
         }

         #birthdate{
            font-size:16px;
            width:fit-content;
            margin-left:auto;
            margin-right: auto   
        
        }  
   
}

@media(max-width:300px){
    body{
        background-color:#474747;
         }
     
         .content{
             width:150px;
             padding:30px;
         }  
         #birthdate{
            background-color: rgb(252, 252, 253);
            font-size:14px;
            width:fit-content;
            margin-left:auto;
            margin-right: auto;
            font-weight: 600;
            color:rgb(10, 10, 10);
            border-radius: 9px;
        
        }
}