/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* C O L O R   P A L E T T E
// https://coolors.co/2b3441-306182-a6aaa9-302e2f-c76734-f4dcb0
//////////////////////////////////////////////////////////////////////////////*/
:root {
    --gunmetal: #2b3441ff;
    --gunmetal-lighter: #394556ff;
    --blue-sapphire: #306182ff;
    --silver-chalice: #a6aaa9ff;
    --silver-chalice-lighter4: #d5d7d7ff;
    --jet: #302e2fff;
    --chocolate-web: #c76734ff;
    --chocolate-web-darker4: #924c26ff;
    --burnt-orange: #C06230;
    --burnt-orange-lighter4: #d9a082;
    --wheat: #f4dcb0ff;
    --shimmering-blush: #CE8D91ff;
    --light-gray: #D5D7D7;
    --battleship-grey: #828787;
    
    --background-main: var(--gunmetal);
    --text-main: var(--silver-chalice-lighter4);
    --text-link: var(--burnt-orange-lighter4);
    --text-link-visited: var(--burnt-orange);
    --text-link-hover: var(--shimmering-blush);
    --text-faint-from-background-main: var(--gunmetal-lighter);
    --border: var(--silver-chalice);
    --separator: var(--battleship-grey);
    --title-bar-background: var(--gunmetal-lighter);
    --status-bar-background: var(--gunmetal-lighter);
  }
  /* END COLOR PALETTE */
  
  
  /* F O N T S
  // pixeloperator: https://notabug.org/HarvettFox96/ttf-pixeloperator
  //////////////////////////////////////////////////////////////////////////////*/
  @font-face {
    font-family: 'pixeloperator';
    src: url('../fonts/pixeloperator-webfont.woff') format('woff');
  }
  @font-face {
    font-family: 'pixeloperator-bold';
    src: url('../fonts/pixeloperator-bold-webfont.woff') format('woff');
  }
  /* END FONTS */
  
  
  /* M A I N   C O M P O N E N T S
  //////////////////////////////////////////////////////////////////////////////*/
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-family: 'pixeloperator';
    font-size: 1.5em;
  }
  
  body {
    min-height: 90vh;
  
    padding-top: 1.5rem;
    padding-right: 0.3rem;
    padding-left: 0.3rem;
    padding-bottom: 1.5rem;
  
    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
  
    color: var(--text-main);
    background-color: var(--background-main);
  }
  
  header {
    padding: 0 1.5rem 1.5rem;
  }
  
  main {
    padding: 1em;
  }
  
  footer {
    color: var(--text-faint-from-background-main);
  }
  
  nav {
    margin: 1rem;
    /* margin-bottom: 1rem; */
    text-align: center;
  }
  
  h1 {
    font-family: 'pixeloperator-bold';
    text-transform: uppercase;
    text-align: center;
  }
  
  p {
    /* margin: 1em; */
  }
  
  a:link {
    color: var(--text-link);
  }
  
  a:visited {
    color: var(--text-link-visited);
  }
  
  a:hover {
    color: var(--text-link-hover);
  }
  
  hr {
    border: none;
    height: 0.05rem;
    color: var(--separator);
    background-color: var(--separator);
  }
  
  dd {
    padding-left: 3ch;
  }
  
  li {
    margin-left: 3ch;
  }
  
  button, input, select, option {
    font-family: inherit;
    font-size: inherit;
  }
  
  button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance:none;
    opacity: 1;
  }
  
  table, tr, th, td, caption {
    border: 1px solid var(--silver-chalicel-lighter4);
    border-collapse: collapse;
    padding: 0.5rem;
  }
  
  img {
    width: 100%;
    height: auto;
  }

  pre {
    font-size: 0.6rem;
  }
  /* END MAIN COMPONENTS _______________________________________________________*/
  
  
  /* F O R M A T T I N G
  //////////////////////////////////////////////////////////////////////////////*/
  
  .centered {
    text-align: center;
  }
  
  .justify-left {
    text-align: left; 
  }

  .justify-right {
    text-align: right;
  }
  
  .pre-break {
    margin-top: 1em;
  }
  
  div.nav-inline {
    display: inline-grid;
    grid-template-columns: 1fr 2ch 1fr 2ch 1fr;
  }

  /* END MAIN FORMATTING _______________________________________________________*/
  
  /* W I N D O W   E F F E C T
  //////////////////////////////////////////////////////////////////////////////*/
  
  
  .window {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  
    margin: 0 auto 2rem;
  
    max-width: 80ch;
    min-height: 16em;
  
    border: 0.15rem outset var(--border);
  }
  
  .title-bar {
    border-bottom: 0.15rem solid var(--border);
    padding-right: 0.3rem;
  
    /* align-self: start; */
  
    background-color: var(--title-bar-background);
  
    text-align: right;
  }
  
  .status-bar {
    border-top: 0.15rem solid var(--border);
    padding: 0.15rem;
  
    /* align-self: self-end; */
  
    background-color: var(--status-bar-background);
    /* font-size: 0.75em; */
  }
  
  .picture-frame {
    border: 0.15rem solid var(--border);
  }
  /* END WINDOW EFFECT _________________________________________________________*/
  
  
  /* C R T   E F F E C T
  // http://aleclownes.com/2017/02/01/crt-display.html
  //////////////////////////////////////////////////////////////////////////////*/
  @keyframes flicker {
    0% {
      opacity: 0.27861;
    }
    5% {
      opacity: 0.34769;
    }
    10% {
      opacity: 0.23604;
    }
    15% {
      opacity: 0.40626;
    }
    20% {
      opacity: 0.18128;
    }
    25% {
      opacity: 0.43891;
    }
    30% {
      opacity: 0.35583;
    }
    35% {
      opacity: 0.37807;
    }
    40% {
      opacity: 0.26559;
    }
    45% {
      opacity: 0.44693;
    }
    50% {
      opacity: 0.56019;
    }
    55% {
      opacity: 0.08594;
    }
    60% {
      opacity: 0.20313;
    }
    65% {
      opacity: 0.41988;
    }
    70% {
      opacity: 0.53455;
    }
    75% {
      opacity: 0.37288;
    }
    80% {
      opacity: 0.41428;
    }
    85% {
      opacity: 0.40419;
    }
    90% {
      opacity: 0.4003;
    }
    95% {
      opacity: 0.36108;
    }
    100% {
      opacity: 0.24387;
    }
  }
  @keyframes textShadow {
    0% {
      text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    5% {
      text-shadow: 1.7928974010788217px 0 1px rgba(0,30,255,0.5), -1.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    10% {
      text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    15% {
      text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    20% {
      text-shadow: 2.4794037899852017px 0 1px rgba(0,30,255,0.5), -2.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    25% {
      text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    30% {
      text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    35% {
      text-shadow: 2.896914047650351px 0 1px rgba(0,30,255,0.5), -2.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    40% {
      text-shadow: 2.870905614848819px 0 1px rgba(0,30,255,0.5), -2.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    45% {
      text-shadow: 1.231056963361899px 0 1px rgba(0,30,255,0.5), -1.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    50% {
      text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    55% {
      text-shadow: 1.3758461067427543px 0 1px rgba(0,30,255,0.5), -1.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    60% {
      text-shadow: 1.202193051050636px 0 1px rgba(0,30,255,0.5), -1.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    65% {
      text-shadow: 1.8638780614874975px 0 1px rgba(0,30,255,0.5), -1.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    70% {
      text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    75% {
      text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    80% {
      text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    85% {
      text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    90% {
      text-shadow: 2.443339761481782px 0 1px rgba(0,30,255,0.5), -2.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    95% {
      text-shadow: 1.1841838852799786px 0 1px rgba(0,30,255,0.5), -1.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
    100% {
      text-shadow: 1.6208764473832513px 0 1px rgba(0,30,255,0.5), -1.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 0.5px;
    }
  }
  .crt::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker 0.2s infinite;
  }
  .crt::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
  }
  .crt {
    animation: textShadow 1.6s infinite;
  }
  
  @-webkit-keyframes blink {
      0% {
          opacity: 1;
      }
      50% {
          opacity: 0;
      }
  }
  @-moz-keyframes blink {
      0% {
          opacity: 1;
      }
      50% {
          opacity: 0;
      }
  }
  @-o-keyframes blink {
      0% {
          opacity: 1;
      }
      50% {
          opacity: 0;
      }
  }
  /* END CRT EFFECT */