@font-face {
    font-family: "PixelFont", monospace;
    src: url("PixelCode.woff2") format("woff2");
}

@font-face {
    font-family: 'PixelCode';
    src: local('PixelCode'),
        url('PixelCode.woff2') format('woff2'),
        url('PixelCode.ttf') format('truetype');
        text-transform: uppercase;
}



@font-face {
    font-family: 'Antilag';
    src: local('Antilag'),
        url('Antilag.woff2') format('woff2');
        url('Antilag.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mondwest';
    src: local('Mondwest'),
        url('PPMondwest-Regular.woff2') format('woff2'),
        url('PPMondwest-Regular.otf') format('otf');
        text-transform: uppercase;
}


@font-face {
    font-family: 'RetroByte';
    src: local('RetroByte'),
        url('RetroByte.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NeueBit-Bold';
    src: local('NeueBit-Bold'),
        url('PPNeueBit-Bold.woff2') format('woff2');
}



.content {
            z-index: 5;
            position: relative;
            background: rgba(0, 0, 0, 0);
            width: auto;
        }

        .fuzzy-overlay {
            position: fixed;
            background-position-y: top;
            inset: -250%;
            background-image: url("noise.png");
            opacity: 15%;
            z-index: 1;
            pointer-events: none;

            animation: shift 0.2s linear infinite both;
        }
        
        @keyframes shift {
            0% {
                transform: translateX(10%) translateY(10%);
            }

            100% {
                transform: translateX(-10%) translateY(-10%);
            }
        }


body {
    background-color: black;
    font-size: 24px;
    color: #F5F5F5;
    font-family: 'RetroByte', monospace;
    text-align: center;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    margin-top: 0;
}

/* Responsive container */
.container {
    border: 3px solid #F5F5F5;
    text-align: center;
    margin: 5vh 5vw;
    padding: 30px 40px;
    min-height: 85vh;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.fuzzcontainer {
    position: relative;
    min-height: 100vh;
}

/* Green highlight */
.highlight {
    color: #F5F5F5;
    font-weight: bold;
}

/* Fading effect for John Brown's image */
.john-brown {
    width: auto;
    height: 35vh;
    image-rendering: pixelated;
    display: block;
    margin: 20px auto;
    opacity: 1;
    animation: fadeIn 2s ease-in-out forwards;

}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* Responsive text */
.dialogue {
    line-height: 1;
    margin: 40px;
    display: block; 
}



/* Adjust text for smaller screens */
@media (max-width: 600px) {
    .dialogue {
        font-size: 18px;
        display: block;
    }
}

.intro {
    margin: 10px 0;
    line-height: 1.4;
}

.question {
    display: inline-block;
    max-width: 600px;
    margin: 10px auto;
    line-height: 1.3;
}

/* Italicized quote */
.quote {
    font-style: italic;
    color: #00ffaa;
    font-family: 'Antilag';
    font-size: 18px;
}

/* Choice buttons */
.choices {
    margin-top: 2vh;
}

.choice {
    display: block;
    color: #00ffaa;
    font-weight: bold;
    font-size: 18px;
    margin: 10px 0;
    text-decoration: none;
    font-family: 'PixelCode';
}

/* Adjust text for smaller screens */
@media (max-width: 800px) {
    .choice {
        font-size: 24px;
    }

    .container {
        border: none;
        margin: 2vh 15px;
        padding: 20px 15px;
    }

    body {
        font-size: 24px;
    }

    .fuzzy-overlay {
        display: none;
    }

    .fuzzcontainer {
        position: relative;
        overflow: hidden;
        min-height: auto;
    }

    .content {
        height: auto;
        max-width: 700px;
    }
}

/* Hover effect */
.choice:hover {
    color: #ff0000;
    transition: 0.3s;
}