@font-face {
    font-family: 'CheekFont';
    src: url('WalterTurncoat.ttf') format('truetype'); /* Adjusted path */
    font-weight: normal;
    font-style: normal;
}

@media screen and (max-width: 499px) {

body {
    opacity: 0;

}

.body-fade-in {
    opacity: 1;
}

    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: background 1s ease-in-out;
        background-color: black;
    }

    .scene4-container {
        width: 800px;
        height: 500px;
        max-height: 100vh;
        max-height: 100vh; /* Limit height to viewport */
        max-width: 100vw; /* Limit width to viewport */
        position: relative; 
        background-color:   #4600e0;
        overflow-x: scroll;
        overflow-y: hidden; 
        white-space: nowrap; 
        box-sizing: content-box; 
        border-radius: 25px;
        z-index: 4;
        transition: background-color 2s ease-in-out;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }


    .scene4-container::-webkit-scrollbar {
        display: none;
    }

    .scene4-container {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    ::-webkit-scrollbar {
        width: 0px;
        background: white; /* make scrollbar transparent */
    }

    .building-container {
        transform: scale(0.75); 
        transform-origin: top left; 
        z-index: 10;
    }

    .background {
        z-index: -1;
        position: absolute;
       opacity: .6;
       height: 500px;
    }

    .projection {
        position: absolute;
        top: 57%; 
        left: 66.5%;
        width: 17%;
        z-index: 100;
        animation: growShrink 2s ease-in-out infinite; 
    }

    .buildings {
        position: relative;
        top: 100px;
        z-index: 3;
        display: inline-block; 
        width: 175px; 
        margin-right: 5px;
        margin-bottom: 0;
        animation: growShrink 3s ease-in-out infinite;
    }


    .pipes-area {
        position: absolute; 
        top: 65%; 
        width: 100%;
        height: 150px; 
    }

    #pipe2 {
        position: absolute;
        top: 100px; 
        left: 800px; 
    }

    @keyframes growShrink {
        0%, 100% {
            transform: scale(1); 
        }
        50% {
            transform: scale(1.02);
        }
    }

    .ladida {
            transform: rotate(1000deg);
    }

    .blank-slim {
        width:150px;
    }

    .gosh {
        width:150px;
    }

    .wingman {
        width: 200px;
    }

    .blank-slimmer {
        width: 250px;
        height: 400px;
    }

    .blank-crowdsurf {
        width:400px;
    }

    .ohconnor {
        height:400px;
    }


    .lamp {
        width: 50px;
        padding: 3px;
    }

    .cloud-container {
        position: absolute;
        top: 0; 
        width: 100%; /* Match the width of the scene container */
        height: 100%; /* Match the height of the scene container */
        z-index: 0; /* Adjust as needed to layer clouds behind or in front of buildings */
    }

    .cloud {
        position: absolute;
        width: 20%;
        animation: drift 20s linear infinite alternate;
        opacity: 0.5;

    }

    @keyframes drift {
        0% { transform: translateX(0); }
        100% { transform: translateX(-30%); } /* Adjust for visible movement */
    }

    .cloud1 {
        top: 5%; /* Adjust as needed */
        left: 10%; /* Adjust as needed */
        width: 30%;
    }

    .cloud2 {
        top: 15%; /* Adjust as needed */
        left: 70%; /* Adjust as needed */
        width: 28%;
    }

    .cloud3 {
        top: 7%; /* Adjust as needed */
        left: 100%; /* Adjust as needed */
    }

    .cloud4 {
        top: 10%; /* Adjust as needed */
        left: 170%; /* Adjust as needed */
        width: 24%;
    }

    .cloud5 {
        top: 10%; /* Adjust as needed */
        left: 200%; /* Adjust as needed */
        width: 22%;
    }

    .cloud6 {
        top: 1%; /* Adjust as needed */
        left: 240%; /* Adjust as needed */
        width: 22%;
    }

    .cloud7 {
        top: 8%; /* Adjust as needed */
        left: 290%; /* Adjust as needed */
        width: 23%;
    }

    .cloud8 {
        top: 17%; /* Adjust as needed */
        left: 360%; /* Adjust as needed */
        width: 22%;
    }

    .cloud9 {
        top: 20%; /* Adjust as needed */
        left: 400%; /* Adjust as needed */
        width: 20%;
    }

    .cloud10 {
        top: 18%; /* Adjust as needed */
        left: 460%; /* Adjust as needed */
        width: 20%;
    }




    #buildingVideo {
        position: absolute;
        z-index:1;
        object-fit: cover;
        bottom: 40px; 
        left: 2601px; 
        width: 112.5px;
        height: 385px;
        z-index: 5; 
        opacity: 0;
    }

    .secondslim {
        z-index : 10;
        transform: none !important;
        animation: none !important;
    }

    .fade-out {
        animation: fadeOut 2s;
        opacity: 0;
    }

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

    .fade-in {
        animation: fadeIn 2s forwards;
    }

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

    #aliceVideo-box {
        position: absolute;
        z-index:1;
        object-fit: cover;
        bottom: 39px; 
        left: 532px; 
        width: 134px;
        height: 138.95px;
        z-index: 5; 
        opacity: 0;
    }

    #up-full {
        position: absolute;
        z-index: 1;
        object-fit: cover;
        bottom: 37px; 
        left: 3872px; 
        width: 191px;
        height: 307px;
        z-index: 5; 
        opacity: 0;
    }


    #sunset {
        position: absolute;
        z-index:1;
        object-fit: cover;
        bottom: 39px; 
        left: 2996px; 
        width: 134px;
        height: 138.95px;
        z-index: 5; 
        opacity: 0;
    }

    #aliceVideo-Tall {
        position: absolute;
        z-index:1;
        object-fit: cover;
        bottom: 39px; 
        left: 948.5px; 
        width: 130px;
        height: 236.5px;
        z-index: 5; 
        opacity: 0;
    }

    #fightclubVideo-box {
        position: absolute;
        z-index:1;
        object-fit: cover;
        bottom: 37px; 
        left: 1684.6px; 
        width: 192px;
        height: 310px;
        z-index: 5; 
        opacity: 0;
    }

    .blank-jim {
        z-index : 10;
        transform: none !important;
        animation: none !important;
    }



    .blank-mister {
        z-index : 10;
        transform: none !important;
        animation: none !important;
    }

    @keyframes oscillateBackground {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
    }

    .new-background {
        z-index: -1;
        position: absolute;
        opacity: .6;
        height: 1000px;
        background-size: cover;
        opacity: 0; /* Start fully transparent */
        transition: opacity 2s ease-in-out; /* Transition for the fade effect */
        animation: oscillateBackground 8s infinite ease-in-out; /* Adjust duration as needed */

    }



    .circle-container {
            position: absolute;
            top: 50%;
            /* Calculate the left position */
            left: calc((100vw - 800px) / 4 - 21.5px); /* Half the width of .circle subtracted */
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 50px;
        }

        /* Styles for each circle */
        .circle {
            width: 43px; /* Circle size */
            height: 43px;
            background-color: #0065ce; /* Circle color */
            border-radius: 50%; /* Makes it round */
            cursor: pointer;
            transition: background-color 0.5s ease; /* Smooth transition for background color */
            position: relative; /* Position relative to allow absolute positioning inside */
            z-index: 1; /* Ensure it's above other elements */
        }

        /* Hover effect for circles */
        .circle:hover {
            background-color: #68c450; /* Color on hover */
        }

        /* Styles for the anchor tag inside each circle */
        .circle a.scene-button {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: transparent; /* No background color */
            border-radius: 50%; /* Maintain the round shape */
            z-index: 2; /* Ensure links are clickable */
            pointer-events: auto; /* Ensure they can be clicked */
        }

        .instruction-screen {
            position: absolute;
            top: 50%;
            right: calc((100vw - 800px) / 4 - 200px / 2); /* Adjusted for centering */
            width: 200px; /* Width of the rectangle */
            height: 335px; /* Height of the rectangle */
            background-color: white;
            z-index: 2;
            border-radius: 5px;
            transform: translateY(-50%);
            transition: opacity 2s ease-in-out;
            opacity: 1;
            display: flex; /* Flexbox for centering content */
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            text-align: center; /* Center text horizontally */
            overflow: hidden; /* Prevents text from overflowing */
        }

        .instruction-text {
            padding: 10px; /* Padding for the text */
            font-size: 24px; /* Adjust font size as needed */
            cursor: default;
            color: black;
            font-family: 'CheekFont', sans-serif;
        }

        .instructions-text-hidden {
            color: lightblue;
        }

        .instruction-text-right {
            color: #c0283c;
        }

        .pipes {
            position: absolute; /* Absolute positioning within the scene container */
            bottom: -5%; /* Adjust as needed to position correctly */
            left: -25%; /* Starting from the left edge of the container */
            width: 150%; /* Full width of the container */
            height: auto; /* Maintain aspect ratio */
            opacity: .8; /* Fully visible */
            z-index: 0; /* Ensure pipes are behind other content */

        }


        .side-building {
            z-index: 0;
            display: absolute;
        }
}


