@import url('config.css');

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

  #calculadoraBasica {
    margin: 20px;
    width: 300px;
    background-color: var(--escuro-cinzaEscuro);
    border-radius: 10px;
    border: 2px var(--escuro-cinzaHover) solid;
    overflow: hidden;

    .resultado {
      height: 75px;
      width: 100%;
      padding: 20px;
      text-align: right;
      color: var(--cor-branco);
      font-size: 1.9rem;
    }

    .botoes {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 3px;

      button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        color: var(--cor-branco);
        font-size: 1.5rem;
        font-weight: bold;
        border: none;
        outline: none;
        cursor: pointer;

        &.btn-cinza {
          background-color: var(--escuro-cinzaMedio);
          transition: all 0.7s ease;

          &:hover {
            background-color: var(--escuro-cinzaHover);
          }
        }

        &.btn-cinzaC {
          background-color: var(--escuro-cinzaClaro);
          transition: all 0.7s ease;

          &:hover {
            background-color: var(--escuro-cinzaHover);
          }
        }

        &.btn-operador {
          background-color: var(--cor-laranjaClaro);
          transition: all 0.7s ease;

          &:hover {
            background-color: var(--cor-laranjaEscuro);
          }
        }
      }
    }
  }
}