/* This section styles the main body of the webpage. */
body {
    /* Sets the background color of the entire page to black. */
    background-color: black;

    /* Establishes a grid layout for the page's main components. */
    display: grid;

    /* Defines the grid's columns: 5 columns, each taking up an equal fraction (1fr) of the available space. */
    grid-template-columns: repeat(5, 1fr) ;

    /* Defines the grid's rows with specific heights: the first is 102px, the second is 200px, and the third is 300px. */
    grid-template-rows: 102px 200px 300px ;

    /* Assigns names to the grid areas, creating a visual layout structure. */
    grid-template-areas:
    /* The top row is entirely for the 'header'. */
    "header header header header header"
    /* The second row starts with 'scroll' and the rest are empty spots. */
    "scroll . . . ."
    /* The third row is entirely for the 'statment'. */
    "statment statment statment statment statment";

    /* Vertically centers the content within each grid cell. */
    align-items: center;

    /* Sets the default text color for the page to red. */
    color: red;

    /* Sets the default font for the page to "Bruno Ace". */
    font-family: "Bruno Ace";
}

/* This styles all <button> elements. */
button {
    /* Removes any background color or image, making the button transparent. */
    background: none;

    /* Removes the default border from the button. */
    border: none;

    /* Sets the button text color to red. */
    color: red;

    /* Sets the button font to "Bruno Ace". */
    font-family: "Bruno Ace";

    /* Sets the font size to 1rem (relative to the root font size). */
    font-size: 1rem;

    /* Removes any padding inside the button. */
    padding: 0;

    /* Changes the mouse cursor to a pointer (a hand) when hovering over the button. */
    cursor: pointer;
}

/* This styles any link (<a> tag) that is inside a <button>. */
button a {
    /* Removes the default underline from the link. */
    text-decoration: none;

    /* Makes the link inherit its color from its parent element (the button), so it will be red. */
    color: inherit;
}

/* This defines a reusable animation named "glitch". */
@keyframes glitch {
    /* The animation creates a glitch effect by quickly changing the position of a red text shadow. */
    0% { text-shadow: 2px 2px red; }
    25% { text-shadow: -2px -2px red; }
    50% { text-shadow: 2px 2px red; }
    75% { text-shadow: -2px 2px red; }
    100% { text-shadow: 2px -2px red; }
}

/* This applies styles to a link (<a>) inside a <button> when the user hovers over the button. */
button:hover a {
    /* Adds an underline to the text on hover. */
    text-decoration: underline;

    /* Applies the "glitch" animation, making it run for 0.2 seconds, infinitely, and alternating direction. */
    animation: glitch 0.2s infinite alternate;
}

/* This styles the <header> element. */
header {
    /* Places the header into the grid area named "header". */
    grid-area: header;

    /* Uses flexbox for layout within the header. */
    display:flex;
}

/* Defines a more complex glitch animation with pauses. */
@keyframes glitch2 {
    0% { text-shadow: 2px 2px red; }
    3% { text-shadow: -2px -2px red; }
    6% { text-shadow: 2px 2px red; }
    9% { text-shadow: -2px 2px red; }
    12% { text-shadow: 2px -2px red; }
    /* The effect disappears for the rest of the animation duration, creating a pause. */
    15% { text-shadow: none; }
    100% { text-shadow: none; }
}

/* Defines an animation that violently shakes an element by rapidly changing its position. */
@keyframes violentGlitch {
    0% { transform: translateX(0) translateY(0); }
    5% { transform: translateX(-8px) translateY(2px); }
    10% { transform: translateX(6px) translateY(-4px); }
    15% { transform: translateX(-12px) translateY(6px); }
    20% { transform: translateX(10px) translateY(-8px); }
    25% { transform: translateX(-5px) translateY(3px); }
    30% { transform: translateX(2px) translateY(-2px); }
    /* Resets the position and pauses for the rest of the animation. */
    31% { transform: none; }
    100% { transform: none; }
}

