@import 'config.css';

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--fundo-escuro) !important;

  h2 {
    color: var(--cor-branco);
  }

  #conversorTermometrico {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 20px 0 0 0;
    padding: 10px;
    border-radius: 10px;
    border: 2px var(--escuro-cinzaHover) solid;

    h3 {
      margin: 10px 0;
      color: var(--cor-branco);
    }

    div {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      margin: 15px 0;

      .cardTemperatura {
        display: flex;
        flex-direction: column;

        input {
          padding: 10px;
          font-size: 1.1rem;
          text-align: center;
          color: var(--cor-branco);
          background-color: var(--escuro-cinzaEscuro);
          border: 1px var(--escuro-cinzaClaro) solid;
          border-radius: 8px 8px 0 0;

          &:focus {
            outline: none;
          }
        }

        select {
          padding: 5px;
          font-size: 1.1rem;
          color: var(--cor-branco);
          background-color: var(--escuro-cinzaMedio);
          border: 1px var(--escuro-cinzaClaro) solid;
          border-radius: 0 0 8px 8px;

          &:focus {
            outline: none;
          }

          option {
            font-size: 0.9rem;
          }
        }
      }
    }

    .sectFormula {
      margin: 20px 0;
      display: flex;
      align-items: center;
      gap: 20px;

      span {
        padding: 7px;
        font-size: 1.1rem;
        color: var(--cor-branco);
        border-radius: 12px;
        background-color: var(--cor-laranjaClaro);
      }

      p {
        color: var(--cor-branco);
      }
    }

    .sectBotoes {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;
      margin: 10px 0;

      button {
        padding: 10px 20px;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--cor-branco);
        background-color: var(--cor-laranjaClaro);
        border-radius: 18px;
        transition: all 0.3s ease;

        &:hover {
          background-color: var(--cor-roxo);
          scale: 110%;
        }
      }
    }

    /* Tablet */
    @media (max-width: 1024px) {
      div {
        gap: 25px;

        .cardTemperatura {
          input,
          select {
            font-size: 1rem;
            padding: 8px;
          }
        }
      }

      .sectFormula {
        gap: 10px;

        span {
          font-size: 1rem;
        }
      }

      .sectBotoes {
        flex-direction: row;
        gap: 15px;

        button {
          width: auto;
          font-size: 1rem;
        }
      }
    }

    /* Mobile */
    @media (max-width: 767px) {
      padding: 5px;

      div {
        width: 350px;
        gap: 15px;

        .cardTemperatura {
          width: 160px;

          input,
          select {
            font-size: 1rem;
            padding: 6px;
            height: 40px;
          }
        }
      }

      .sectFormula {
        flex-direction: column;
        gap: 8px;

        span {
          font-size: 0.9rem;
          padding: 5px;
        }
      }

      .sectBotoes {
        margin: 6px 0;
        gap: 10px;

        button {
          width: 40%;
          font-size: 0.95rem;
          padding: 8px 15px;
        }
      }
    }
  }
}