@font-face {
    font-family: 'Mina-Regular';
    src: url('Mina-Regular.ttf') format('truetype'); /* Update the path accordingly */
}

@font-face {
    font-family: 'Wellfleet';
    src: url('Wellfleet-Regular.ttf') format('truetype'); /* Update the path accordingly */
}

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

body {
    opacity: 0;
    animation: fadeIn 3s ease-in-out forwards;
}

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

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

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: #698ce2;
}

.scene4-container {
    max-height: 100vh;
    max-width: calc(100vh * 16 / 9);
    bottom: -20px;
    position: fixed;
    overflow: hidden;
    background-color:   #698ce2;
    transition: background-color 2s ease-in-out; /* 2 seconds transition for background color */
    }

.anothercontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh; /* Full viewport height */
}

.kitchen-wrapper {
    position: absolute;
    width: 80%; /* Width of kitchen-container as a percentage of its parent */
    min-width: 300px; /* Minimum width */
    min-height: 200px; /* Minimum height, adjust as needed */
    left: 50%;
    bottom: -6%;
    transform: translateX(-50%);
    --aspect-ratio: calc(4942 / 6883); /* Height / Width of the original stove image */
}



/* Styles for .stove-counter and .pan */
.stove-counter {
    position: absolute;
    bottom: 50px;
    left: -140px;
    width: 190%;
    height: 190%;
}

.pan {
    position: absolute;
    top: calc((2690 / 4942) * -83%);
    left: calc((2812 / 6883) * 42%);
    width: calc((2409 / 6883) * 185%);
    height: auto; /* Maintain aspect ratio */
    z-index: 100;
}

#clock-time {
    position: absolute;
    top: calc((2690 / 4942) * -108%); 
    left: calc((2812 / 6883) * 101%); /* Adjust this value if needed */
    /* Keep width and height if aspect ratio needs to be maintained */
    width: calc((2409 / 6883) * 5%);
    height: auto;
    z-index: 101;
    font-size: 13px; /* Use a fixed font size instead of .75vw */
    font-family: 'Mina-Regular', sans-serif;
    color: white;
}



.scene1-backdrop {
    position: absolute;
    width: 100vw;
    height: 100%;  
    overflow: hidden;
}

    .ingredient-container {
            position: absolute; /* Change to absolute */
            top: 80px;
            left: 0px;
            width: 100%; /* Full width of the parent container */
            height: 100%; /* Full height of the parent container */
            overflow: visible;
        }

        .ingredient {
            position: absolute;
            transition: transform 0.2s ease;
            cursor: pointer;
            z-index: 50;
            /* max-width: 16vh; Remove this or adjust as needed */
        }

        .ingredient-clicked {
            transform: scale(1.15); 
            transition: transform 0.2s ease; /* Smooth transition for the scaling effect */
        }

    #bread {
    top: 28%;
    left: 41%;
    width: 72px; /* 60px * 1.2 */
}

#eggs {
    top: 12%;
    left: 50%;
    width: 100px; /* 65px * 1.2 */
}

#fish {
    top: 9%;
    left: 40%;
    width: 100px; /* 60px * 1.2 */
}

#noodles {
    top: 10%;
    left: 22%;
    width: 60px; /* 50px * 1.2 */
    transform: rotate(28deg);

}

#longbeans {
    top: 23%;
    left: 63%;
    width: 84px; /* 70px * 1.2 */
}

#tomato {
    top: 19%;
    left: 45%;
    width: 54px; /* 45px * 1.2 */
}

#potato {
    top: 20%;
    left: 25%;
    width: 66px; /* 55px * 1.2 */
}

#grapefruitjuice {
    top: 20%;
    left: 10%;
    width: 60px; /* 50px * 1.2 */
}

#oranges {
    top: 25%;
    left: 26%;
    width: 60px; /* 50px * 1.2 */
}

#misopaste {
    top: 17.5%;
    left: 65%;
    width: 54px; /* 45px * 1.2 */
}

#left-side-span {
    position: absolute;
    max-width: 90%; /* Adjusted to take a maximum of 90% of the screen width */
    min-height: 50px; 
    left: 50%; /* Center horizontally */
    top: 10%;
    transform: translate(-50%, -50%); /* Center both horizontally and vertically */
    background-color: #fff380;
    font-family: 'Wellfleet', sans-serif;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
    white-space: normal;
    word-wrap: break-word;
    display: block; /* Changed to block to make it visible */
    z-index: 10; /* Ensure it is above other elements if necessary */
}

#mealImage {
    position: absolute;
    z-index: 10000;
}

#left-side-span, .mealImage {
    opacity: 0;
    transition: opacity 2s ease-in-out; /* Adjust duration as needed */
}

