@font-face {
  font-family: 'cerealbold';
  src: url('../Fontes/AirbnbCerealBold.ttf');
}
@font-face {
  font-family: 'cereallight';
  src: url('../Fontes/AirbnbCerealLight.ttf');
}

html, body {
      min-height: 100vh;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
    }
    body {
      font-family: 'cerealbold';
      flex: 1;
    }
    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .titulo {
    background: black;
    justify-content: center;
    display: flex;
    text-align: center;
    color: white;
    width: 100%;
    font-size: 25px;
    }
    .Flex {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .sub-titulo{
      font-size: 25px;
      margin-top: 10px;
    }

    .botao {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      gap: 20px;
      border: none;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input[type="text"],
    input[type="number"] {
      width: 30%;
      padding: 15px;
      box-sizing: border-box;
      border-radius: 20px;
      border: solid 1px;
    }

    .combustivel-opcoes {
      display: flex;
      gap: 15px;
      margin-top: 5px;
    }
    .combustivel-opcoes input{
      cursor: pointer;
    }
    .combustivel-opcoes img{
      width: 25px;
      height: auto;
    }
  

    .combustivel-opcoes label {
      display: flex;
      align-items: center;
      gap: 5px;
      margin: 0;
      cursor: pointer;
    }
    #btn_calcular {
      background-color: rgb(45, 45, 223);
      color: white;
      border-radius: 10px;
      width: 100px;
      height: 50px;
      cursor: pointer;
      border: none;
      font-family: 'cerealbold';
      font-size: 15px;
      transition: all 0.2s ease;
    }
    #btn_limpar {
      background-color: rgb(45, 45, 223);
      color: white;
      border-radius: 10px;
      width: 100px;
      height: 50px;
      cursor: pointer;
      border-color: none;
      border: none;
      font-family: 'cerealbold';
      font-size: 15px;
      transition: all 0.2s ease;
      
    }
    #btn_limpar:hover{
      background-color: rgb(15, 15, 158);
      width: 101px;
      height: 50px;
      transform: scale(1.05);
    }
    #btn_calcular:hover{
      background-color: rgb(15, 15, 158);
      width: 101px;
      height: 50px;
      transform: scale(1.05);
    }
    .resultado{
      display: flex;
      justify-content: center;
      font-size: 20px;
    }
    .footer{
      display: flex;
      font-family: 'cereallight';
      color: grey;
      font-size: 18px;
      width: 100%;
      align-items: center;
      justify-content: center;
      margin-top: auto;
      gap: 20px;
    }
    .footer img{
      width: 25px;
      height: auto;
    }
    .footer-icon{
      display: flex;
      gap: 20px;

    }
@media (max-width: 768px){
    .titulo {
    background-color: black;
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    color: white;
    width: 100%;
    font-size: 18px;
    }
    .sub-titulo{
      font-size: 18px;
      margin-top: 10px;
    }
    input[type="text"],
    input[type="number"] {
      width: 50%;
      padding: 15px;
      box-sizing: border-box;
      border-radius: 20px;
      border: solid 1px;
    }

    .footer{
      display: flex;
      flex-direction: column;
      font-family: 'cereallight';
      color: grey;
      font-size: 12px;
      width: 100%;
      align-items: center;
      justify-content: center;
      margin-top: auto;
      gap: 10px;
    }
    .footer p{
      order: 2;
    }
    .footer img{
      order: 1;
    }
    .footer img{
      width: 25px;
      height: auto;
    }
    .footer-icon{
      display: flex;
      gap: 10px;
    }  
}