/* The Source

   "For the Source abandons no man." - Gemmell
   (C) 2024                           */

/* Fonts */
@font-face {
  font-family: "IBM Plex Sans Bold";
  src: url("../fonts/IBMPlexSans-Bold.woff");
  font-weight: bold;
  font-style: normal;
}

/* Palette */
:root {
  --base03:#002b36;
  --base02:#073642;
  --base01:#586e75;
  --base00:#657b83;
  --base0:#839496;
  --base1:#93a1a1;
  --base2:#eee8d5;
  --base3:#fdf6e3;
  --yellow:#b58900;
  --orange:#cb4b16;
  --red:#dc322f;
  --magenta:#d33682;
  --violet:#6c71c4;
  --blue:#268bd2;
  --cyan:#2aa198;
  --green:#859900;
  --bg: #f7f9fb;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--base03);
  color: var(--base0);  
}

.divider {
  border-color: var(--base1);
  background-color: var(--base1);
}

#play {
  background: linear-gradient(to bottom, #d33682 0%, #b42e6f 100%);
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
  font-family: IBM Plex Sans Bold, Verdana, Serif;
  font-size: 1em;
}

#viewport {
  width: 100%;
  height: 100%;  
  border: none;
}

@media (min-width: 1024px) and (min-height: 768px) {
  #viewport {
      width: 1024px;
      height: 768px;
      border: 1px solid var(--base1)
  }
}