.meal-itame,
    .meal-sushi,
    .meal-sandwich,
    .meal-ramen {
        position: absolute;
        z-index: 10000;
        width: auto; /* Set the width to auto to maintain the aspect ratio */


    }

    .fade-in {
        opacity: 1 !important;
        transition: opacity 2s ease-in;
    }

    .fade-out {
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }

    /* Position the counter absolutely */
    .kitchen-wrapper {
        position: absolute;
        width: 80%; /* Width of kitchen-container as a percentage of its parent */
        min-width: 300px; /* Minimum width */
        min-height: 200px; /* Minimum height, adjust as needed */
        left: 50%;
        bottom: -6%;
        transform: translateX(-50%);
        --aspect-ratio: calc(4942 / 6883); /* Height / Width of the original stove image */
    }

    /* Adjust the positioning and size of each meal image using calc and individual sizes */
    .meal-itame {
        top: calc((2690 / 4942) * 35%);
        left: calc((2812 / 6883) * 68%);
        width: 40%;
        height: auto; /* Maintain aspect ratio */
        transform: rotate(25deg);
        opacity: 0;
    }

    .meal-sushi {
        top: calc((2690 / 4942) * 40%);
        left: calc((2812 / 6883) * 58%);
        width: 50%;
        height: auto; /* Maintain aspect ratio */
        transform: rotate(7deg);
        opacity: 0;
    }

    .meal-sandwich {
        top: calc((2690 / 4942) * 45%);
        left: calc((2812 / 6883) * 50%);
        width: 54%;
        height: auto; /* Maintain aspect ratio */
        position: absolute;
        opacity: 0;
    }

    .meal-ramen {
        top: calc((2690 / 4942) * 40%);
        left: calc((2812 / 6883) * 58%);
        width: 43%;
        height: auto; /* Maintain aspect ratio */
        position: absolute;
        opacity: 0;
    }

    #beverageImage {
        width: 14%;
        left: 170px;
        bottom: 170px;
        z-index: 10000;
        opacity: 0;
    }




}

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

    .scene4-container {
        opacity: 0;
        transition: opacity 4s ease-in-out; /* Adjust the duration as needed */
    }

    .scene4-container.fade-in {
        opacity: 1;
    }

    .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 */
        }

    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
    }


    @media screen and (min-resolution: 1dppx) {
    .scene4-container {
        width: 700px;
        height: 450px;
        max-height: 100vh;
        max-width: calc(100vh * 16 / 9);
        position: fixed;
        overflow: hidden;
        background-color:   #698ce2;
        border-radius: 5px;
        z-index: 4;

        }
    }

    @media screen and (min-resolution: 2dppx) {
    .scene4-container {
        width: 800px;
        height: 500px;
        max-height: 100vh;
        max-width: calc(100vh * 16 / 9);
        position: fixed;
        overflow: hidden;
        background-color:   #698ce2;
        border-radius: 25px;
        z-index: 4;

        }
    }


    @font-face {
        font-family: 'Mina-Regular';
        src: url('Mina-Regular.ttf') format('truetype'); /* Update the path accordingly */
    }

    @font-face {
        font-family: 'Wellfleet';
        src: url('Wellfleet-Regular.ttf') format('truetype'); /* Update the path accordingly */
    }



    #left-side-span {
        position: absolute;
        max-width: 200px; /* Maximum width that the span should take */
        min-height: 50px; /* Minimum height of the span */
        left: 20px;
        top: 20%;
        transform: translateY(-50%);
        background-color: #fff380;
        font-family: 'Wellfleet', sans-serif;
        border-radius: 8px;
        text-align: center; /* Justify the text */
       
        padding: 10px; /* Padding inside the span */
        box-sizing: border-box; /* Makes sure padding is included in width calculation */
        display: inline-block; /* Allows the span to grow in height as needed */
        white-space: normal; /* Allows text to wrap */
        word-wrap: break-word; /* Ensures long words do not overflow */
        display: none;
    }



    .anothercontainer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh; /* Full viewport height */
    }

    .kitchen-wrapper {
        position: absolute;
        width: 80%; /* Width of kitchen-container as a percentage of its parent */
        min-width: 300px; /* Minimum width */
        min-height: 200px; /* Minimum height, adjust as needed */
        left: 50%;
        bottom: -6%;
        transform: translateX(-50%);
        --aspect-ratio: calc(4942 / 6883); /* Height / Width of the original stove image */
    }

    .kitchen-container {
        width: 100%;
        padding-top: calc(100% * var(--aspect-ratio)); /* Aspect ratio */
        overflow: hidden;
        position: relative;
    }

    /* Styles for .stove-counter and .pan */
    .stove-counter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .pan {
        position: absolute;
        top: calc((2690 / 4942) * 68%);
        left: calc((2812 / 6883) * 78%);
        width: calc((2409 / 6883) * 100%);
        height: auto; /* Maintain aspect ratio */
        z-index: 100;
    }

