/* 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 Cascadia code font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cascadia+Code&display=swap');

/* 1. Remove background from body to act as the "outside" area */
html {
    background-color: #030703; /* This is your "Outside" color */
}

body {
    background: transparent; /* Ensure body doesn't override the html color */
    color: #33ff33;
    font-family: 'Cascadia Code', monospace;
    font-size: 16px;
    /* ... keep your existing padding and margins ... */
}


/* 2. Style the container for the "Inside" */
.main-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #0a1c0a; /* A much more visible 'dark forest' green */
    border: 2px solid #33ff33;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.2); /* Adds depth to the box */
}

/* 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 */
}
#glitch-image {
    animation: flicker 0.1s infinite;
}

@keyframes flicker {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}