@import url("https://fonts.googleapis.com/css?family=Space+Mono:400,400i,700,700i&display=swap");
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

:root {
  --blue: #193366;
  --retroblue: #336E99;
  --yellow: #E5BD4D;
  --green: #2E7A6D;
  --black: #242828;
  --gray: #C2C0BD;
  --white: #F6F4EE;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  font-variant-ligatures: none;
}

html {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
}

body {
  font-family: "Space Mono", monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

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

a:hover {
  color: var(--retroblue);
}

.screen {
  position: absolute;
  overflow: hidden;
  display: grid;
  width: 1920px;
  height: 1080px;
  padding: 1rem;
  background-color: var(--gray);
  color: var(--black);
  user-select: none;
}

.intro-layout {
  grid-template-columns: 100%;
  grid-template-rows: 680px 1fr 50px;
  grid-row-gap: 1rem;
  text-align: center;
}

  .intro-layout.nnr {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 50px;
    grid-row-gap: 1rem;
    text-align: center;
  }

  .intro-layout.nnr .footer {
    grid-column: span 2;
  }

  .intro-layout .nnr-intro-logo {
    height: auto;
    width: 900px;
    margin: 0 auto;
  }

  .intro-layout #nullsprite-facts {
    display: block;
    width: 90%;
    margin: 0 auto;
  }

  .intro-layout #nullsprite-facts:after {
    content: '_';
    font-weight: 700;
    color: #fff6e5;
    animation: "cursor" 0.66s linear;
    animation-iteration-count: infinite;
    position: relative;
  }

  .intro-layout .skull-holder,
  .intro-layout .footer {
    margin: 0 auto;
    display: flex;
    align-items: center;
  }

  .intro-layout .footer * {
    margin-bottom: 0;
    font-size: 1rem;
  }

[data-screen-color="blue"] {
  background-color: var(--blue);
  color: var(--white);
}

[data-screen-color="retroblue"] {
  background-color: var(--retroblue);
  color: var(--white);
}

[data-screen-color="yellow"]{
  background-color: var(--yellow);
  color: var(--black);
}

[data-screen-color="green"] {
  background-color: var(--green);
  color: var(--white);
}

[data-screen-color="black"] {
  background-color: var(--black);
  color: var(--white);
}

[data-screen-color="gray"] {
  background-color: var(--gray);
  color: var(--black);
}

[data-screen-color="2024"] {
  background-color: #2c2a26;
  color: #fff6e5;
}

[data-screen-color="nnr"] {
  background: radial-gradient(#633777, #2c0830);
  background-size: cover;
  color: var(--white);
  font-family: "DM Mono", monospace;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
}

.skull-holder svg {
  width: 400px;
}


.primary-title {
  font-size: 3.33rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.secondary-title {
  font-size: 2rem;
  font-weight: 400;
}

.tertiary-title {
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
}

.text {
  font-size: 1.2rem;
}

.muted-text {
  opacity: 0.66;
}

.text-shadow {
  text-shadow: 0.33em 0.33em 0 rgba(0, 0, 0, 0.2);
}

.index-body {
  display: block;
  background-color: var(--white);
}


.index-page {
  width: 96%;
  max-width: 720px;
  margin: 2rem auto;
  color: var(--black);
}

  .index-page header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
  }

  .index-page header svg {
    width: 400px;
  }


.stream-layout {
  grid-template-columns: 260px 1fr;
  grid-column-gap: 1rem;
  text-shadow: none;
}

  .stream-layout .sidebar {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 0.5fr 1fr 1.75fr 0.75fr;
    grid-row-gap: 1rem;
  }

    .stream-layout .sidebar > * {
      position: relative;
      background-color: #3c3934;
      color: #fff6e5;
      border-radius: 0.25rem;
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.05);
      padding: 0.66rem;
    }

    .stream-layout .sidebar .events {
      
    }


  .stream-layout .game-video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    border-radius: 0.25rem;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.05);
  }

    .stream-layout .game-video .placeholder {
      background-color: magenta;
      transition: all 0.3s linear;
    }

    /* Height is 1040. Width is 1600. */

    .placeholder[data-screen-size="4-3"] {
      display: flex;
      height: 100%;
      width: calc(1040px / 3 * 4);
    }

    .placeholder[data-screen-size="16-9"] {
      display: flex;
      width: 100%;
      height: 900px;
    }

    .placeholder[data-screen-size="gameboy"] {
      display: flex;
      height: 100%;
      width: calc(1040px / 9 * 10);
    }

  .stream-layout .card-header {
    font-size: 1rem;
    font-style: italic;
    margin: 0;
    color: inherit;
    text-align: center;
    font-weight: 400;
  }

  .stream-layout .logo {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .stream-layout .stream-logo {
    display: flex;
    align-items: center;
  }

    .stream-layout .stream-logo .logo-title {
      font-weight: 700;
      font-size: 1.25rem;
      margin: 0 0 0 0.66rem;
    }

    .stream-layout .stream-logo svg {
      width: 64px;
      height: 64px;
      border-radius: 100px;
      background-color: #f5aa59;
      color: #2c2a26;
    }

.stream-program {
  text-align: left !important;
  display: grid;
  align-content: center;
}

  .stream-program section:not(:last-child) {
    margin-bottom: 4.5rem;
  }

  .stream-program h2 {
    font-size: 2.33rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }

  .stream-program ul {
    list-style-type: none;
    padding-left: 1rem;
    margin: 0 0 1rem;
  }

  .stream-program li {
    padding-left: 1rem;
    margin: 0.33rem 0;
    font-size: 1.5rem;
    position: relative;
  }

  .stream-program li:before {
    content: "➽";
    display: block;
    position: absolute;
    margin-left: -2rem;
  }

  .skull-holder svg {
    height: 512px;
    width: 512px;
    border-radius: 512px;
    background-color: #f5aa59;
    color: #2c2a26;
  }

body.guides .horizontal-guide {
  width: 1px;
  height: calc(100% + 20px);
  background-color: magenta;
  position: absolute;
  left: 50%;
  top: -10px;
}


body.guides .vertical-guide {
  height: 1px;
  width: calc(100% + 20px);
  background-color: magenta;
  position: absolute;
  top: 50%;
  left: -10px;
}

@keyframes cursor {
  0% {
    opacity: 1;
  } 
  
  49% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes cursor {
  0% {
    opacity: 1;
  } 
  
  49% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}