/*    .clock {
        position: absolute;
        top: calc((2690 / 4942) * 55.3%);
        left: calc((2812 / 6883) * 117.2%);
        width: calc((2409 / 6883) * 9%);
        height: auto; 
        z-index: 100;
    }*/

    @media screen and (min-resolution: 1dppx) {
    #clock-time {
        position: absolute;
        top: calc((2690 / 4942) * 53.6%); /* Adjust this value if needed */
        left: calc((2812 / 6883) * 114.2%); /* Adjust this value if needed */
        /* Keep width and height if aspect ratio needs to be maintained */
        width: calc((2409 / 6883) * 5%);
        height: auto;
        z-index: 101;
        font-size: 2.8vh;
        font-family: 'Mina-Regular', sans-serif;
        color: white;
    }
}
    @media screen and (min-resolution: 2dppx) {
    #clock-time {
        position: absolute;
        top: calc((2690 / 4942) * 54.5%); 
        left: calc((2812 / 6883) * 114%); /* Adjust this value if needed */
        /* Keep width and height if aspect ratio needs to be maintained */
        width: calc((2409 / 6883) * 5%);
        height: auto;
        z-index: 101;
        font-size: 15.4px; /* Use a fixed font size instead of .75vw */
        font-family: 'Mina-Regular', sans-serif;
        color: white;
    }
}

    .ingredient-container {
            position: absolute; /* Change to absolute */
            top: 0;
            left: 35px;
            width: 100%; /* Full width of the parent container */
            height: 100%; /* Full height of the parent container */
            overflow: visible;
        }

        .ingredient {
            position: absolute;
            transition: transform 0.2s ease;
            cursor: pointer;
            z-index: 50;
            /* max-width: 16vh; Remove this or adjust as needed */
        }

        .ingredient-clicked {
            transform: scale(1.15); 
            transition: transform 0.2s ease; /* Smooth transition for the scaling effect */
        }

    #bread {
    top: 28%;
    left: 41%;
    width: 72px; /* 60px * 1.2 */
}

#eggs {
    top: 8%;
    left: 48%;
    width: 100px; /* 65px * 1.2 */
}

#fish {
    top: 5%;
    left: 40%;
    width: 100px; /* 60px * 1.2 */
}

#noodles {
    top: 10%;
    left: 30%;
    width: 60px; /* 50px * 1.2 */
}

#longbeans {
    top: 23%;
    left: 55.5%;
    width: 84px; /* 70px * 1.2 */
}

#tomato {
    top: 20%;
    left: 51%;
    width: 54px; /* 45px * 1.2 */
}

#potato {
    top: 18%;
    left: 38%;
    width: 66px; /* 55px * 1.2 */
}

#grapefruitjuice {
    top: 20%;
    left: 24%;
    width: 60px; /* 50px * 1.2 */
}

#oranges {
    top: 25%;
    left: 32%;
    width: 60px; /* 50px * 1.2 */
}

#misopaste {
    top: 15%;
    left: 58%;
    width: 54px; /* 45px * 1.2 */
}

#mealImage {
    position: absolute;
    z-index: 10000;
}

#left-side-span, .mealImage {
    opacity: 0;
    transition: opacity 2s ease-in-out; /* Adjust duration as needed */
}

.meal-itame,
    .meal-sushi,
    .meal-sandwich,
    .meal-ramen {
        position: absolute;
        z-index: 10000;
        width: auto; /* Set the width to auto to maintain the aspect ratio */
    }

    .fade-in {
        opacity: 1 !important;
        transition: opacity 0.5s ease-in;
    }

    .fade-out {
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }

    /* Position the counter absolutely */
    .kitchen-wrapper {
        position: absolute;
        width: 80%; /* Width of kitchen-container as a percentage of its parent */
        min-width: 300px; /* Minimum width */
        min-height: 200px; /* Minimum height, adjust as needed */
        left: 50%;
        bottom: -6%;
        transform: translateX(-50%);
        --aspect-ratio: calc(4942 / 6883); /* Height / Width of the original stove image */
    }

    /* Adjust the positioning and size of each meal image using calc and individual sizes */
    .meal-itame {
        top: calc((2690 / 4942) * 72%);
        left: calc((2812 / 6883) * 155%);
        width: 15%;
        height: auto; /* Maintain aspect ratio */
        transform: rotate(25deg);
        opacity: 0;
    }

    .meal-sushi {
        top: calc((2690 / 4942) * 90%);
        left: calc((2812 / 6883) * 147%);
        width: 18%;
        height: auto; /* Maintain aspect ratio */
        transform: rotate(7deg);
        opacity: 0;
    }

    .meal-sandwich {
        top: calc((2690 / 4942) * 95%);
        left: calc((2812 / 6883) * 150%);
        width: 17%;
        height: auto; /* Maintain aspect ratio */
        position: absolute;
        opacity: 0;
    }

    .meal-ramen {
        top: calc((2690 / 4942) * 80%);
        left: calc((2812 / 6883) * 150%);
        width: 14%;
        height: auto; /* Maintain aspect ratio */
        position: absolute;
        opacity: 0;
    }

    #beverageImage {
        width: 14%;
        left: 170px;
        bottom: 170px;
        z-index: 10000;
        opacity: 0;
    }

    .instruction-screen {
        position: absolute;
        top: 50%;
        right: calc((100vw - 800px) / 4 - 200px / 2); /* Adjusted for centering */
        width: 200px; /* Width of the rectangle */
        height: 350px; /* Height of the rectangle */
        background-color: white;
        z-index: 1;
        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: #b8d695;
    }

}