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

.box{ 

max-width:900px;
margin:0 auto;

} 

body{
    background-color: grey; 
}

.rect{
    width:600px;
    height:670px;
    margin:0 auto;
    margin-top:30px;
    padding:10px 20px;
    border-radius: 13px;
    background-color: white;
    box-shadow:10px, 3px, 5px rgba(1,1,1,0.9);
    
}

.heading{
    display:flex;
    justify-content: center;
}

.heading h3{
    margin-left: 18px;
    margin-top:24px;
    font-size:22px;
    color:rgb(4, 4, 67);
}
.heading h1{
    margin-top:10px;
}

.form_container{
    margin-top:30px;
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(200px ,1fr ));
    gap:20px;


}

.form_controls{
  display: flex;
  flex-direction: column;
  
}

label{
    font-size:18px;
    margin-bottom:5px;
}

input,select , textarea {
    padding:6px 12px;

    /*
    it is a short hand technique
     6px → padding for top and bottom
10px → padding for left and right*/
  border:0.8px solid grey;
  border-radius: 4px;
  font-size:14px;
}


input:focus{
    outline-color:rgb(241, 144, 7);
   background-color: lightyellow;

}
.button_container{
    display: flex;
    justify-content:end;
    margin-top:30px;
    margin-right:30px;
   
    
}
button{
    font-size: 16px;
    border-radius: 7px;
    border:2px solid black;
    padding:4px 8px;
    /* color:cornflowerblue;
     */
     color:#fdf0d5;
    background-color: #045884;
    transition:0.3s ease-in;
}
button:hover{
    background-color:#fb8500;
    color:#ffb703;
    border:2px solid burlywood;
    transition: 0.2s ease-out;
}

.Add_area{
    grid-column: 1/span 2;
}

.Add_area textarea{
    width:100%;
}


@media(max-460){
    .Add_area{
    grid-column: 1/span 1;
}

}