/* 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." */

/* Import the VT323 font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* Base structure and background setup */
html, body {
    background-color: #030703; /* Deep, near-black green to simulate an unlit CRT backing */
    color: #33ff33;            /* Classic P1 green phosphor color */
    font-family: 'VT323', monospace;
    font-size: 22px;           /* VT323 renders best at larger font sizes */
    margin: 0;
    padding: 40px;
    height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Phosphor text glow effect */
h1, h2, p, li, div {
    text-shadow: 0 0 2px rgba(51, 255, 51, 0.6), 0 0 10px rgba(51, 255, 51, 0.4);
    line-height: 1.2;
    letter-spacing: 1px;
}

/* CRT Scanline Overlay */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    /* Generates horizontal lines simulating the monitor's raster lines */
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
    background-size: 100% 4px;
    z-index: 2147483647; /* Ensures the overlay remains on top of all elements */
    pointer-events: none; /* Allows clicking through the overlay to underlying links */
}

/* CRT Screen Curvature and Vignette Overlay */
body::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    /* Darkens the corners to simulate a curved glass tube */
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 2147483646;
    pointer-events: none;
}

/* Subtle screen flicker animation */
@keyframes crt-flicker {
    0%   { opacity: 0.99; }
    50%  { opacity: 1.00; }
    100% { opacity: 0.98; }
}

.cogitator-screen {
    animation: crt-flicker 0.2s infinite;
    width: 100%;
    height: 100%;
}

/* Styling for typical HTML elements to match the theme */
a {
    color: #88ff88;
    text-decoration: none;
    border-bottom: 2px dashed #88ff88;
}

a:hover {
    color: #ffffff;
    background-color: #33ff33;
    text-shadow: none;
}


/* Styling for cogitator images */
.cogitator-image {
    max-width: 100%;       /* Ensures the image scales down on smaller screens */
    height: auto;
    display: block;
    margin: 20px auto;     /* Centers the image with vertical spacing */
    border: 2px solid #33ff33; /* Adds a green terminal border */
    
    /* CSS Filters to create the green monochrome phosphor effect */
    filter: grayscale(100%) brightness(1.2) contrast(1.5) sepia(100%) hue-rotate(85deg) saturate(600%);
    
    /* Adds the same text-shadow glow to the borders of the image */
    box-shadow: 0 0 8px rgba(51, 255, 51, 0.6);
    
    /* Simulates low-resolution pixelation for retro rendering */
    image-rendering: pixelated; 
}
.top-right-image {
    position: fixed;
    top: 10px;    /* Distance from the top */
    right: 10px;  /* Distance from the right */
    width: 100px; /* Adjust size as needed */
    z-index: 1000; /* Ensures it sits on top of other elements */
    opacity: 0.5;    /* Optional: Fades it for a 'terminal background' look */
    pointer-events: none; /* Optional: lets clicks pass through the image */
}