/* Desktop styles */
@media screen and (min-width: 500px) {

body {
    opacity: 0;

}

.body-fade-in {
    opacity: 1;
}

    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: background 1s ease-in-out;
        background-color: black;
    }

    .scene4-container {
        width: 800px;
        height: 500px;
        max-height: 100vh;
        max-width: calc(100vh * 16 / 9);
        min-width: 800px;
        position: relative; 
        background-color:   #4600e0;
        overflow-x: scroll;
        overflow-y: hidden; 
        white-space: nowrap; 
        box-sizing: content-box; 
        border-radius: 25px;
        z-index: 4;
        transition: background-color 2s ease-in-out;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .scene4-container::-webkit-scrollbar {
        display: none;
    }

    .scene4-container {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    ::-webkit-scrollbar {
        width: 0px;
        background: white; /* make scrollbar transparent */
    }

    .building-container {
        transform: scale(0.75); 
        transform-origin: top left; 
        z-index: 10;
    }

    .background {
        z-index: -1;
        position: absolute;
       opacity: .6;
       height: 500px;
    }

    .projection {
        position: absolute;
        top: 57%; 
        left: 66.5%;
        width: 17%;
        z-index: 100;
        animation: growShrink 2s ease-in-out infinite; 
    }

    .buildings {
        position: relative;
        top: 100px;
        z-index: 3;
        display: inline-block; 
        width: 175px; 
        margin-right: 5px;
        margin-bottom: 0;
        animation: growShrink 3s ease-in-out infinite;
    }


    .pipes-area {
        position: absolute; 
        top: 65%; 
        width: 100%;
        height: 150px; 
    }

    #pipe2 {
        position: absolute;
        top: 100px; 
        left: 800px; 
    }

    @keyframes growShrink {
        0%, 100% {
            transform: scale(1); 
        }
        50% {
            transform: scale(1.02);
        }
    }

    .ladida {
            transform: rotate(1000deg);
    }

    .blank-slim {
        width:150px;
    }

    .gosh {
        width:150px;
    }

    .wingman {
        width: 200px;
    }

    .blank-slimmer {
        width: 250px;
        height: 400px;
    }

    .blank-crowdsurf {
        width:400px;
    }

    .ohconnor {
        height:400px;
    }


    .lamp {
        width: 50px;
        padding: 3px;
    }

    .cloud-container {
        position: absolute;
        top: 0; 
        width: 100%; /* Match the width of the scene container */
        height: 100%; /* Match the height of the scene container */
        z-index: 0; /* Adjust as needed to layer clouds behind or in front of buildings */
    }

    .cloud {
        position: absolute;
        width: 20%;
        animation: drift 20s linear infinite alternate;
        opacity: 0.5;

    }

    @keyframes drift {
        0% { transform: translateX(0); }
        100% { transform: translateX(-30%); } /* Adjust for visible movement */
    }

    .cloud1 {
        top: 5%; /* Adjust as needed */
        left: 10%; /* Adjust as needed */
        width: 30%;
    }

    .cloud2 {
        top: 15%; /* Adjust as needed */
        left: 70%; /* Adjust as needed */
        width: 28%;
    }

    .cloud3 {
        top: 7%; /* Adjust as needed */
        left: 100%; /* Adjust as needed */
    }

    .cloud4 {
        top: 10%; /* Adjust as needed */
        left: 170%; /* Adjust as needed */
        width: 24%;
    }

    .cloud5 {
        top: 10%; /* Adjust as needed */
        left: 200%; /* Adjust as needed */
        width: 22%;
    }

    .cloud6 {
        top: 1%; /* Adjust as needed */
        left: 240%; /* Adjust as needed */
        width: 22%;
    }

    .cloud7 {
        top: 8%; /* Adjust as needed */
        left: 290%; /* Adjust as needed */
        width: 23%;
    }

    .cloud8 {
        top: 17%; /* Adjust as needed */
        left: 360%; /* Adjust as needed */
        width: 22%;
    }

    .cloud9 {
        top: 20%; /* Adjust as needed */
        left: 400%; /* Adjust as needed */
        width: 20%;
    }

    .cloud10 {
        top: 18%; /* Adjust as needed */
        left: 460%; /* Adjust as needed */
        width: 20%;
    }

    #buildingVideo {
        position: absolute;
        z-index:1;
        object-fit: cover;
        bottom: 40px; 
        left: 2601px; 
        width: 112.5px;
        height: 385px;
        z-index: 5; 
        opacity: 0;
    }

    .secondslim {
        z-index : 10;
        transform: none !important;
        animation: none !important;
    }

    .fade-out {
        animation: fadeOut 2s;
        opacity: 0;
    }

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

    .fade-in {
        animation: fadeIn 2s forwards;
    }

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

    #aliceVideo-box {
        position: absolute;
        z-index:1;
        object-fit: cover;
        bottom: 39px; 
        left: 532px; 
        width: 134px;
        height: 138.95px;
        z-index: 5; 
        opacity: 0;
    }

    #up-full {
        position: absolute;
        z-index: 1;
        object-fit: cover;
        bottom: 37px; 
        left: 3872px; 
        width: 191px;
        height: 307px;
        z-index: 5; 
        opacity: 0;
    }


    #sunset {
        position: absolute;
        z-index:1;
        object-fit: cover;
        bottom: 39px; 
        left: 2996px; 
        width: 134px;
        height: 138.95px;
        z-index: 5; 
        opacity: 0;
    }

    #aliceVideo-Tall {
        position: absolute;
        z-index:1;
        object-fit: cover;
        bottom: 39px; 
        left: 948.5px; 
        width: 130px;
        height: 236.5px;
        z-index: 5; 
        opacity: 0;
    }

    #fightclubVideo-box {
        position: absolute;
        z-index:1;
        object-fit: cover;
        bottom: 37px; 
        left: 1684.6px; 
        width: 192px;
        height: 310px;
        z-index: 5; 
        opacity: 0;
    }

    .blank-jim {
        z-index : 10;
        transform: none !important;
        animation: none !important;
    }


    .blank-mister {
        z-index : 10;
        transform: none !important;
        animation: none !important;
    }

    @keyframes oscillateBackground {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
    }

    .new-background {
        z-index: -1;
        position: absolute;
        opacity: .6;
        height: 1000px;
        background-size: cover;
        opacity: 0; /* Start fully transparent */
        transition: opacity 2s ease-in-out; /* Transition for the fade effect */
        animation: oscillateBackground 8s infinite ease-in-out; /* Adjust duration as needed */

    }



    .circle-container {
            position: absolute;
            top: 50%;
            /* Calculate the left position */
            left: calc((100vw - 800px) / 4 - 21.5px); /* Half the width of .circle subtracted */
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 50px;
        }

        /* Styles for each circle */
        .circle {
            width: 43px; /* Circle size */
            height: 43px;
            background-color: #0065ce; /* Circle color */
            border-radius: 50%; /* Makes it round */
            cursor: pointer;
            transition: background-color 0.5s ease; /* Smooth transition for background color */
            position: relative; /* Position relative to allow absolute positioning inside */
            z-index: 1; /* Ensure it's above other elements */
        }

        /* Hover effect for circles */
        .circle:hover {
            background-color: #68c450; /* Color on hover */
        }

        /* Styles for the anchor tag inside each circle */
        .circle a.scene-button {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: transparent; /* No background color */
            border-radius: 50%; /* Maintain the round shape */
            z-index: 2; /* Ensure links are clickable */
            pointer-events: auto; /* Ensure they can be clicked */
        }

        .instruction-screen {
            position: absolute;
            top: 50%;
            right: calc((100vw - 800px) / 4 - 200px / 2); /* Adjusted for centering */
            width: 200px; /* Width of the rectangle */
            height: 335px; /* Height of the rectangle */
            background-color: white;
            z-index: 2;
            border-radius: 5px;
            transform: translateY(-50%);
            transition: opacity 2s ease-in-out;
            opacity: 1;
            display: flex; /* Flexbox for centering content */
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            text-align: center; /* Center text horizontally */
            overflow: hidden; /* Prevents text from overflowing */
        }

        .instruction-text {
            padding: 10px; /* Padding for the text */
            font-size: 24px; /* Adjust font size as needed */
            cursor: default;
            color: black;
            font-family: 'CheekFont', sans-serif;
        }

        .instructions-text-hidden {
            color: lightblue;
        }

        .instruction-text-right {
            color: #c0283c;
        }

        .pipes {
            position: absolute; /* Absolute positioning within the scene container */
            bottom: -5%; /* Adjust as needed to position correctly */
            left: -25%; /* Starting from the left edge of the container */
            width: 150%; /* Full width of the container */
            height: auto; /* Maintain aspect ratio */
            opacity: .8; /* Fully visible */
            z-index: 0; /* Ensure pipes are behind other content */

        }


        .side-building {
            z-index: 0;
            display: absolute;
        }

        .tree {
        }

        .graphic-uchi {
            position: absolute;
            top: 50%;
            left: 6300px;
            transform: translate(-50%, -50%);
            z-index: 10; /* Adjust as needed to ensure it's above other elements */
            opacity: 0; /* Start invisible */
            transition: opacity 2s; /* Fade in effect */
            cursor: pointer;
        }

        .fade-out-graphic-uchi {
            opacity: 0;
            transition: opacity 2s ease-out;
        }

}