@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body {
  font-family: 'Roboto', sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: .5s;
  transition: .5s;
  background-color: aquamarine;
}

body #lightbulb {
  position: absolute;
  width: 5rem;
  top: 3%;
  right: 3%;
  cursor: pointer;
  -webkit-transition: .5s;
  transition: .5s;
}

body #lightbulb:active {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

body h1 {
  font-size: 4rem;
  margin: 1rem;
  padding: 0;
  -webkit-transition: .5s;
  transition: .5s;
}

body #calculator {
  background-color: gray;
  border: solid black 4px;
  border-radius: 1rem;
  width: 32%;
  height: 30rem;
}

body #calculator #calculatorDisplay {
  background-color: #FFF5A3;
  border: solid black 3px;
  height: 6rem;
  width: 80%;
  margin: 2rem auto;
  border-radius: .5rem;
  font-size: 3rem;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}

body #calculator #buttonsContainer {
  padding: 0 3rem 1rem 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

body #calculator #buttonsContainer #numbers {
  width: 18rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

body #calculator #buttonsContainer #operators {
  width: 12rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

body #calculator #buttonsContainer #operators div {
  height: 4.9rem;
}

body #calculator #buttonsContainer .btn {
  font-size: 2.75rem;
  background-color: lightgray;
  min-width: 3.5rem;
  height: 3.5rem;
  margin: .25rem;
  border: black solid;
  border-radius: .25rem;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

body #calculator #buttonsContainer .btn:active {
  border: black solid 2px;
  opacity: 75%;
}

.darkMode {
  background-color: #211e35;
}

.darkMode h1 {
  color: white;
}

@media screen and (max-width: 1300px) {
  body {
    overflow: hidden;
  }
  body #lightbulb {
    position: absolute;
    top: 4%;
    right: 9%;
    width: 3rem;
  }
  body h1 {
    font-size: 3rem;
    margin: .5rem .5rem 1rem -4rem;
  }
  body #calculator {
    width: 90%;
    height: 28rem;
  }
  body #calculator #calculatorDisplay {
    height: 4rem;
    margin: 1.5rem auto;
    font-size: 2.5rem;
  }
  body #calculator #buttonsContainer {
    padding: 0 1.5rem 1rem 1.5rem;
  }
  body #calculator #buttonsContainer #numbers {
    width: 25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  body #calculator #buttonsContainer #operators {
    width: 8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  body #calculator #buttonsContainer #operators div {
    height: 2.55rem;
  }
  body #calculator #buttonsContainer .btn {
    font-size: 2.5rem;
    min-width: 3.5rem;
    height: 4.25rem;
    margin: .1rem;
    border: black solid;
    border-radius: .25rem;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .darkMode {
    background-color: #211e35;
  }
  .darkMode h1 {
    color: white;
  }
}
/*# sourceMappingURL=styles.css.map */