:root {
  /* Color Pallete */
  --background-primary: rgba(20, 20, 20, 0.7);
  --background-secondary: rgba(220, 220, 220, 0.7);
  --button-primary: rgba(225, 225, 225, 0.5);
  --button-secondary: rgba(50, 50, 50, 0.5);
  --text-primary: rgb(235, 235, 235);
  --text-secondary: rgb(180, 180, 180);
  --text-tertiary: rgb(40, 40, 40);

  /* Font Sizing */
  --large-font: 5em;
  --medium-font: 2.5em;
  --small-font: 1em;

  /* Margin/Padding Sizing */
  --large-space: 100px;
  --medium-space: 50px;
  --small-space: 25px;
  --tiny-space: 15px;
  --mini-space: 10px;

  /* Animation/Transition Timing */
  --long-time: 3s;
  --medium-time: 2s;
  --short-time: 1s;

  /* Transitions */
  --custom-fade: opacity var(--fade-time) ease-out;
  --slow-fade: opacity var(--long-time) ease-out;
  --medium-fade: opacity var(--medium-time) ease-out;
  --fast-fade: opacity var(--short-time) ease-out;

  --custom-drop: top var(--drop-time) ease-out;
  --slow-drop: top var(--long-time) ease-out;
  --medium-drop: top var(--medium-time) ease-out;
  --fast-drop: top var(--short-time) ease-out;

  --custom-zoom: transform var(--zoom-time) ease-out;
  --slow-zoom: transform var(--long-time) ease-out;
  --medium-zoom: transform var(--medium-time) ease-out;
  --fast-zoom: transform var(--short-time) ease-out;

  /* Borders */
  --border: 2px solid rgb(50, 50, 50);
  --border-radius: 15px;
}

* {
  box-sizing: inherit;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  border: none;
  color: white;
}

html,
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
}

#banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: black;
  font-size: 2rem;
}

.slide {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  z-index: 0;
  top: -100px;
  transform: scale(0.95);
}

.slide.active {
  display: block;
  z-index: 1;
  opacity: 1;
  top: 0;
  transform: scale(1);
}

.slide.unloading {
  display: block;
  top: 0;
  transform: scale(1);
}

.slide.fade {
  transition: var(--fast-fade);
}

.slide.fadeDrop {
  transition: var(--fast-fade), var(--medium-drop);
}

.slide.fadeZoom {
  transition: var(--fast-fade), var(--fast-zoom);
}