@font-face {
    font-family: 'TourneyBlack';
    src: url('https://zzzcharacterbuilder.neocities.org/FONTS/Tourney-Black.ttf');
}

@font-face {
    font-family: 'NokoraBlack';
    src: url('https://zzzcharacterbuilder.neocities.org/FONTS/Nokora-Black.ttf');
}

@font-face {
    font-family: 'TenPixelBold';
    src: url('https://zzzcharacterbuilder.neocities.org/FONTS/10Pixel-Bold.ttf');
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
    background-image: url('https://zzzcharacterbuilder.neocities.org/ASSETS/bg_blackgray.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    overflow: hidden;    
    touch-action: none;
}

#logo {
    position: fixed;
    width: 5vw;      
    top: 87vh;           
    left: 94.5vw;   
    border-radius: 10px;
    z-index: 10;
}

#logo:active {
    transform: scale(0.95);
}

#logo:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

#character {
    position: fixed;
    width: 50vw;    
    top: 2vh;       
    left: 77vw;       
    transform: translateX(-50%);
    filter: drop-shadow(-2vw 1vw 6vw black);
}

#marquee-box {
    position: relative;
    top: 2vh;
    left: 36%;
    transform: translateX(-50%);
    width: 68vw;
    height: 8vh;
    background-color: black;
    background-image: 
        radial-gradient(circle at 2px 2px, 
            rgba(80, 80, 80, 0.3) 2px, 
            transparent 3px),
        radial-gradient(circle at 2px 2px, 
            rgba(50, 50, 50, 0.2) 1px, 
            transparent 2px);
    background-size: 8px 8px, 4px 4px;
    background-position: 0 0, 0 0;
    background-clip: padding-box;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    overflow: hidden;
    z-index: 5;
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.5),
        inset 0 0 15px rgba(0, 0, 0, 0.7);
    animation: led-flicker 2s infinite alternate;
}

@keyframes led-flicker {
    0% { 
        background-image: 
            radial-gradient(circle at 2px 2px, 
                rgba(100, 100, 100, 0.3) 2px, 
                transparent 3px),
            radial-gradient(circle at 2px 2px, 
                rgba(70, 70, 70, 0.2) 1px, 
                transparent 2px);
    }
    100% { 
        background-image: 
            radial-gradient(circle at 2px 2px, 
                rgba(80, 80, 80, 0.25) 2px, 
                transparent 3px),
            radial-gradient(circle at 2px 2px, 
                rgba(50, 50, 50, 0.15) 1px, 
                transparent 2px);
    }
}

.marquee-track {
    height: 100%;
    display: flex;
    animation: marquee 25s linear infinite;
    will-change: transform;
    align-items: center;
}

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-280%); }
}

.containerp1, .containerp2, .containerp3 {
    position: fixed;
    left: 1vw;
    color: white;
}

.containerp0 {
    display: flex;
    gap: 4em;
    padding: 0 2em;
    height: 100%;
    align-items: center;
}

.containerp1 {
    top: 15vh;
    left: 6vh;
}

.containerp2 {
    top: 7vh;
    left: 5vh;
}

.containerp3 {
    top: 94vh;
    left: 1vh;
    width: 50vw;
}

.button0-container {
    position: fixed;
    top: 70vh;
    left: 5vh;
    width: 50vw;
}

.button0 {
    width: 210px;
    height: 60px;
    background-color: black;
    border: 5px solid rgb(112, 0, 0);
    border-radius: 30px;
    color: rgb(112, 0, 0);
    font-family: NokoraBlack;
    font-size: 4vh;
    cursor: pointer;
    padding: 4px;
    transition: all 0.2s ease;
}

.button0:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
    background-color: rgb(112, 0, 0);
    border: 5px solid rgb(255, 0, 0);
    color: white;
}

.button0:active {
    transform: scale(0.95);
}

.button1-container {
    position: fixed;
    top: 70vh;
    left: 30vh;
    width: 50vw;
}

.button1 {
    width: 210px;
    height: 60px;
    background-color: black;
    border: 5px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    color: rgba(255, 255, 255, 0.1);
    font-family: NokoraBlack;
    font-size: 4vh;
    cursor: pointer;
    padding: 4px;
    transition: all 0.2s ease;
}

.button1:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 0.1);
    border: 5px solid rgb(51, 51, 51);
    color: white;
}

.button1:active {
    transform: scale(0.95);
}

.button2-container {
    position: fixed;
    top: 70vh;
    left: 55vh;
    width: 50vw;
}

.button2 {
    width: 250px;
    height: 60px;
    background-color: black;
    border: 5px solid rgb(0, 112, 24);
    border-radius: 30px;
    color: rgb(0, 112, 24);
    font-family: NokoraBlack;
    font-size: 4vh;
    cursor: pointer;
    padding: 4px;
    transition: all 0.2s ease;
}

.button2:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
    background-color: rgb(0, 112, 24);
    border: 5px solid rgb(0, 61, 13);
    color: white;
}

.button2:active {
    transform: scale(0.95);
}

.p0 {
    color: white;
    font-family: TenPixelBold;
    font-size: 5vh;
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
    text-shadow: 
        0 0 5px rgba(255,255,255,0.3),
        1px 1px 2px rgba(0,0,0,0.8);
    position: relative;
}

.p1 {
    color: rgba(255, 255, 255, 0.5);
    font-family: NokoraBlack;
    font-size: 3vw;
}

.p2 {
    color: white;
    font-family: TourneyBlack;
    font-size: 10vw;
    line-height: 1.0;
}

.p3 {
    color: rgba(255, 255, 255, 0.2);
    font-family: NokoraBlack;
    font-size: 0.65vw;
    line-height: 1.5;
    width: 100%;
    max-width: 90vw;
}