* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        body {
            background-color: #000;
            color: #fff;
            font-family: 'MingLiU', 'Courier New', monospace;
            padding: 100px 40px 40px 40px;
            min-height: 100vh;
            position: relative;
        }

        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                rgba(0, 0, 0, 0.15),
                rgba(0, 0, 0, 0.15) 1px,
                transparent 1px,
                transparent 2px
            );
            pointer-events: none;
            z-index: 9999;
        }

        body::after {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
            pointer-events: none;
            z-index: 9998;
        }

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

        .header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 60px;
        }

        .title-section h1 {
            font-size: 120px;
            font-weight: normal;
            letter-spacing: -2px;
            margin-bottom: 10px;
            text-shadow: 0 0 10px #fff, 0 0 15px #fff, 0 0 30px #fff;
        }

        .title-section .controls {
            font-size: 24px;
            letter-spacing: 2px;
            text-shadow: 0 0 5px #fff, 0 0 10px #fff;
        }

        .doveimg {
            width: 277px;
            height: 236px;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 2px;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
        }

        .stuffcontainer {
            display: flex;
            gap: 400px;
            align-items: flex-start;
        }

        .yzymodel {
            width: 144px;
            height: 444px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
        }

        .tracklist {
            flex: 1;
        }

        .track {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 20px;
            letter-spacing: 1px;
            margin-bottom: 8px;
            cursor: pointer;
            padding: 8px 0;
            transition: opacity 0.2s;
            min-height: 40px;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3);
        }

        /* this is what moves the tracks to the right in like a stair form */
        /* IDK if this is the only way to do it its the one i knew so its probably bad */
        
        .track:nth-child(1) { padding-left: 0px; }
        .track:nth-child(2) { padding-left: 40px; }
        .track:nth-child(3) { padding-left: 80px; }
        .track:nth-child(4) { padding-left: 120px; }
        .track:nth-child(5) { padding-left: 160px; }
        .track:nth-child(6) { padding-left: 200px; }
        .track:nth-child(7) { padding-left: 240px; }
        .track:nth-child(8) { padding-left: 280px; }
        .track:nth-child(9) { padding-left: 320px; }

        .track:hover {
            opacity: 0.7;
        }
        
        .track:active {
            opacity: 0.5;
        }

        .track.playing {
            color: #999;
        }

        .track-icon {
            font-size: 16px;
            width: 20px;
            display: inline-block;
        }

        .track-title {
            text-transform: uppercase;
        }

        .controls {
            cursor: pointer;
            user-select: none;
        }

        .controls:hover {
            opacity: 0.7;
        }
        
        .seekbar {
            width: 280px;
            height: 8px;
            margin-top: 8px;
            background: rgba(255,255,255,0.2);
            cursor: pointer;
            position: relative;
        }

        .seekbar-fill {
            height: 100%;
            width: 0%;
            background: #fff;
            box-shadow: 0 0 8px #fff;
            pointer-events: none;
        }
        
        .time-display {
            margin-top: 6px;
            font-size: 14px;
            letter-spacing: 1px;
            opacity: 0.8;
        }
        
        .player-controls {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-top: 10px;
        }
        
/* starting below, stuff for phone support */
/* the only page in the entire website that has any of this added */
        
@media (max-width: 768px) {

    body {
        padding: 40px 20px;
        font-family: 'MingLiU', 'Courier New', monospace;
    }

    /* header: mobile */
    .header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }

    .title-section h1 {
        font-size: 64px;
        line-height: 1;
    }

    /* controls: mobile */
    .player-controls {
        align-items: center;
        margin-top: 16px;
    }

    .seekbar {
        width: 100%;
        max-width: 320px;
        height: 12px;
    }

    .time-display {
        font-size: 13px;
        opacity: 0.9;
    }

    /* img: mobile */
    .doveimg {
        width: 160px;
        height: auto;
        margin-top: 20px;
    }
    
    /* honestly it looked ugly in vertical. i might bother designing something properly later */
    .yzymodel {
        display: none;
    }

    /* tracklist: mobile */
    .stuffcontainer {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .tracklist {
        width: 100%;
        max-width: 360px;
    }
    
    .track {
        padding-left: 0 !important;
        justify-content: flex-start;
        font-size: 16px;
    }
}