/* =======================================================================================================
   Global Styles & Body
   ========================================================================== */
body {
    font-family: 'Open sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    background-color: #000000;
    color: #FCFCFC;
    margin: 0;
    padding: 20px;
    
    /* Background Image */
    background-image: url('tron_background_4096x1958.png');
    background-repeat: no-repeat;
    background-size: cover; 
    background-attachment: fixed;
    background-position: center center;
}

h1 {
    color: #FF79C6; 
    font-weight: 400;
    text-align: center;
    margin-bottom: 20px;
    font-size: 3rem; 
}

h2 {
    font-weight: 100;
    color: #FCFCFC;
    border-bottom: 0.5px solid #FF79C6;
    padding-bottom: 5px;
    margin-top: 0;
}

/* ==========================================================================
   STUDY BOARD LAYOUT (Grid & Cards)
   ========================================================================== */

.lerntafel-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
    margin-bottom: 120px; /* Space for the footer */
}

.karte {
    background-color: rgba(31, 32, 65, 0.8); 
    border: 0.5px solid transparent; 
    border-top: 2px solid #FF79C6; 
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

pre {
    background-color: rgba(75, 63, 114, 0.3); 
    border: 0.5px solid transparent;
    border-radius: 5px;
    padding: 15px;
    overflow-x: auto; 
    font-size: 0.9em;
}

code {
    font-family: "Courier New", Courier, monospace;
}

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 5px;
}

/* ==========================================================================
   SCROLLBAR STYLING
   ========================================================================== */
html {
  scrollbar-color: #FF79C6 #000000; 
}

::-webkit-scrollbar {
  /* width: 10px; */
}

::-webkit-scrollbar-track {
  background: #000000; 
}

::-webkit-scrollbar-thumb {
  background-color: #FF79C6; 
  border-radius: 5px;
  border: 2px solid #000000;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ffbde1; 
}

/* ==========================================================================
   MUSIC PLAYER (Footer)
   ========================================================================== */
.music-player {
    text-align: center;
    background-color: rgba(31, 32, 65, 0.85); 
    border-top: 2px solid #FF79C6; 
    padding: 15px;
    margin-top: 30px;
    border-radius: 8px;
}

.music-player h3 {
    margin-top: 0;
    color: #FF79C6; 
    font-weight: 400;
}

.player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; 
}

.music-player button {
    background-color: #4B3F72; 
    color: #FCFCFC;
    border: 1px solid #FF79C6;
    border-radius: 5px;
    padding: 8px 12px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    cursor: pointer;
    transition: background-color 0.2s;
    min-width: 90px; 
}

.music-player button:hover {
    background-color: #5a4a8a; 
}

.music-player label {
    font-weight: 300;
}

.music-player input[type="range"] {
    cursor: pointer;
}

/* ==========================================================================
   BACK TO HOME LINK (Absolute Top-Left)
   ========================================================================== */
.back-to-home-link {
    position: absolute; 
    top: 25px;
    left: 25px;
    
    color: #FF79C6; 
    text-decoration: none; 
    font-size: 1.1em;
    font-weight: 400;
    
    padding: 5px 10px;
    border: 1px solid transparent; 
    border-radius: 5px;
    transition: all 0.2s;
    z-index: 1000; 
}

.back-to-home-link:hover {
    color: #FFFFFF; 
    border: 1px solid #FF79C6; 
}

/* ==========================================================================
   MOBILE OPTIMIZATION (Responsive)
   ========================================================================== */
@media (max-width: 900px) {
    /* Tablet: Switch to 2 columns */
    .lerntafel-container {
        grid-template-columns: repeat(2, 1fr); 
    }

@media (max-width: 768px) {
    /* 1. Container: Stack everything vertically */
    .lerntafel-container {
        grid-template-columns: 1fr; /* Only 1 column on phones */
        padding: 10px;
    }

    /* 2. Make title (h1) smaller */
    h1 {
        font-size: 2.5rem; 
        margin-top: 60px; 
    }

    /* 3. Code Blocks: Allow wrapping */
    pre {
        white-space: pre-wrap; 
        word-wrap: break-word; 
        font-size: 0.8em; 
    }

    /* 4. Adjust Home Link position */
    .back-to-home-link {
        top: 15px;
        left: 15px;
        font-size: 1em; 
    }

    /* FIX: Player Buttons stack neatly vertically */
    .player-controls {
        flex-direction: column; /* FORCES VERTICAL STACKING */
        gap: 10px; /* Smaller vertical gap */
        flex-wrap: wrap; /* Can remain in case it's needed elsewhere */
    }
    
    .music-player button {
        /* Buttons take full width of controls */
        width: 100%; 
        min-width: auto;
    }

    /* Slider is automatically stacked below the buttons */
    /* Slider needs no specific rule here as it wraps naturally */
}