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

/* General Vibe */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%; /* Prevents any image from ever being wider than its parent */
    display: block;  /* Removes the weird white gap at the bottom of images */
}
body {
    background-color: #010b13;
    color: #FBFAF5; /* Classic Terminal/Matrix Green */
    font-family: "Courier New", Courier, monospace;
    margin: 0;
    text-align: center;
}

header {
    border-bottom: 3px double #FF8C00;
    padding: 20px;
}
/* 1. Standard H1 behavior (layout only) */
header h1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Space between icon and text */
}

/* 2. The Icon (Standard Colors) */
.retro-icon {
    width: 100px; /* Adjust size as needed */
    height: auto;
    filter: none !important; /* Ensures no filters accidentally apply */
}

/* 3. The Text (Gradient applied here ONLY) */
.gradient-title {
    background: linear-gradient(to bottom, #FFD700 0%, #FF8C00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
    font-size: 1.5em; /* Inherits size from H1 */
    font-family: 'Courier New', monospace;
}
nav a {
    color: #FFF;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #555;
    padding: 5px 10px;
}

nav a:hover {
    background-color: #FF8C00;
    color: #000;
}

/* Meta info below the poster */
.review-meta {
    display: flex;
    flex-direction: column;
    font-family: 'VT323', monospace;
}

.movie-name {
    color: #FFF;
    font-size: 1.1em;
}

.movie-rating {
    color: #FFD700; /* Gold stars */
    letter-spacing: 2px;
}

/* Movie Counter Styles */
.movie-counter {
    margin: 20px auto;
    display: inline-block;
    background: #222;
    padding: 10px 20px;
    border: 2px outset #555; /* Outset gives that 90s button feel */
}

.counter-label {
    font-size: 0.8em;
    color: #fefefa;
    margin-right: 10px;
    vertical-align: middle;
}

.counter-digits {
    display: inline-flex;
    background: #000;
    border: 1px solid #fefefa;
}

.counter-digits span {
    font-family: 'Courier New', monospace;
    font-size: 1.5em;
    color: #FFD700;
    padding: 5px;
    border-right: 1px solid #333;
    text-shadow: 0 0 5px red;
}

/* Mount Rushmore Styles */
.mount-rushmore {
    background: linear-gradient(to bottom, #000, #111);
    padding: 5px 10px 15px 10px;
    border: 1px dashed #555;
    margin: 20px;
    margin-top: 0;
}
.mount-rushmore h2 {
    margin-top: 0;
    margin-bottom: 15px;
    /* 1. Sandstone Gradient: Light Tan to Deep Earthy Brown */
    background: linear-gradient(to bottom, 
        #edc9af 0%,   /* Desert Sand */
        #c2b280 40%,  /* Sandstone */
        #8b5a2b 100%  /* Burnt Umber/Rock */
    );
    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 2. Changed the glow to a subtle "Dusty" shadow instead of neon gold */
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8));
    
    font-family: 'Courier New', monospace;
    font-size: 2em;
    font-weight: 900; /* Extra bold makes the 'carved' look better */
    text-transform: uppercase;
    letter-spacing: 3px; /* Wider spacing feels more monumental */
}
.rushmore-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 20px; /* Gives the items room to breathe when they grow */
}

/* Remove default underline from the link wrapper */
.rushmore-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.3s ease; /* Smooth growing animation */
}

.rushmore-item {
    width: 160px;
    border: 3px solid #555; /* Default gray border */
    padding: 5px;
    background: #000;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* THE HOVER EFFECT */
.rushmore-link:hover .rushmore-item {
    transform: scale(1.15); /* Grows by 15% */
    border-color: #FFD700; /* Turns Gold on hover */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); /* 90s Glow */
    z-index: 10; /* Ensures the growing item stays on top of neighbors */
}

.movie-title {
    font-size: 0.8em;
    margin-top: 5px;
    color: #FFF;
    text-transform: uppercase;
}

/* Retro Divider */
.pixel-divider {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, transparent, #FF8C00, transparent);
    margin: 20px 0;
    margin-top: 0;
}
.stats-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Space between the two counters */
    margin: auto;
    flex-wrap: wrap; /* Ensures it looks good on smaller screens */
}

/* Layout Wrapper */
.home-cols {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap; /* Stacks them on mobile automatically */
}

/* Sidebar Styling */
.side-feeds {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 300px; /* Fixed width for the sidebar */
}

.feed-box {
    background: #111;
    border: 2px inset #555; /* "Innie" border for the container */
    padding: 10px;
}

.feed-box h3 {
    font-family: 'VT323', monospace;
    color: #FEFEFA;
    margin: 0 0 10px 0;
    text-align: left;
    border-bottom: 1px solid #333;
}

/* The Scrolling List */
.scroll-list {
    height: 150px; /* Fixed height forces the scroll */
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    text-align: left;
    scrollbar-color: #00FF00 #000; /* Neon green scrollbar for modern browsers */
}

/* Custom Scrollbar for Chrome/Safari (The 90s aesthetic) */
.scroll-list::-webkit-scrollbar {
    width: 8px;
}
.scroll-list::-webkit-scrollbar-track {
    background: #000;
}
.scroll-list::-webkit-scrollbar-thumb {
    background: #444;
    border: 1px solid #FEFEFA;
}

/* Individual Links in the lists */
.scroll-list a {
    color: #FFD700;
    text-decoration: none;
    font-size: 0.9em;
    padding: 5px 0;
    border-bottom: 1px dashed #222;
}

.scroll-list a:hover {
    background: #222;
    color: #FFF;
}