/* Defines an animation creating a "ghosting" effect with multiple colored shadows. */
@keyframes violentGhostGlitch {
    0% { text-shadow: none; }
    5% { text-shadow: 6px 6px rgba(255, 0, 0, 0.7), -6px -6px rgba(0, 2, 109, 0.7); }
    10% { text-shadow: -8px -8px rgba(255, 0, 0, 0.8), 8px 8px rgba(0, 9, 90, 0.8); }
    15% { text-shadow: 12px -12px rgba(255, 0, 0, 0.9), -12px 12px rgba(10, 0, 95, 0.9); }
    /* Stops the effect suddenly and pauses for the rest of the animation. */
    20% { text-shadow: none; }
    100% { text-shadow: none; }
}

/* Styles the container for the header content. */
.header-container {
    /* Uses flexbox to align items inside. */
    display:flex;
    align-items: center;

    /* Applies multiple glitch animations at once, with different durations and timings. */
    animation:  glitch 2s infinite steps(1),
                violentGlitch 15s infinite steps(1),
                violentGhostGlitch 20s infinite steps(1);

    /* Delays the start of the animations by 3 seconds. */
    animation-delay: 3s;

    /* Floats the container to the left. */
    float: left;
}

/* Styles the element with the class "logo". */
.logo {
    /* Sets the height and width of the logo. */
    height: 3rem;
    width: 3rem;
}

/* Styles the navigation container. */
.nav {
    /* This tries to place the element in a grid area named "nav", but "nav" isn't defined in the body's grid-template-areas. */
    grid-area:nav;

    /* Uses flexbox for layout. */
    display: flex;

    /* Makes the nav container span the full width of its parent. */
    width: 100%;

    /* Pushes the navigation items to the far right. */
    justify-content: flex-end;
}

/* Styles paragraph (<p>) elements inside the navigation. */
.nav p {
    /* Adds 1rem of padding around the text. */
    padding: 1rem;
}

/* Styles the nav paragraphs on hover. */
.nav p:hover {
    /* Adds an underline. */
    text-decoration: underline;

    /* Changes the cursor to a pointer. */
    cursor: pointer;
}

/* Styles the nav paragraphs when they are being clicked. */
.nav p:active {
    /* Changes the text color to white. */
    color: white;
}

/* Styles the element with the class "scroll". */
.scroll {
    /* Places this element into the grid area named "scroll". */
    grid-area: scroll;
}

/* Styles the container for the scrolling content. */
#scroll-container {
    /* Adds a 3px solid red border. */
    border: 3px solid red;

    /* Rounds the corners of the border. */
    border-radius: 5%;

    /* Hides any content that overflows the container's boundaries. */
    overflow: hidden;
}

/* Styles the element with the class "statment". */
.statment {
    /* Uses flexbox to perfectly center its content both horizontally and vertically. */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Places this element into the grid area named "statment". */
    grid-area: statment;

    /* Sets a background image. */
    background-image: url("tower.jpg");

    /* Makes the element fill the full height and width of its grid area. */
    height: 100%;
    width: 100%;
}

/* Styles the <h1> tag inside the "statment" container. */
.statment h1 {
    display: flex;
    /* Adds a black background to the text to make it readable over the image. */
    background-color: black;
    justify-content: center;
}

/* Styles the main container for the audio player. */
.audio-container {
    /* Uses flexbox to arrange items in a column and center them. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    /* Sets the width and a maximum width. */
    width: 80%;
    max-width: 600px;

    /* Gives it a semi-transparent black background. */
    background-color: rgba(0, 0, 0, 0.8);

    /* Adds padding, rounded corners, and a red border. */
    padding: 20px;
    border-radius: 10px;
    border: 3px solid red;
}

/* Styles the list of images. */
.image-list {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* Styles each image in the list. */
.image {
    width: 150px;
    height: 150px;
    margin-right: 20px;
    /* Ensures the image covers the area without being distorted. */
    object-fit: cover;
}

/* Styles the playlist. */
#playlist {
    /* Removes the default bullet points. */
    list-style: none;
    padding: 0;
}

/* Styles playlist items (<li>) on hover. */
li:hover {
    /* Adds an underline and a pointer cursor. */
    text-decoration: underline;
    cursor: pointer;

    /* Applies the "glitch" animation on hover. */
    animation: glitch 0.2s infinite alternate;
}

