html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Merriweather', serif;
}

button {
  position: absolute;
  right: 1rem;
  top: 1rem;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
}

div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: background .2s, color .2s;
  font-size: 2.5rem;
}

div.light {
  color: #171d33;
  background: #afbfdf;
}

div.dark {
  color: #e0e6f1;
  background: #252c47;
//  background: linear-gradient(45deg, rgba(37,44,71,1) 0%, rgba(73,88,119,1) 100%);
}

#moon {
  color: #252c47;
  width: 2em;
}

#sun {
  color: #e0e6f1;
  width: 2em;
}

#logo {
  height: 3em;
  margin-bottom: 1em;
}

@media (prefers-color-scheme: light) {
  #moon {
    display: inline-block;
  }

  #moon.hide {
    display: none;
  }

  #sun {
    display: none;
  }

  #sun.show {
    display: inline-block
  }
}

@media (prefers-color-scheme: dark) {
  div {
    color: #e0e6f1;
    background: #252c47;
//    background: linear-gradient(45deg, rgba(37,44,71,1) 0%, rgba(73,88,119,1) 100%);
  }

  #sun {
    display: inline-block;
  }

  #sun.hide {
    display: none;
  }

  #moon {
    display: none;
  }

  #moon.show {
    display: inline-block;
  }
}