*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;

  --dark: #292C35;
  --light: #F1F1F1;
  --label: #111;
  --font: 'Raleway', sans-serif;
  --font-mono: 'Fira Mono', monospace;
  --transition-timing: 200ms;
}

@keyframes spin {
  100% {
    transform: rotate(360deg)
  }
}

body {
  background: var(--dark);
  color: var(--light);
  font-family: var(--font);
  padding: 5vh 2.5vw;
}

.open-transition {
  animation: openTransition 700ms ease-in-out;
}

@keyframes openTransition {
  0% {
    opacity: 0;
    transform: translateY(-30%);
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

.logoT3L {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =========== LIGHT-MODE STYLING =========== */
.theme-switcher {
  transition: all var(--transition-timing) ease-in-out;
}

.light-mode {
  color: var(--dark);
  background: var(--light);
}

/* === LIGHT-MODE STYLING === */

h1 {
  font-size: min(14vw, 4.5rem);
  text-align: center;
  font-weight: lighter;
  text-transform: uppercase;
}

/* =========== BUTTON-TOGGLE STYLING =========== */
.btn-toggle {
  position: relative;
  display: flex;
  margin: 15vh auto;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;

  --btn-toggle--width: 15em;
  /* change the toggle button size in here */
  width: var(--btn-toggle--width);

  --btn-toggle--height: calc(var(--btn-toggle--width) * .4);
  height: var(--btn-toggle--height);

  border: 0;
  border-radius: 1.5em;
  background: var(--label);
  padding: calc(var(--btn-toggle--height) * .6) calc(var(--btn-toggle--width) * .07);
}

.btn-toggle .btn-toggle--switch {
  height: calc(var(--btn-toggle--height) - 10%);
  width: calc(var(--btn-toggle--width) - 60%);
  border-radius: 1.5em;
  background: var(--light);
  position: absolute;
  transition: transform var(--transition-timing) ease-in-out;
}

.btn-toggle .btn-toggle--switch[class*="move-switch"] {
  transform: translateX(115%);
}

.btn-toggle .btn-toggle--icon {
  height: calc(var(--btn-toggle--height) * .7);
}