/* General body styling for a retro look */
        body {
            background-image: url('https://dl.glitter-graphics.com/pub/461/461898tg93ryqz0h.gif');
            background-repeat: repeat;
    
            background-color: #0A2B66;
            font-family: 'Times New Roman', Times, serif;
            color: #FFFFFF;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }

        /* Custom scrollbar styling for a unique visual flair */
        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: #051833;
            border: 1px solid #0A2B66;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: #1042AD;
            border-radius: 0;
            border: 1px solid #1042AD;
        }

        /* CSS animation for a pulsing effect on certain elements */
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
            70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
        }
        
        /* Back button styling, fixed to the top-left of the screen */
        .back-button {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1000;
            padding: 10px 10px;
            background-color: #333;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-family: sans-serif;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .back-button:hover {
            background-color: #555;
        }

        /* Main content container with responsive updates */
        .main-content {
           
            width: 90%;
            max-width: 1000px; /* Prevents it from getting too wide on large screens */
            padding: 0 10px; /* Adds padding on smaller screens */
        }

      
.player-container {
            background-color: #30292C;
            border-radius: 8px;
            padding: 20px;
            width: full;
            text-align: center;
            border: 1px solid ;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .player-container {
 background-color: #30292C;
 border-radius: 8px;
 padding: 20px;
 width: 300px; /* Adjust this value to your desired width */
 margin: 0 auto; /* This centers the container horizontally */
 text-align: center;
 border: 1px solid ;
 display: flex;
 flex-direction: column;
 position: relative;
overflow: hidden;
}

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

#play-btn {
    background-color: #4D2C2C;
    border: none;
    color: white;
    font-size: 16px;
    padding: 4px 8px;
    width: auto;
    height: auto;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 2px 10px rgba(76, 175, 80, 0.4);
    border-radius: 12px; /* This rounds the corners */
}

#play-btn:active {
    transform: scale(0.95);
}

#play-btn {
    animation: pulse 3s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 115, 255, 0.7); } /* Blue pulse start */
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(0, 115, 255, 0); } /* Blue pulse middle */
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 115, 255, 0); } /* Blue pulse end */
}
     
      

        
        
        /* Media query for small screens (e.g., mobile devices) */
        @media (max-width: 600px) {
            .main-content {
                padding: 0 5px; /* Adjust padding for very small screens */
            }

            .banner {
                width: 100%; /* Banners will take up the full width, stacking vertically */
            }
            
            .button {
                width: 45%; /* Buttons will take up roughly half the width, two per row */
            }
        }
        
        @font-face {
  font-family: 'Press Start 2P';
  src: url('/IntraNet.woff2') format('truetype');
}