body{
    background-color: var(--main_color_01);
    color: black;
    
}

.middle{
    width: 90vw;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;   
    margin: 0 auto;
   
   
 }
 
 .container{
     width: 900px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     
 }

 .left{
    width: 500px;
 }
 h5{
    color: black;
 }

 .user .greeting{
    font-size: 1.6rem;
    color: var(--main_color_03);
    text-align: center;
 }

 .user .name{
    font-size: 1.2rem;
    color: var(--main_color_02);
    text-align: center;
    margin-bottom: 50px;
    text-transform: capitalize;
 }
 
 
 .select {
     width:90%;
     display: flex;
     flex-direction: column;
     text-align: center;
 }




 .btn{
     background-color: var(--button_01);
     border: none; 
     width: 90%; 
     box-shadow: 0 0 5px grey;  
     border-radius: 5px;
     color: var(--white);
     padding: 8px 10px;
     text-align: center;
     margin-top: 20px;
     cursor: pointer;
     transition: all .5s;
     text-transform: uppercase;
     font-size: 1rem;
     letter-spacing: 1px;
 
 }
 
 .btn:hover{
     transform: translateY(-5px);
 }
 
 .message p{
     margin-top: 50px;
     color: brown;
 }

 .back{
    position: absolute;
    bottom: 75px;
 }

 .back a{
    text-decoration: none;
    color: black;
   
 }


 
 
 @media only screen and (max-width: 480px) {
   
 }
   
   /* Tablets and Large Phones */
 @media only screen and (min-width: 481px) and (max-width: 768px) {
 
 }
   /* Small Laptops and Tablets */
 @media only screen and (min-width: 769px) and (max-width: 1024px) {
     .container{
         width: 400px;
     }
 
     .select input{
         padding: 8px 15px;
     }
 
     .btn{
         font-size: 1.1rem;
     }
 }
   /* Desktops and Large Laptops */
 @media only screen and (min-width: 1025px) and (max-width: 1200px) {
     .container{
         width: 400px;
     }
 
     .select input{
         padding: 10px 15px;
     }
 
     .btn{
         padding:10px 
     }
     .btn{
         font-size: 1.1rem;
     }
 }
   
   /* Widescreen Monitors */
 @media only screen and (min-width: 1201px) {
     .container{
         width: 400px;
     }
 
     .select input{
         padding: 10px 15px;
     }
 
     .btn{
         padding:12px 
     }
     .btn{
         font-size: 1.1rem;
     }
 }