body{
    margin: 0;
    padding: 0;
    background-color: #282C34;
}
#label{
    font-size: 2em;
}

.form{
    position: absolute;
    right: 27%;
    top: 28%;
    padding-bottom: 0px;
    background-color: #181d25;
    min-height:360px;
    width: 600px;
    border-radius: 4px;
    box-shadow: rgba(30, 30, 30, 0.3) 0px 6px 12px;
    padding: 20px;
}
.topo{
    position: absolute;
   top:0;
   
   color: #f2f4f8;
   width: 100%;
   height: 50px;
   text-align: center;
   font-family: 'Montserrat', 'sans-serif';
   font-size: 40px;
   padding-bottom: 20px;
   padding-top: 20px;

}
#pes{
    position: absolute;
    bottom: 53%;
    right: 84%;
}
#alt{
    position: absolute;
    bottom:83%;
    right: 82%;
}
.altura, .peso{
    color: #f2f4f8;
    font-weight: bold;
    text-align: center;
    font-family: 'Montserrat', 'sans-serif';
    font-size: 20px;

}
#altura, #peso{
    position: absolute;
    left:8%;
    padding: .5 1em;
    width: 83%;
    height: 40px;
    border-radius: 5px;
    box-shadow: 1px #000000;
    background-color: #6a6ffa;
    color: #f2f4f8;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 40px;
    border: 0;
   
}
#peso{
    bottom: 36%;
}
#altura{
    bottom: 65%;
}

.botao{
    background-color: #5b60ff;
    text-decoration: none;
    color: #f2f4f8;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    text-align: center;
    text-shadow: 1px 0px 2px 1px #000000;
    padding: 5px;
    position: absolute;
    left:31%;
    bottom: 13%;
    margin: 0px;
    width: 220px;
    height:40px;
    font-size: 25px;
    border-radius: 6px;
    border: 0;

}
.botao:hover{
    background-color: #4549b8;
}
#return{
    background-color: #5b60ff;
    text-decoration: none;
    color: #f2f4f8;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    text-shadow: 1px 0px 2px 1px #000000;
    padding: 5px;
    position: absolute;
    left:39%;
    bottom: 12%;
    margin: 0px;
    width: 325px;
    height:40px;
    font-size: 25px;
    border-radius: 6px;
    border: 0;
    cursor: pointer;
cursor: auto;
}
#return:hover{
    background-color: #4549b8;
}
.botao:hover{
    background-color: #4549b8;
}
#result{
    text-align: center;
    font-size: 30px;
    font-family: 'Montserrat', sans-serif;
   
}
.rodape{
    bottom: 0%;
    font-family: 'Montserrat', sans-serif;
    position:fixed;
    width: 100%;
    height: 30px;
    
    color: #f2f4f8;
    text-align: center;
    padding-top: 30px;
}
#github{
    text-decoration:none ;
    color: #00e4c6;
}
.erro{ 
    background-color: #181d25;
    color: red;
    font-size: 17px;
    text-align: center;
    opacity: 2.5;
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    top:65%;
    left: 26%;
}
.erro-pes{
    background-color: #181d25;
    color: red;
    font-size: 17px;
    text-align: center;
    opacity: 2.5;
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    top:65%;
    left: 8%;
}
.erro-alt{
    background-color: #181d25;
    color: red;
    font-size: 17px;
    text-align: center;
    opacity: 2.5;
    font-family: 'Montserrat', sans-serif;
    position: absolute;
    left: 8%;
    top:35%;
}
.flip-box {
  background-color: transparent;
  width: 500px;
  height: 80px;
  perspective: 1000px;
  position: absolute;
  left:31%;
  bottom:47%;
  padding: 1em;
    text-align: center;
    color: #f2f4f8;
    font-family: 'Montserrat', sans-serif;

}
#imc{
    font-size: 4em;
  
}
#status{
    font-size: 2.5em;
   
}
@media screen and (max-height:700px) and (min-width:200px) and (max-width:400px){
    .flip-box {
        left:6%;
        top: 36%;
        bottom:1%;
        width: 80%;
       height: 130px;
      }
      .form{
          height: 450px;
          width: 90%;
        left: 4%;
        top: 35%;
      }
      #altura, #peso{
        width: 83%;
      }
      #peso{
          bottom: 40%;
      }
      #alt{
          top: 16%;
          right: 75%;
      }
      #pes{
        right: 80%;
      }
      .botao{
          bottom: 17%;
          left: 20%;
      }
      .erro{
          top: 63%;
          right: 30%;
         
      }
      .erro-pes{
          top: 60%;
      }
      .rodape{
          bottom: -2%;
       
        width: 99%;
      }
    
    #return{
      top: 88%;
       left: 5%;
    }
}
@media screen and (max-height:700px)and (min-width:200px) and (max-width: 500px){
    .flip-box {
        left:6%;
        top: 36%;
        bottom:1%;
        width: 80%;
       min-height: 130px;
      }
      .form{
          height: auto;
          width: 89%;
        left: 0%;
        top: 35%;
      }
      .topo{
        padding-top: 5px;
      }
      #altura, #peso{
        width: 83%;
      }
      #peso{
          bottom: 40%;
      }
      #alt{
          top: 16%;
          right: 75%;
      }
      #pes{
        right: 80%;
      }
      .botao{
          bottom: 20%;
          left: 20%;
      }
      #status{
        padding:20px;
        height: auto;
      }
      .erro{
          top: 63%;
          right: 30%;
         
      }
      .erro-pes{
          top: 60%;
      }
      .rodape{
          bottom:-3;
          height:auto;
       padding-bottom: 15px;
        width: 99%;
      }
    
    #return{
      top: 95%;
       left: 1%;
       padding: 2px;
       margin: 15px;
    }
}