body{
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background-color: dodgerblue;
  

}

.container{
    max-width: 700px;
    margin :32px auto;
   
    
}


h1{
  font-size: 3rem;
  line-height: 1.6;
  margin-bottom: 16px;
  text-align: center;
  color: whitesmoke;
}

p{
  color: whitesmoke;
}

#marksForm{
  background-color: rgb(77, 77, 77);
  border-radius: 10px;
  font-weight: 600;
  font-size: 1.4rem;
  padding: 32px;
  

  

}

.field{
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 12px;
  
}

.field input{
  width: 200px;
  border: white;
  padding: 11px;
  border-radius: 4px;
  

 
}

.field label{
  width: 200px;
  color: rgb(77, 77, 77);
  border: 2px solid whitesmoke;
  border-radius: 4px;
  padding-left: 8px;
  background-color: whitesmoke;
 
}






#CheckBtn{
  border: 2px solid rgb(77, 77, 77);
  border-radius: 5px;
  font-size: 1.2rem;
  color: rgb(77, 77, 77);
   margin-top: 20px;
  padding: 10px 20px;
  
}

#result{
  padding: 28px;
  border: 3px solid rgb(77, 77, 77);
  background-color: whitesmoke;
  max-width: 300px;
  border-radius: 8px;
  color: rgb(77, 77, 77);
}