/* When finished update R, A and Vue */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');   

body {
  margin: 0; 
  padding: 0; 
  min-height: 100dvh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-family: "Noto Sans", sans-serif;
  color: ghostwhite;

  background-image: linear-gradient(to bottom right, #ff6869, #ff69de);
}


.box { 
   display: flex; 
   flex-direction: column; 
   align-items: center; 
}

.container {
  /* Error error error 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
  */
  display: flex; 
  flex-direction: column;
  align-items: center; 
      
  background: transparent;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 474px;  
  /* max-width: 600px; */
  height: 500px;
  /* height: auto; */
}


.container .box input { 
  all: unset;
  width: 200px; 
  height: 25px;

  /* Error error error 
  position: absolute; 
  left: 50%;
  transform: translate(-50%,-50%);
  */
  text-align: center;

  background-color: ghostwhite;
  color: #010101;
  box-shadow: 6px 6px 0 0 #010101;
  border-radius: 6px; 
  border-style: solid; 
  border-color: #010101;
  border-width: 1px; 
  transition: box-shadow 0.4s ease-in-out;
  /* margin: 10px 0; */
}

.container .calculate:hover {
  box-shadow: 6px 6px 0 0 ghostwhite;
  transition: 0.4s ease-in-out;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}


.container .calculate {
  all: unset; 
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px; 
  width: 54%; 
  color: ghostwhite; 
  background-color: #010101;
  /* background: #93309e; */
  border-radius: 6px;
  margin-top: 40px;
  transition: box-shadow 0.4s ease-in-out;
}

.container .calculate:hover {
  box-shadow: 6px 6px 0 0 ghostwhite;
}


button { 
  margin-top: 4px; 
  padding: 4px; 
  outline: none; 
  flex-shrink: 0;
  width: 100%;
  max-width: 200px;
  height: 20px;
}  

/* Further tweak flexbox button shrink */


.container .result-box .bmi {
   padding-left: 10px; 
   padding-right: 10px; 
   height: 50px; 
   display: flex; 
   align-items: center;
   justify-content: center;
   margin: auto; 
   width: 120px; 
   margin-top: 5px; 
   
}

.container .result-box .yr-bmi-txt {
  text-align:center;
  margin-top:17px; 
}

.result {
   background-color: ghostwhite; 
   border-radius: 6px;  
   width: 100%; 
   Heught: 2.5rem;
   margin: 10px auto; 
     padding: 6px;
   text-align: center; 
}

@media screen and (max-width: 500px) {
    body { 
      height: 100dvh; 
    }
  
  .container { 
    max-width: 94%;
    height: 500px; 
  }
}