:root {
  --textColour: #f0f6ff;
  --shadowColour: #ffffff;
  --shadowColourTranslucent: rgba(255, 255, 255, 0.9);
  --shadowColourTranslucent2: rgba(255, 255, 255, 0.5);
  --highlightColor1: #ceb800; 
  --highlightColor2: #f44336;
  --highlightColor3: #1ec409;
  --highlightColor4: #8a2be2;
  --highlightColor5: #00bfff ;
  --highlightColor6: #ff7f50;
  --highlightColor7: #008080;
  --highlightColor8: #ff00ff;

  --urlColor: #4b88a2;;
  --urlHoverColor:#FF69B4;
}
a{
  text-decoration: none;
  color: var(--urlColor);
}
a:hover{
  color: var(--urlHoverColor);
}
@font-face {
  src: url('/fonts/Terminal.ttf');
  font-family: Terminal;
}
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 800;
    opacity: 0.075;
    pointer-events: none;

  }  
  body {
    background: #000;
    font-family: Terminal;
    overflow-x: hidden;
    margin: 0;
    
}
  .background-image {
    position: fixed; /* Fix the background in place */
    top: 0;
    left:0; /* Keep the same left offset */
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
    object-fit: cover; /* Ensure the background covers the area */
    z-index: -1; /* Make sure it stays behind other content */
    opacity: 0.5; /* Adjust opacity */
    pointer-events: none; /* Disable interaction with the background */

    background-image: url(/overlay/vhs-effect.gif);
    background-size: cover; /* Ensure it covers the entire area */
    background-position: center; /* Center the image */
  }
  @keyframes scanlines {
    0% { transform: translateX(0); }
    100% { transform: translateX(1px); }
  }