/* Color Scheme Variables */
:root {
    font-size: 160%; /* Scales the base font size to 60% larger */
    --primary-color: #FF0000; /* Bright red */
    --secondary-color: #950101; /* Deep red */
    --tertiary-color: #3D0000; /* Dark maroon */
    --background-color: #000000; /* Black */
    --text-color: #FF0000; /* Bright red for text */
    --link-color: #FF0000; /* Bright red for links */
    --link-hover-color: #950101; /* Deep red on hover */
    --link-visited-color: #3D0000; /* Dark maroon for visited links */
}

/* Font Inclusion */
@font-face {
    font-family: 'Jolly Lodger';
    src: url('/fonts/JollyLodger-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* General Styles */
body, html {
    margin: 0;
    padding: 0;
    font-size: 1rem; /* This now uses the scaled base size */
    font-family: 'Jolly Lodger', Arial, sans-serif;
    background-color: var(--background-color); /* Black */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), /* Semi-transparent black overlay */
        url('/media/tile-bg.png'); /* Tiled background image */
    background-size: auto; /* Keep the image's original size */
    background-repeat: repeat; /* Tile the image */
    background-attachment: scroll; /* Background moves with content */
    background-position: top left; /* Start tiling from the top-left corner */
    color: var(--text-color); /* Bright red */
    text-align: center;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}


/* Header */
header {
    background-color: rgba(61, 0, 0, 0.5); /* Hardcoded RGBA */
    padding: 10px;
    margin-bottom: 20px;
}


header a {
    color: var(--link-color); /* Bright red */
    text-decoration: none;
    font-size: 1.2rem;
}

header a:hover {
    color: var(--link-hover-color); /* Deep red */
    text-decoration: underline;
}

/* Grid Container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px; /* Increased gap for spacing */
    padding: 20px 50px; /* Wider side margins */
    max-width: 1400px; /* Wider max width */
    margin: 0 auto;
}

/* CD Case Styling */
.cd-case {
    height: 220px; /* Adjusted height for proportions */
    width: 250px; /* Increased width for a balanced look */
    margin: 20px auto;
    display: inline-block;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0);
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.6),
        inset 0px 0px 20px 2px rgba(0, 0, 0, 0.4),
        inset 0px 0px 5px 1px rgba(255, 255, 255, 0.6),
        inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2);
    position: relative;
    text-align: center; /* Center track names */
    text-decoration: none; /* Remove underline from links */
    color: var(--link-color); /* Bright red for track names */
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.cd-case figcaption {
    font-size: 1.5rem; /* Adjusted font size for larger song names */
    text-transform: uppercase; /* Keeps the song names in all caps */
    margin-top: 20px;
    color: var(--link-color); /* Match the color scheme */
    transition: text-shadow 0.3s ease-in-out; /* Smooth hover effect */
}

.cd-case:hover figcaption {
    text-shadow: 0 0 5px var(--link-color), 0 0 10px var(--link-color),
                 0 0 15px var(--link-hover-color); /* Glow effect */
    color: var(--text-color); /* Ensures contrast */
}



.cd-case:hover {
    color: var(--link-hover-color); /* Change color on hover */
    transform: translateY(-5px); /* Lift effect */
}

/* Album Art */
.album-art {
    height: 200px;
    width: 200px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5),
        inset 0px 0px 16px 2px rgba(0, 0, 0, 0.1),
        inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3);
    position: relative;
    top: 3px;
    left: 25px;
    background-size: cover;
    background-position: center;
}

/* Supports */
.sup {
    height: 10px;
    width: 20px;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: inset 0px 0px 6px 1px rgba(0, 0, 0, 0.22),
        inset 0px 0px 1px 1px rgba(255, 255, 255, 0.17);
    position: absolute;
}
.sup.pos-tl {
    top: 0;
    left: 10px;
    border-radius: 0 0 5px 5px;
}
.sup.pos-tr {
    top: 0;
    right: 10px;
    border-radius: 0 0 5px 5px;
}
.sup.pos-bl {
    bottom: 0;
    left: 10px;
    border-radius: 5px 5px 0 0;
}
.sup.pos-br {
    bottom: 0;
    right: 10px;
    border-radius: 5px 5px 0 0;
}

/* Spine */
.spine {
    height: 120px;
    width: 15px;
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
    box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.23),
        inset 0px 0px 7px 0px rgba(0, 0, 0, 0.22),
        inset 0px 0px 0px 1px rgba(255, 255, 255, 0.22);
    position: absolute;
    top: 50px; /* Adjusted for proportions */
    left: 0;
    border-radius: 0 50% 50% 0;
    z-index: -1;
}

/* Shitposts Table Styling */
.shitposts-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 20px auto;
}

.shitposts-table {
    width: 80%;
    max-width: 1200px;
    border-collapse: collapse;
    margin: 20px auto;
}

.shitposts-table th, .shitposts-table td {
    border: 1px solid var(--secondary-color); /* Deep red */
    padding: 10px;
    text-align: left;
}

.shitposts-table th {
    background-color: var(--tertiary-color); /* Dark maroon */
    color: var(--text-color); /* Bright red */
    font-weight: bold;
}

.shitposts-table td {
    background-color: var(--background-color); /* Black */
    color: var(--text-color); /* Bright red */
}

.shitposts-table tr:nth-child(even) {
    background-color: var(--tertiary-color); /* Alternating row color */
}

.shitposts-table tr:hover {
    background-color: var(--secondary-color); /* Deep red on hover */
    transition: background-color 0.2s ease-in-out;
}