* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: -ms-grid;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: "Spartan", sans-serif;
}

.container {
  display: -ms-grid;
  display: grid;
  place-items: center;
}

ul {
  list-style-type: none;
}

.key, .screen {
  font-size: 2rem;
}

.theme1 {
  background-color: #3a4764;
}
.theme1 .theme-toggler {
  background-color: #232c43;
}
.theme1 h1, .theme1 .theme-switcher > span, .theme1 .theme-number {
  color: white;
}
.theme1 .toggler1 {
  background-color: #d03f2f;
}
.theme1 .screen {
  background-color: #182034;
  color: white;
}
.theme1 .keypad {
  background-color: #232c43;
  color: #444b5a;
}
.theme1 .keypad .key {
  background-color: #eae3dc;
  color: #444b5a;
  -webkit-box-shadow: 0 3px #b4a597;
          box-shadow: 0 3px #b4a597;
}
.theme1 .keypad .key.equal {
  background-color: #d03f2f;
  color: white;
  -webkit-box-shadow: 0 3px #93261a;
          box-shadow: 0 3px #93261a;
}
.theme1 .keypad .key.delete, .theme1 .keypad .key.reset {
  background-color: #637097;
  color: white;
  -webkit-box-shadow: 0 3px #404e72;
          box-shadow: 0 3px #404e72;
}
.theme1 .attribution {
  color: #eae3dc;
}
.theme1 .attribution a {
  color: #d03f2f;
}
.theme1 .attribution a:hover {
  color: #d03f2fb3;
}

.theme2 {
  background-color: #e6e6e6;
}
.theme2 .theme-toggler {
  background-color: #d1cccc;
}
.theme2 h1, .theme2 .theme-switcher > span, .theme2 .theme-number {
  color: #35352c;
}
.theme2 .toggler2 {
  background-color: #ca5502;
}
.theme2 .screen {
  background-color: #ededed;
  color: #35352c;
}
.theme2 .keypad {
  background-color: #d1cccc;
  color: #35352c;
}
.theme2 .keypad .key {
  background-color: #e5e4e1;
  color: #35352c;
  -webkit-box-shadow: 0 3px #a69d91;
          box-shadow: 0 3px #a69d91;
}
.theme2 .keypad .key.equal {
  background-color: #ca5502;
  color: white;
  -webkit-box-shadow: 0 3px #893901;
          box-shadow: 0 3px #893901;
}
.theme2 .keypad .key.delete, .theme2 .keypad .key.reset {
  background-color: #377f86;
  color: white;
  -webkit-box-shadow: 0 3px #1b5f65;
          box-shadow: 0 3px #1b5f65;
}
.theme2 .attribution {
  color: #377f86;
}
.theme2 .attribution a {
  color: #ca5502;
}
.theme2 .attribution a:hover {
  color: #893901;
}

.theme3 {
  background-color: #160628;
}
.theme3 .theme-toggler {
  background-color: #1d0934;
}
.theme3 h1, .theme3 .theme-switcher > span, .theme3 .theme-number {
  color: #ffe53d;
}
.theme3 .toggler3 {
  background-color: #00e0d1;
}
.theme3 .screen {
  background-color: #1d0934;
  color: #ffe53d;
}
.theme3 .keypad {
  background-color: #1d0934;
  color: #ffe53d;
}
.theme3 .keypad .key {
  background-color: #341c4f;
  color: #ffe53d;
  -webkit-box-shadow: 0 3px #871c9c;
          box-shadow: 0 3px #871c9c;
}
.theme3 .keypad .key.equal {
  background-color: #00e0d1;
  color: #1b2428;
  -webkit-box-shadow: 0 3px #6cf9f2;
          box-shadow: 0 3px #6cf9f2;
}
.theme3 .keypad .key.delete, .theme3 .keypad .key.reset {
  background-color: #58077d;
  color: white;
  -webkit-box-shadow: 0 3px #bc15f4;
          box-shadow: 0 3px #bc15f4;
}
.theme3 .attribution {
  color: #58077d;
}
.theme3 .attribution a {
  color: #00e0d1;
}
.theme3 .attribution a:hover {
  color: #6cf9f2;
}

