 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: "lato", sans-serif;
 }
 body {
    background-color: #090e22;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: #fff;
 }
 .hide {
    display: none !important;
 }
 .container {
    min-width: 400px;
    min-height: 400px;
    background-color: #1d1e33;
    padding: 2rem;
 }

 /*IMC Form*/
 #calc-container h2 {
    text-align: center;
    margin-bottom: 2rem;
 }

 .form-inputs {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
 }
 .form-control {
    display: flex;
    flex-direction: column;
    flex: 1;
   margin-bottom: 1rem;
 }
 .form-control label {
    font-weight: bold;
    margin-bottom: 0.6rem;
    color: #ccc;
 }
 
 .form-control input {
    padding: 1rem 0.5rem;
 }
 .action-control {
    display: flex;
    justify-content:  space-between;
    margin-top: 2rem;
    gap: 1rem;
 }
 button {
    text-transform: uppercase;
    padding: 1rem 1.5rem;
    background-color: #f44236;
    border: none;
    color: #fff;
    cursor: pointer;
    opacity: 0.9;
    flex: 1;
 }
 button:hover {
    opacity: 1;
 }

 #clear-btn {
    background-color: #444 ;
 }
/*table*/
#result-container {
   text-align: center;
   display: flex;
   flex-direction: column;
   
}
#imc-number {
   font-size: 2.4rem;
   margin-bottom:0.6rem;

}
#imc-info {
   font-size: 1.4rem;
   color: #ccc;
}
#result-container h3 {
   margin-top: 1rem;
   color: #dfdfdf;

}
#imc-table {
   margin: 1.5rem;
  font: size 0.8em; ;
}
.table-reader {
  font-weight: bold;
  color: #ccc;   
}
.table-header,
.table-data {
   display: flex;
   justify-content: space-between;
   margin-bottom: 5rem;
   padding-bottom: 5rem;
   border-bottom: 1px solid#444;

}
.table-header h4
.table-data {
   flex: 1;

}
.table-header h4:nth-child(3),
.table-data p:nth-child(3) {
   max-width:  80px;
}
#back-btn {
   align-self: center;

}
.good {
   color: #12db34;
}
.low {
   color: #dbce12;
}.medium {
   color: #db6212;
}.hige {
   color: #db1912;
}