/* Google Fonts */

.alan-sans-lite {
  font-family: "Alan Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 250;
  font-style: normal;
}

.alan-sans-regular {
  font-family: "Alan Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
}

.alan-sans-title {
  font-family: "Alan Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 750;
  font-style: normal;
}

.alan-sans-bold {
  font-family: "Alan Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
}

/* Theming */

:root {
  --bg: white;
  --fg: gainsboro;
  --text: black;
  --link: #008b8b;

  /* Stays same */
  --accent: #ffd700;
}
/* Globals */

html body {
  display: flex;
  flex-direction: column;

  min-height: 100vh;
  margin: 0;

  background: var(--bg);
  color: var(--text);
  transition:
    background-color 0.3s,
    color 0.3s;

  text-align: center;
  align-items: center;
  justify-content: center;
}

.main {
  flex: 1;
}

a {
  color: var(--link);
}

/* Dark/Light Toggle */
.checkbox-image input {
  display: none;
}

.checkbox-image img.dark {
  display: none;
}

.checkbox-image input:checked ~ img.light {
  display: none;
}

.checkbox-image input:checked ~ img.dark {
  display: inline;
}

/* Composter */
.composer {
  display: inline;

  justify-content: center;
  width: 30dvw;
}
.composer textarea {
  width: 30dvw;
  padding: 0.6rem;

  background: var(--fg);
  border: 1px solid #333;
  border-radius: 0.3rem;

  color: var(--text);
  font-size: 0.9rem;

  transition: all 0.2s ease;
}

.composer textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 6px #ffd70055;
}

.composer button {
  margin: 0.6rem;

  width: calc(30dvw + 0.6rem);
  height: 2rem;
}

/* List */

/* Topbar */
.topbar {
  display: flex;
  flex-direction: row;

  justify-content: center;
  align-items: center;
  text-align: center;
}

.topbar h1 {
  text-align: center;
}

.topbar .checkbox-image {
  display: flex;
  position: absolute;
  right: 2rem;
  justify-content: right;
}

/* Footer */
.footer {
  min-height: 2rem;

  margin-top: auto;

  align-items: center;
  text-align: center;
  justify-content: center;
}