/* Styles the container for player controls (play, pause, etc.). */
.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Adds space between control buttons. */
    margin-top: 20px;
}

/* Styles the control buttons (which are <h2> tags here). */
.controls h2 {
    cursor: pointer;
    padding: 10px 20px;
    background-color: #f0f0f0; /* Light gray background. */
    border-radius: 5px;
    transition: background-color 0.3s; /* Smooth transition for color change. */
}

/* Styles control buttons on hover. */
.controls h2:hover {
    background-color: #d0d0d0; /* Darker gray on hover. */
}

/* Styles control buttons when clicked. */
.controls h2:active {
    background-color: #b0b0b0; /* Even darker gray when active. */
}

/* Styles the container for the time display. */
.timeStamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

/* Styles the current time and total duration elements. */
#currentDuration, #duration {
    color: white;
    font-size: 14px;
    width: 50px; /* Fixed width to prevent layout shifts. */
    text-align: center; /* Centers the time text. */
}


/* Styles the container/track for the song's progress bar. */
.progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: #d0d0d0;
    border-radius: 5px;
    margin-top: 20px;
    position: relative; /* Needed for positioning the progress bar inside it. */
}

/* Styles the actual progress bar that fills up. */
.progress-bar {
    width: 0; /* Starts with zero width. */
    height: 100%;
    background-color: red;
    border-radius: 5px;
    transition: width 0.3s; /* Smoothly animates the width change. */
}

/* This is a duplicate rule, likely a copy-paste error. It styles a volume bar container. */
.volume-bar-container {
    width: 100%;
    height: 10px;
    background-color: white;
    border-radius: 5px;
    margin-top: 20px;
    position: relative;
}

/* Styles the container holding the volume icon and slider. */
.volume-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icon and slider. */
    margin-top: 20px;
    width: 100%;
}

/* Styles the label for the volume slider. */
label {
    color: red;
    font-size: 14px;
    font-family: "Bruno Ace";
}

/* General styling for the range input (slider). */
input[type="range"] {
    -webkit-appearance: none; /* Removes default browser styling (for Chrome/Safari). */
    width: 100%;
    height: 8px;
    background: #ddd; /* The track of the slider. */
    border-radius: 5px;
    outline: none; /* Removes the focus outline. */
    opacity: 0.7; /* Slightly transparent. */
    transition: opacity 0.2s; /* Smooth opacity change on hover. */
}

/* Makes the slider fully opaque on hover. */
input[type="range"]:hover {
    opacity: 1;
}

/* Styles the draggable handle (thumb) of the slider for Chrome/Safari. */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Removes default thumb styling. */
    appearance: none;
    width: 15px;
    height: 15px;
    background: red;
    cursor: pointer;
    border-radius: 50%; /* Makes it a circle. */
}

/* Styles the draggable handle (thumb) of the slider for Firefox. */
input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: red;
    cursor: pointer;
    border-radius: 50%;
}

/* Styles the container for the scrolling news ticker. */
#news-scroll-container {
    /* Hides overflowing text. */
    overflow: hidden;
    /* Prevents text from wrapping to the next line. */
    white-space: nowrap;
    border: 3px solid red;
    border-radius: 5%;
    width: 100%;
    max-width: 400px; /* Limits the container width. */
    margin: auto; /* Centers the container. */
}

/* Styles the text elements that will scroll. */
#news-scroll-text, #news-jp-scroll-text {
    /* Allows the animation to work correctly on the text block. */
    display: inline-block;
    /* Applies the scrolling animation. */
    animation: scrollTextLoop 200s linear infinite;
}

/* Gives the Japanese text a different, faster animation speed. */
#news-jp-scroll-text {
    animation-duration: 100s;
}

/* Defines the animation that moves the text from right to left. */
@keyframes scrollTextLoop {
    /* Starts with the text slightly inside the right edge. */
    0% { transform: translateX(2%); }
    /* Ends with the text moved 50% of its total width to the left, creating a seamless loop if the text content is duplicated. */
    100% { transform: translateX(-50%); }
}