/* ==========================================================================
   Fonts & Variables

   NOTE: Roboto Mono downloaded as ttf from Google Fonts and converted to 
         woff2 and woff using cloudconvert.com
   ========================================================================== */

   @font-face {
    font-family: 'Roboto Mono';
    src: url('/_assets/fonts/RobotoMono-VariableFont_wght.woff2') format('woff2'),
         url('/_assets/fonts/RobotoMono-VariableFont_wght.woff') format('woff');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
      font-family: 'Roboto Mono';
      src: url('/_assets/fonts/RobotoMono-Italic-VariableFont_wght.woff2') format('woff2'),
          url('/_assets/fonts/RobotoMono-Italic-VariableFont_wght.woff') format('woff');
      font-weight: 100 700;
      font-style: italic;
      font-display: swap;
  }

:root { 
    --ff-brand: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ff: 'Roboto Mono', monospace;
    
    /* Core Colors */
    --color0: #111111; /* h1, h2, h3, h4, h5 */
    --color0Alpha: #111111bb;  /* p, ol li, ul li */
    --color0Alpha2: #11111111; /* Table rows even */
    --color1: #ffffff;
    --color1Alpha: #ffffffbb; /* Header p */
    --color1Alpha2: #ffffffbb; /* Header p */    
    --color2: #D8FF17;
    --color21: #fcffea; /* Not used */
    --color22: #323232; /* Not used */
    --color3: #3DCC27;
    --color4: #6F00B3;
    --color41: #e1fdbb; /* Not used */
    --color8: #f2f2f2;
    --color81: #323232; /* Not used */
    --color82: #d2d2d2; /* Not used */
    --color83: #d0d0d0; /* Not used */    
    --color84: #e0e0e0; /* Not used */
    --accent1: #065799;
    --accent1c: #B88E4D;
    --accent1cAlpha: #b88d4d40; /* Card hover */
    --accent2: #118338;
    --accent2Alpha: #11833840; /* background webforms */
    --accent2c: #B8514D; /* alert boxes */
    --accent2cAlpha: #B8514D40; /* Not used */
}

body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: var(--ff);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

header {
  padding: 1rem;
}

main {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

h1 {
  font-size: 2rem;
  font-weight: 300;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

p {
  max-width: 800px;
  margin: 1rem auto;
  padding: 0 1rem;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 200;
  color: #ccc;
}
p strong {
  font-weight: 400;
}
a {
  color: var(--accent2);
  text-decoration: underline;
  font-weight: 400;
  letter-spacing: 1px;
}

a:hover {
  text-decoration: none;
  color: var(--color11);
}

.video-wrapper {
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 1rem;
}