@font-face {
            font-family: 'Saturno';
            src: url('/saturno.ttf') format('truetype');
        }
        
        @font-face {
            font-family: 'Bahnschrift';
            src: url('/bahnschrift.ttf') format('truetype');
        }

        body {
            background-image: url('/webby-pics/119781.png');
            background-size: 400px;
            font-family: 'Bahnschrift';
            color: #00ff00;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
        }

      
        .box {
            position: relative;
            background-color: transparent;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 5px 5px 0px rgba(0,0,0,0.5);
        }
        
        
        .box-scroll {
            max-height: 550px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .box::before {
            content: "";
            position: absolute;
            border: 3px ridge #c0c0c0;
    

            background-color: rgba(12, 12, 39, 0.7); 
    
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            backdrop-filter: blur(2px);
        }

        .box-title {
            background: linear-gradient(100deg, #03443f, #0000cd);
            color: white;
            padding: 5px 10px;
            margin: -15px -15px 10px -15px;
            border-bottom: 2px solid #c0c0c0;
            font-weight: bold;
            font-size: 14px;
        }

        .box-title-saturn {
            background: linear-gradient(100deg, #03443f, #0000cd);
            color: white;
            padding: 5px 10px;
            margin: -15px -15px 10px -15px;
            border-bottom: 2px solid #c0c0c0;
            font-weight: bold;
            font-size: 14px;
            font-family: "Saturno";
        }


        .header {
            text-align: center;
            background: linear-gradient(180deg, #ff00ff, #8b008b);
            border: 5px outset #ff69b4;
            padding: 20px;
            margin-bottom: 20px;
        }

        .header h1 {
            font-family: 'Saturno';
            font-size: 48px;
            color: #ffff00;
            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px green;
            margin: 0;
            animation: rainbow 2s infinite;
        }

        @keyframes rainbow {
            0% { color: #ff0000; }
            16% { color: #ff7f00; }
            33% { color: #ffff00; }
            50% { color: #00ff00; }
            66% { color: #0000ff; }
            83% { color: #8b00ff; }
            100% { color: #ff0000; }
        }

        /*grid*/
        .main-area {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 15px;
        }

        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /*links*/
        a {
            color: #00ffff;
            text-decoration: underline;
        }

        a:visited {
            color: #ff00ff;
        }

        a:hover {
            color: #ffff00;
            background-color: #000;
        }

        
        ul {
            list-style-type: square;
            color: #ffff00;
        }

        li {
            margin: 8px 0;
            color: #00ff00;
        }

        
        .scroll {
            background: #000;
            color: #00ff00;
            padding: 10px;
            border: 2px solid #00ff00;
            overflow: hidden;
            white-space: nowrap;
            margin-bottom: 15px;
        }

        .scroll span {
            display: inline-block;
            animation: scroll 10s linear infinite;
        }

        @keyframes scroll {
            from { transform: translateX(370%); }
            to { transform: translateX(-110%); }
        }

        /* Under construction gif spot */
        .construction {
            text-align: center;
            padding: 10px;
        }


        img {
            max-width: 100%;
            image-rendering: pixelated;
        }

        video {
            max-width: 100%;
            border: 3px solid #00ff00;
            align-items: center;
        }
        
        #big {
            max-width: 70%;
            border: 3px solid #00ff00;
            text-align: center;
        }

        /* Blinking text */
        @keyframes blink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }

        .blink {
            animation: blink 1s infinite;
        }

        hr {
            border: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, rgb(3, 79, 43), transparent);
        }

        .audiop {
            
            max-width: 100%;
            display: block;  
        }

        .audiop button,
        .audiop input[type="range"] {
            max-width: 100%; 
            box-sizing: border-box; 
        }

        @media (max-width: 768px) {
            .main-area {
                grid-template-columns: 1fr;

            }
        }