.calculator {
  width: 430px;
  min-height: 72vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* h1 and theme switcher */
  /* Screen */
  /* Keypad */
}
.calculator .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.calculator .top h1 {
  font-size: 1.2rem;
}
.calculator .top .theme-switcher {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.calculator .top .theme-switcher > span {
  font-size: 0.8rem;
  margin-right: 1.2em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.calculator .top .theme-switcher .switcher {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.calculator .top .theme-switcher .switcher .theme-number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  justify-content: space-around;
  font-size: 0.8rem;
  margin-bottom: 0.2em;
}
.calculator .top .theme-switcher .switcher .theme-toggler {
  width: 52px;
  height: 16px;
  padding: 4px 3px;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.calculator .top .theme-switcher .switcher .theme-toggler .toggler {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  cursor: pointer;
}
.calculator .screen {
  width: 100%;
  height: 12vh;
  padding: 0.8em;
  border-radius: 6px;
  overflow: hidden;
  text-align: end;
}
.calculator .keypad {
  width: 100%;
  height: 50vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.3em 1fr 1.3em 1fr 1.3em 1fr;
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: 1fr 1.3em 1fr 1.3em 1fr 1.3em 1fr 1.3em 1fr;
  grid-template-rows: repeat(5, 1fr);
  gap: 1.3em;
  padding: 1.3em;
  border-radius: 6px;
}
.calculator .keypad > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.calculator .keypad > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.calculator .keypad > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}
.calculator .keypad > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}
.calculator .keypad > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}
.calculator .keypad > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}
.calculator .keypad > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}
.calculator .keypad > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}
.calculator .keypad > *:nth-child(9) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}
.calculator .keypad > *:nth-child(10) {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
}
.calculator .keypad > *:nth-child(11) {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
}
.calculator .keypad > *:nth-child(12) {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
}
.calculator .keypad > *:nth-child(13) {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}
.calculator .keypad > *:nth-child(14) {
  -ms-grid-row: 7;
  -ms-grid-column: 3;
}
.calculator .keypad > *:nth-child(15) {
  -ms-grid-row: 7;
  -ms-grid-column: 5;
}
.calculator .keypad > *:nth-child(16) {
  -ms-grid-row: 7;
  -ms-grid-column: 7;
}
.calculator .keypad > *:nth-child(17) {
  -ms-grid-row: 9;
  -ms-grid-column: 1;
}
.calculator .keypad > *:nth-child(18) {
  -ms-grid-row: 9;
  -ms-grid-column: 3;
}
.calculator .keypad > *:nth-child(19) {
  -ms-grid-row: 9;
  -ms-grid-column: 5;
}
.calculator .keypad > *:nth-child(20) {
  -ms-grid-row: 9;
  -ms-grid-column: 7;
}
.calculator .keypad .key {
  display: -ms-grid;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 6px;
  padding-top: 6px;
  overflow: hidden;
  border: none;
  font-weight: 700;
  cursor: pointer;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.calculator .keypad .key:hover {
  opacity: 0.8;
}
.calculator .keypad .key.delete {
  font-size: 1.3rem;
}
.calculator .keypad .key.reset {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
  font-size: 1rem;
}
.calculator .keypad .key.equal {
  -ms-grid-column: 3;
  -ms-grid-column-span: 2;
  grid-column: 3/5;
  font-size: 1rem;
}

.attribution {
  margin-top: 1rem;
  font-size: 0.8rem;
  text-align: center;
  letter-spacing: 0.8px;
}
.attribution a {
  text-decoration: none;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

@media (max-width: 475px) {
  .calculator {
    width: 95%;
    min-height: 78vh;
  }
  .calculator .top h1 {
    font-size: 2rem;
  }
  .calculator .keypad {
    height: 54vh;
    padding: 1.6em;
    gap: 1em;
  }
}