start.css

*{
     padding: 0;
     margin: 0;
     box-sizing:border-box;

}

/* FIRST FILE */

#startBody{
     background-image:url('imgs.png');
     background-size: cover;
     background-repeat: no-repeat;
     font-size : 18.5px;
}

form{
     width: 40%;
     height: 80%;
     margin-top: 50px;
     background-color: #ffffff86;
     border: 4px solid rgba(255, 235, 205, 0.318); 
     box-shadow: 10px 10px 10px #a0a59886 , -10px 10px 10px #a0a59886,10px -10px 10px #a0a59886 , -10px -10px 10px #a0a59886; 
     backdrop-filter: blur(1px);
     border-radius: 3vw;    
     color: #1c5a9d;      
}

.name{
     margin-left: 2vw;
     margin-top: 2vw;
}

label[for="fn"] , label[for="number"] , label[for="name"]{
     font-size : 18.5px;
}

input[type="text"] , input[type="number"]{
     margin-top: 0.6vw;
     width: 95%;
}

input[type="text"]:focus , input[type="number"]:focus{
     box-shadow: 2px 2px 2px #c7bfb5 , -2px 2px 2px #c7bfb5 , 2px -2px 2px #c7bfb5 , -2px -2px 2px #c7bfb5;
}

label[for="male"] , label[for="female"] , label[for="other"]{
     font-size: 18px;
     padding-left: 0.47vw;
     padding-right: 1vw;
     color: #316d81;
}

#radio-temp{
     margin-left: 1.5vw;
     margin-top: 1.5px;
}

#city{
     margin-left: 1.5vw;
     width: 14vw;
     height: 2.8vw;
     color: rgb(58, 58, 58);
}

#city:focus{
     box-shadow: 2px 2px 2px #c7bfb5 , -2px 2px 2px #c7bfb5 , 2px -2px 2px #c7bfb5 , -2px -2px 2px #c7bfb5;
}


#submit , #reset , #cancel{
     margin-top: 2.3vw;   
     border-radius: 11px;
     background-color: #5286a1;
     color: whitesmoke;
     width: 25%; 
     font-weight: 500;
     margin-bottom: 1vw;
     transition: all 0.6s ease-in;
}

#submit:hover , #cancel:hover , #reset:hover{
     color: #2d80ad;
     background-color: white;
}

#bottom{
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: #ffffff4a;
     backdrop-filter: blur(1px);
     margin-top: 35.5px;
     height: auto;
}

#link{
     text-decoration: none;
     color: #ffe600;
}

#link i{
     margin-top: 5px;
     margin-right: 1.1rem;
     color: #c7bfb5;
}

#personal-link i{
     font-size: 23px;
     margin-right: 2.5rem;
     margin-top: 5px;
}


/* SECOND FILE */

#final-container{
     animation: ani 1s ease 0s 1;
}

#editform{
     margin-top: 2rem;
     margin-bottom: 5.4rem;
     animation: ani 1s ease 0s 1;
     border: 4px solid rgba(255, 235, 205, 0.318); 
     box-shadow: 2px 2px 2px #ffffff , -2px 2px 2px #ffffff,2px -2px 2px #ffffff , -2px -2px 2px #ffffff; 
     color: #1c5a9d;      
}

@keyframes ani {
     0%{
          opacity: 0;
     }
     100%{
          opacity: 1;
     }
}

h1{
     text-align: center;
}

table{
     margin-top: 2rem;
}

td .btn{
     width: 80px;
}

#editBtn{
     margin-left: 3rem;
}

/* MEDIA */

@media screen and (max-width: 900px){
     #startBody{
          background-image:url('small.png');
          background-size:auto;
     }    

     form{
          width: 95%;
          margin-top: 100px;
          border: 2px solid rgba(255, 235, 205, 0.318); 
          box-shadow: 2.5px 2.5px 2.5px #a0a59886 , -2.5px 2.5px 2.5px #a0a59886,2.5px -2.5px 2.5px #a0a59886 , -2.5px -2.5px 2.5px #a0a59886; 
          border-radius: 1rem;    
     }

     .name{
          margin-left: 5vw;
          margin-top: 5vw;
     }    

     label[for="fn"] , label[for="number"] , label[for="name"]{
          font-size : 17px;
     }

     input[type="text"] , input[type="number"]{
          margin-top: 1.9vw;
          width: 91%;
     }

     input[type="text"]:focus , input[type="number"]:focus{
          box-shadow: 1px 1px 1px #c7bfb5 , -1px 1px 1px #c7bfb5 , 1px -1px 1px #c7bfb5 , -1px -1px 1px #c7bfb5;
     }

     label[for="male"] , label[for="female"] , label[for="other"]{
          font-size: 16px;
     }

     #male{
          margin-left: 2.3vw;
     }

     #gendertemp{
          margin-top: 1.9vw;  
     }

     #radio-temp{
          margin-left: 1.5vw;
          margin-top: 1.9vw;
     }

     #city{
          margin-top: 1.3vw;
          margin-left: 4.4vw;
          width: 40%;
          height: auto;
     }

     #temp{
          margin-top: 0.4vw;
     }

     #submit , #reset , #cancel{
          margin-top: 7vw;   
          border-radius: 8px;
          width: 45%; 
          margin-bottom: 5vw;
     }

     #bottom{
          display: grid;
          justify-content:'';
          grid-template-areas: 
               'spanlink'
               'plinks'
          ;
          margin-top: 100px;
          height: auto;
     }
     
     #spanlink{
          grid-area: spanlink;
     }

     #personal-link{
          margin-right: 5rem;
     }

     #personal-link i{
          font-size: 23px;
          margin-right: 1.5rem;
          margin-top: 1px;
          grid-area: plinks;
     }
}

@media screen and (max-width: 330px){
     form{
          width: 98%;
     }

     .name{
          margin-left: 5vw;
     }

     label[for="male"] , label[for="female"] , label[for="other"]{
          font-size: 14.5px;
          padding-left: 0vw;
     }

     #male{
          margin-left: 2vw;
     }

     #gendertemp{
          margin-top: 1.9vw;  
     }

     #radio-temp{
          margin-left: 1vw;
          margin-top: 1.9vw;
     }

     input[type="text"] , input[type="number"]{
          width: 95%;
          margin-top: 1.9vw;
     }

     #temp{
          margin-top: 3vw;
     }

     #city{
          margin-top: 3.4vw;   
          width: 39%;
          height: auto;
          margin-left: 3.3vw;
     }

     #submit , #reset , #cancel{
          margin-top: 6.5vw;   
          border-radius: 9px;
          width: 45%; 
          margin-bottom: 5vw;
     }
}