* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans", Helvetica, sans-serif;
  font-size: 1rem;
  justify-content: center;
  min-height: 100vh;
  min-width: 100vw;
  padding: 30px;
}
body h1, body h2, body h3 {
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 600;
}
body p, body ul {
  letter-spacing: -0.2px;
}
body.day {
  background-color: #fff;
  color: #222;
  transition: 0.5s;
}
body.day a {
  color: #3f51b5;
}
body.day a:hover {
  color: #252f69;
}
body.day a:active {
  color: #0a0d1e;
}
body.day a:focus {
  outline-color: #abb4e2;
}
body.night {
  background-color: #222;
  color: #fff;
  transition: 0.5s;
}
body.night a {
  color: #9fa8da;
}
body.night a:hover {
  color: #d6daef;
}
body.night a:active {
  color: white;
}
body.night a:focus {
  outline-color: #3e4da2;
}

main {
  max-width: 320px;
}

#theme-toggle {
  display: flex;
  line-height: 20px;
  position: absolute;
  right: 20px;
  top: 20px;
}
#theme-toggle span {
  font-size: 0.8rem;
  height: 0.8rem;
  width: 0.8rem;
}
#theme-toggle input[type=checkbox] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
#theme-toggle .toggle {
  border-radius: 999px;
  box-shadow: inset 0 0 5px rgba(34, 34, 34, 0.25);
  height: 20px;
  margin: 0 8px;
  position: relative;
  width: 35px;
}
#theme-toggle .toggle:focus, #theme-toggle .toggle.focus {
  outline: none;
}
body.day #theme-toggle .toggle {
  background-color: #606fc7;
}
body.day #theme-toggle .toggle:focus, body.day #theme-toggle .toggle.focus {
  box-shadow: 0px 0px 0px 2px #abb4e2;
}
body.night #theme-toggle .toggle {
  background-color: #7a87cc;
}
body.night #theme-toggle .toggle:focus, body.night #theme-toggle .toggle.focus {
  box-shadow: 0px 0px 0px 2px #3e4da2;
}
#theme-toggle .ball {
  background-color: #fff;
  border-radius: 999px;
  box-shadow: 0 0 3px rgba(34, 34, 34, 0.25);
  height: 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
}
body.day #theme-toggle .ball {
  left: 4px;
  right: auto;
}
body.night #theme-toggle .ball {
  left: auto;
  right: 4px;
}

/*# sourceMappingURL=style.css.map */