body {
            background-color: black;
            color: white;
            text-align: center;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            font-family: "Jersey 10", sans-serif;

        }

        #content {
            width: 100%;
            max-width: 200%;
            padding-top: 5%;
            margin: auto;
        }

        #image-container {
            justify-content: center;
            align-items: center;
            border: 8px solid white;
            height:fit-content;
            border-radius: 10px;
            margin-bottom: 20px;
            max-width: 25%;
            margin: 0 auto;
            transition: transform 1s linear;
            font-size: 0;
        }

        #image-container img {
            width: 100%;
            max-width: 200%;
            transition: transform 1s linear; 
            image-rendering: -moz-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: pixelated;
            -ms-interpolation-mode: nearest-neighbor;
            font-size: 0;
        }

        #text {
            font-size: 1.5em;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }

        .choice-button {
            font-family: "Jersey 10", sans-serif;

            display: inline-block;
            padding: 15px 25px;
            margin: 10px;
            background-color: white;
            color: black;
            /* font-weight: bold; */
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: transform 0.5s, opacity 0.5s, top .5s;
            position: relative;
            font-size: 1.5em;
            max-width: 90%;
            white-space: normal;
            word-wrap: break-word;
            transition: opacity 0.5s steps(5), top 1s steps(5);
        }

        .data-button {
            font-family: "Jersey 10", sans-serif;
            display: inline-block;
            padding: 10px 20px;
            margin: 5px;
            background-color: white;
            color: black;
            /* font-weight: bold; */
            border: none;
            border-radius: 25px;
            cursor: pointer;
            position: relative;
            font-size: 1.25em;
            max-width: 90%;
            white-space: normal;
            word-wrap: break-word;
        }

        /* Responsive adjustments */
        @media (max-width: 600px) {
            #content {
                width: 80%;
                /* max-width: 200%; */
                padding-top: 7%;
                margin: 0;

            }

            #image-container {
                max-width:80%; /* Allows container to be full width */
            }

            #text {
                font-size: 1.7em;
                padding: 5px;
            }

            .choice-button {
                padding: 5px 15px;
                font-size: 1.25em;
            }
            .data-button {
                padding: 5px 15px;
                font-size: 1em;
            }
        }

        /* Button animations */
        .choice-button.clicked {
            transform: scale(1.5);
            animation: scaleUpSteps 0.5s steps(3);

        }

        .hidden {
            /* opacity: 0; */
            transform: scale(0.5);
            animation: scaleDownSteps 0.5s steps(3);

        }

        /* Slide animations */
        #content {
            transition: transform 1s steps(10);
            will-change: transform;
        }


        .move-off-screen-left {
            transform: translateX(-120%);
        }

        .slide-out-to-right {
            transform: translateX(120%);
        }

        .slide-in-from-left {
            transform: translateX(0);
        }

        .no-transition {
            transition: none !important;
        }

        @keyframes scaleUpSteps {
            0% { transform: scale(1); }
            50% { transform: scale(1.25); }
            100% { transform: scale(1.5); }
        }

        @keyframes scaleDownSteps {
            0% { transform: scale(1); }
            50% { transform: scale(0.75); }
            100% { transform: scale(0.5); }
        }