:root {

/* DOS colors */
  --dos-black: hsl(0, 0%, 0%);
  --dos-blue: hsl(240, 100%, 33%);
  --dos-green: hsl(120, 100%, 33%);
  --dos-cyan: hsl(180, 100%, 33%);
  --dos-red: hsl(0, 100%, 33%);
  --dos-magenta: hsl(300, 100%, 33%);
  --dos-brown: hsl(30, 100%, 33%);
  --dos-yellow: hsl(60, 100%, 33%);
  --dos-white: hsl(0, 0%, 67%);
  --dos-dark-grey: hsl(0, 0%, 33%);
  --dos-bright-blue: hsl(240, 100%, 67%);
  --dos-bright-green: hsl(120, 100%, 67%);
  --dos-bright-cyan: hsl(180, 100%, 67%);
  --dos-bright-red: hsl(0, 100%, 67%);
  --dos-bright-magenta: hsl(300, 100%, 67%);
  --dos-bright-yellow: hsl(60, 100%, 67%);
  --dos-bright-white: hsl(0, 0%, 100%);
  
  --title-name: var(--dos-green);
  
}


@media (max-width: 640px) {
    :root {
        /* 0-7: Low Intensity (Deep, Smoldering Red) */
        --dos-black: hsl(10, 100%, 3%);
        --dos-blue: hsl(12, 100%, 10%);
        --dos-green: hsl(14, 100%, 15%);
        --dos-cyan: hsl(16, 100%, 20%);
        --dos-red: hsl(18, 100%, 25%);
        --dos-magenta: hsl(20, 100%, 30%);
        --dos-brown: hsl(22, 100%, 35%);
        --dos-white: hsl(24, 100%, 45%);
        --dos-dark-grey: hsl(20, 100%, 22%);
        --dos-bright-blue: hsl(26, 100%, 50%);
        --dos-bright-green: hsl(28, 100%, 55%);
        --dos-bright-cyan: hsl(30, 100%, 60%);
        --dos-bright-red: hsl(35, 100%, 65%);
        --dos-bright-magenta: hsl(40, 100%, 70%);
        --dos-bright-yellow: hsl(44, 100%, 75%);
        --dos-bright-white: hsl(48, 100%, 50%);
      
        --title-name: var(--dos-bright-white);
    }

    body {
        background-color: var(--dos-black);
        color: var(--dos-white);
    }
}