.index-page {
        margin: 0;
    }
    /* typography */
    
    @font-face {
        font-family: 'ZT Formom';
        src: url('fonts/zt-formom.woff') format('woff'), url('fonts/zt-formom-italic.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'Mali';
        src: url(fonts/Mali-Regular.woff) format('woff'), url(fonts/Mali-Bold.woff) format('woff');
        font-weight: normal;
        font-style: normal;
    }
    /* index */
    
    .bg-video {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }
    
    .video-controls {
        position: fixed;
        bottom: 20px;
        left: 20px;
        opacity: 60%;
        z-index: 1001;
    }
    
    .video-controls button {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }
    
    .logo {
        position: fixed;
        top: 0;
        width: 25vw;
        z-index: 1000;
    }
    /* menu and add to favourite */
    
    .top-right-icons {
        position: fixed;
        top: 10%;
        right: 4%;
        display: flex;
        gap: 5vw;
        z-index: 1000;
    }
    
    .icon {
        width: 33px;
        height: 33px;
        cursor: pointer;
        transition: transform 0.3s ease-in-out;
    }
    
    .icon:hover {
        transform: scale(1.2);
    }
    /* navigation buttons */
    
    .nav-buttons {
        position: fixed;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 150px;
        align-items: center;
    }
    
    .nav-button {
        width: 167.05px;
        height: 69px;
        border-radius: 34px;
        background-color: #FFF4E4;
        border: 2px solid #609569;
        box-shadow: 3px 8px 0px #609569;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'ZT Formom', sans-serif;
        font-size: 24px;
        text-transform: uppercase;
        color: #609569;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    .nav-button a {
        text-decoration: none;
        color: #609569;
        font-size: inherit;
        font-family: inherit;
        transition: color 0.3s ease;
    }
    
    .nav-button:hover {
        background-color: #DFB81A;
    }
    
    .nav-button:hover a {
        color: #FFF4E4;
    }
    /* inside menu bar */
    
    #menu-bar {
        position: fixed;
        top: 0;
        right: -50vw;
        width: 50vw;
        height: 100vh;
        background-color: #222223;
        transition: right 0.5s ease-in-out;
        box-shadow: -10px 0 20px rgba(0, 0, 0, 0.5);
        z-index: 1002;
    }
    
    .menu-content {
        position: absolute;
        top: 180px;
        left: 10%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .menu-item {
        font-family: 'ZT Formom', sans-serif;
        font-size: 80px;
        color: #F4D760;
        text-decoration: none;
        line-height: 150px;
        display: block;
    }
    
    .sub-menu {
        padding-left: 60px;
    }
    
    .sub-item {
        font-family: 'ZT Formom', sans-serif;
        font-size: 50px;
        color: #FFFFFF;
        text-decoration: none;
        line-height: 80px;
        display: block;
    }
    
    .sub-item:last-child {
        line-height: 80px;
    }
    
    .menu-open {
        right: 0 !important;
    }
    
    #home-icon {
        position: absolute;
        top: 70px;
        left: 10%;
        width: 45px;
        height: 45px;
        cursor: pointer;
        transition: transform 0.2s ease-in-out;
    }
    
    #home-icon:hover {
        transform: scale(1.2);
    }
    
    #close-menu {
        position: absolute;
        top: 70px;
        right: 70px;
        width: 33px;
        height: 33px;
        cursor: pointer;
        transition: transform 0.3s ease-in-out;
    }
    
    #close-menu:hover {
        transform: scale(1.2);
    }
    
    .menu-bottom {
        position: absolute;
        bottom: 40px;
        left: 10%;
        width: 80%;
        display: flex;
        align-items: left;
        justify-content: space-between;
    }
    /* garnished rim */
    
    .rim-image {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: auto;
        z-index: 999;
    }
    /* recipes page */
    
    .recipes-page {
        margin: 0;
        background-image: url('images/seline.png');
        background-size: cover;
        background-position: center calc(50% - 10vw);
        background-attachment: fixed;
        background-repeat: no-repeat;
    }
    
    .recipes-text {
        position: absolute;
        bottom: 52vh;
        left: 4vw;
        font-family: 'ZT Formom', sans-serif;
        font-size: 5.2vw;
        text-transform: uppercase;
        color: #F4EFE8;
        letter-spacing: 2px;
    }
    
    .bite-nav-button {
        position: absolute;
        left: 2%;
        top: 58%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-left: 20px;
        z-index: 1000;
        width: 20%;
        height: 69px;
        border-radius: 34px;
        background-color: #FFF4E4;
        border: 2px solid #609569;
        box-shadow: 3px 8px 0px #609569;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'ZT Formom', sans-serif;
        font-size: 24px;
        text-transform: uppercase;
        color: #609569;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
        z-index: 2000;
    }
    
    .sip-nav-button {
        position: absolute;
        left: 2%;
        top: 70%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-left: 20px;
        z-index: 1000;
        width: 20%;
        height: 69px;
        border-radius: 34px;
        background-color: #FFF4E4;
        border: 2px solid #609569;
        box-shadow: 3px 8px 0px #609569;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'ZT Formom', sans-serif;
        font-size: 24px;
        text-transform: uppercase;
        color: #609569;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
        z-index: 2000;
    }
    
    .bite-nav-button:hover {
        background-color: #F4D760;
        color: #FFF4E4;
    }
    
    .sip-nav-button:hover {
        background-color: #F4D760;
        color: #FFF4E4;
    }
    
    .bite-image {
        position: fixed;
        right: 12vw;
        top: 63%;
        transform: translateY(-50%);
        height: auto;
        width: 27vw;
        transition: transform 0.3s ease-in-out;
    }
    
    .bite-nav-button:hover+#bite-img {
        transform: translateY(-50%) rotate(45deg);
    }
    
    .sip-image {
        position: fixed;
        left: 26vw;
        top: 50%;
        transform: translateY(-50%);
        height: auto;
        width: 38vw;
        transition: transform 0.3s ease-in-out;
    }
    
    .sip-nav-button:hover+#sip-img {
        transform: translateY(-50%) rotate(30deg);
    }
    /* about page */
    
    .about-page {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        background-image: url('images/about_seline.jpg');
        background-size: cover;
        background-position: center calc(50% - 10vw);
        background-attachment: fixed;
        background-repeat: no-repeat;
    }
    
    #mobile-recipes-img-nav {
        display: none;
    }
    
    .container {
        min-height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .wrapper {
        position: relative;
        top: 0px;
        bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        max-width: 800px;
    }
    
    .envelope {
        width: 100%;
    }
    
    .letter {
        position: absolute;
        width: 105%;
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 1s ease-out, transform 1s ease-out;
        z-index: 2;
    }
    
    .letter.show {
        opacity: 1;
        transform: translateY(-30px);
    }
    
    .hidden {
        opacity: 0;
        pointer-events: none;
    }
    /* have a bite */
    
    .have-a-bite-bg {
        margin: 0;
        overflow-x: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        object-fit: cover;
        z-index: -1;
        filter: brightness(0.8);
        box-sizing: border-box;
    }
    /* back to recipes button */
    
    .back-to-recipes-btn {
        position: absolute;
        top: 55%;
        left: 10%;
        width: 120px;
        height: 5vh;
        border: 2px solid #FFF1C2;
        background-color: transparent;
        color: #FFF1C2;
        font-family: 'ZT Formom', sans-serif;
        font-size: 18px;
        border-radius: 34px;
        text-align: center;
        line-height: 39px;
        text-decoration: none;
        opacity: 1;
        transition: all 0.3s ease;
        z-index: 997;
    }
    
    .back-to-recipes-btn:hover {
        background-color: #609569;
        opacity: 1;
    }
    
    .inner-line {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: #FFF1C2;
    }
    
    .inner-line-left {
        left: 10.5%;
        top: 65%;
        bottom: 10%;
    }
    
    .middle-left-text {
        position: absolute;
        top: 45%;
        left: 10%;
        transform: translateY(-50%);
        font-size: 150px;
        font-family: 'ZT Formom', sans-serif;
        color: #FFF1C2;
    }
    
    .bottom-left-text {
        position: absolute;
        bottom: 2%;
        left: 10%;
        transform: translateY(-50%);
        font-size: 2.1vw;
        font-family: 'ZT Formom', sans-serif;
        color: #FFF1C2;
    }
    
    .polaroid-container {
        position: relative;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 20vh;
        margin-top: 20vh;
    }
    
    .polaroid {
        position: absolute;
        width: 150px;
        background: transparent;
        transform: rotate(var(--rotate));
        padding: 10px;
        text-align: center;
    }
    
    .polaroid img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    .caption {
        margin-top: 10px;
        font-size: 14px;
    }
    
    .info-box {
        background: white;
        font-family: 'Mali';
        padding: 10px;
        max-width: 300px;
        max-height: 280px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        font-size: 12px;
    }
    
    .stars {
        color: #000;
        font-size: 14px;
    }
    
    .polaroid1 {
        top: 0;
        left: 10%;
        width: 380px;
        --rotate: -15deg;
    }
    
    .info1 {
        top: 10%;
        left: 0;
        rotate: 10deg;
    }
    
    .polaroid2 {
        top: 15%;
        left: 70%;
        width: 300px;
        --rotate: 12deg;
    }
    
    .info2 {
        top: 40%;
        right: 50%;
        rotate: -15deg;
    }
    
    .polaroid3 {
        top: 40%;
        left: 20%;
        --rotate: -10deg;
    }
    
    .info3 {
        top: 60%;
        left: 30%;
        rotate: 15deg;
    }
    
    .polaroid img {
        transition: transform 0.3s ease;
    }
    
    .polaroid1:hover img {
        transform: scale(1.05) rotate(20deg);
    }
    
    .polaroid2:hover img {
        transform: scale(1.05) rotate(-20deg);
    }
    
    .info1 {
        transition: transform 0.3s ease;
    }
    
    .info1:hover {
        transform: scale(1.03) rotate(-20deg);
    }
    
    .info2 {
        transition: transform 0.3s ease;
    }
    
    .info2:hover {
        transform: scale(1.03) rotate(20deg);
    }
    
    .polaroid1,
    .polaroid2,
    .polaroid3,
    .polaroid4,
    .polaroid5 {
        transition: transform 0.3s ease;
    }
    
    .info1:hover~.polaroid1 {
        transform: scale(1.05) rotate(20deg);
    }
    
    .info2:hover~.polaroid2 {
        transform: scale(1.05) rotate(-20deg);
    }
    
    .info3:hover~.polaroid3 {
        transform: scale(1.05) rotate(20deg);
    }
    
    .info4:hover~.polaroid4 {
        transform: scale(1.05) rotate(-20deg);
    }
    
    .info5:hover~.polaroid5 {
        transform: scale(1.05) rotate(20deg);
    }
    /* music player generator */
    
    .music-bar {
        position: relative;
        bottom: -200px;
        width: 100%;
        height: 8vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 30px;
        gap: 10px;
        background: #609569;
        box-sizing: border-box;
        border-top: 2px solid #444;
    }
    
    .music-text {
        bottom: -10px;
        position: relative;
        font-family: 'Zt Formom', sans-serif;
        font-size: 20px;
        color: #fff;
        max-width: 50%;
    }
    
    .music-players {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 10px;
        width: 100%;
    }
    
    .music-player {
        width: 278px;
        height: 75px;
        background: #fff;
        border: 2px solid #000000;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    
    .track-name {
        font-family: 'ZT Formom', sans-serif;
        font-size: 15px;
        margin-bottom: 10px;
    }
    
    .volume-bar {
        position: relative;
        bottom: 10px;
        width: 234px;
        height: 3px;
        background: black;
        cursor: pointer;
    }
    
    .volume-handle {
        position: absolute;
        top: -8px;
        width: 10px;
        height: 20px;
        background: #FFF1C2;
        border: 2px solid black;
        cursor: pointer;
    }
    
    .food-container {
        position: relative;
        top: 200px;
    }
    
    .back-to-has-btn {
        position: absolute;
        top: 7%;
        right: 10%;
        width: 150px;
        height: 5vh;
        border: 2px solid #000000;
        background-color: transparent;
        color: #000000;
        font-family: 'ZT Formom', sans-serif;
        font-size: 18px;
        border-radius: 34px;
        text-align: center;
        line-height: 39px;
        text-decoration: none;
        opacity: 1;
        transition: all 0.3s ease;
        z-index: 997;
    }
    
    .back-to-has-btn:hover {
        background-color: #FFF1C2;
        opacity: 1;
    }
    
    .food-container-sesame {
        position: relative;
        top: 200px;
        margin-bottom: 20px;
    }
    
    .food-title {
        font-family: 'ZT Formom', sans-serif;
        font-size: 70px;
        color: black;
        margin-bottom: 0.5rem;
    }
    
    .food-difficulty {
        font-family: 'ZT Formom', sans-serif;
        font-size: 35px;
        color: black;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .food-stars {
        font-size: 35px;
        color: rgb(0, 0, 0);
    }
    
    .food-main-content {
        display: flex;
        justify-content: space-between;
        margin-top: 2rem;
        flex-wrap: wrap;
        z-index: 10;
    }
    
    .food-left-column {
        width: 35%;
    }
    
    .food-video-section {
        width: 60%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    
    .food-video-section video {
        width: 70%;
        max-width: 100%;
        border-radius: 12px;
        margin-top: 2rem;
        border: #000000 2px solid;
    }
    
    .food-yellow-box {
        padding: 1.5rem;
        border-radius: 12px;
        line-height: 13px;
        margin-bottom: 1.5rem;
        font-family: 'mali', sans-serif;
        z-index: 10;
    }
    
    .food-yellow-box h3 {
        font-size: 23px;
        margin-bottom: 1rem;
    }
    
    .food-yellow-box ul {
        padding-left: 1.5rem;
        z-index: 10;
    }
    
    .food-yellow-box li {
        margin-bottom: 0.75rem;
        font-size: 14px;
        line-height: 1.6;
        z-index: 10;
    }
    /* stickers on individual recipe page */
    
    .sticker {
        position: absolute;
        z-index: 9;
        pointer-events: auto;
        transition: transform 0.3s ease;
    }
    
    .sticker-beef {
        width: 180px;
        height: auto;
        top: 20vh;
        left: 30vw;
    }
    
    .sticker-tomato {
        width: 180px;
        height: auto;
        top: 78vh;
        left: 23vw;
    }
    
    .sticker-carrot {
        width: 150px;
        height: auto;
        bottom: 20vh;
        left: 35vw;
        rotate: 30deg;
    }
    
    .sticker-wine {
        width: 320px;
        height: auto;
        top: 32vh;
        left: 13vw;
        rotate: -10deg;
    }
    
    .sticker-basil {
        width: 320px;
        height: auto;
        top: 25vh;
        left: 20vw;
    }
    
    .sticker-xeng {
        width: 400px;
        height: auto;
        top: 60vh;
        left: 27vw;
    }
    
    .sticker-egg {
        width: 350px;
        height: auto;
        bottom: 3vh;
        left: 20vw;
    }
    
    .sticker-milk {
        width: 340px;
        height: auto;
        top: 28vh;
        left: 20vw;
        rotate: 10deg;
    }
    
    .sticker-chasen {
        width: 500px;
        height: auto;
        top: 60vh;
        left: 28vw;
    }
    
    .sticker-chawan {
        width: 350px;
        height: auto;
        bottom: 5vh;
        left: 20vw;
    }
    
    .sticker-milk2 {
        width: 350px;
        height: auto;
        top: 46vh;
        left: 13vw;
    }
    
    .sticker-coffee {
        width: 300px;
        height: auto;
        top: 25vh;
        left: 25vw;
    }
    
    .sticker-cup {
        width: 450px;
        height: auto;
        bottom: 40vh;
        left: 22vw;
    }
    
    .sticker-spoon {
        width: 350px;
        height: auto;
        bottom: 5vh;
        left: 5vw;
    }
    
    .sticker:hover {
        transform: scale(1.2) rotate(20deg);
    }
    /* mobile view */
    
    @media (max-width: 768px) {
        .logo {
            width: 50vw;
        }
        #menu-bar {
            position: fixed;
            top: 0;
            right: -100vw;
            width: 100vw;
            height: 100vh;
            background-color: #222223;
            transition: right 0.5s ease-in-out;
            box-shadow: -10px 0 20px rgba(0, 0, 0, 0.5);
            z-index: 1001;
        }
        .menu-content {
            top: 15vh;
            left: 5%;
        }
        .keep-in-touch {
            font-family: 'Mali', sans-serif;
            font-weight: 500;
            font-style: italic;
            font-size: 18px;
            line-height: 22px;
            color: #FFFFFF;
        }
        .menu-bottom {
            left: 5%;
        }
        #home-icon {
            left: 5%;
        }
        .nav-buttons {
            flex-direction: column;
            gap: 20px;
        }
        .recipes-page {
            background-position: center;
        }
        .rim-image {
            position: fixed;
            top: 0;
            width: 200vw;
            height: auto;
            z-index: 999;
        }
        .bite-nav-button {
            position: static;
            width: 80%;
            margin: 10px 0;
            text-align: center;
            margin: 0 auto;
        }
        .sip-nav-button {
            position: static;
            width: 80%;
            margin: 0 auto;
            margin-top: 20px;
        }
        .bite-image {
            display: none;
        }
        .sip-image {
            display: none;
        }
        .recipes-text {
            position: absolute;
            bottom: 57vh;
            left: 25vw;
            font-family: 'ZT Formom', sans-serif;
            font-size: 13vw;
            text-transform: uppercase;
            color: #F4EFE8;
            letter-spacing: 2px;
        }
        .mobile-spacer {
            height: 50vh;
        }
        #mobile-recipes-img-nav {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        .mobile-bite-image {
            margin-top: -100px;
            width: 60%;
            height: auto;
            object-fit: contain;
        }
        .mobile-sip-image {
            margin-top: -180px;
            width: 80%;
            height: auto;
            object-fit: contain;
        }
        .mobile-adjust-height {
            height: 50vh;
        }
        .middle-left-text {
            font-size: 60px;
            top: 35%;
        }
        .inner-line-left {
            display: none;
        }
        .back-to-recipes-btn {
            position: absolute;
            top: 40%;
            left: 10%;
            width: 70px;
            height: 27px;
            font-size: 10px;
            line-height: 28px;
        }
        .bottom-left-text {
            display: none;
        }
        .polaroid-container {
            margin-top: -40vh;
        }
        .polaroid1 {
            top: 0;
            left: 10%;
            width: 280px;
            --rotate: -15deg;
        }
        .polaroid1,
        .info1,
        .polaroid2,
        .info2,
        .polaroid3,
        .info3,
        .polaroid4,
        .info4,
        .polaroid5,
        .info5 {
            position: static !important;
            top: unset !important;
            left: unset !important;
            transform: none !important;
            --rotate: 0deg;
            margin: 1rem auto;
        }
        .polaroid-container {
            gap: 2vh;
        }
        .music-bar {
            flex-direction: column;
            height: auto;
            padding: 20px;
            gap: 20px;
            text-align: center;
        }
        .music-text {
            font-size: 24px;
            max-width: 100%;
            line-height: 1.3;
        }
        .music-players {
            flex-direction: column;
            align-items: center;
        }
        .music-player {
            width: 278px;
            height: 75px;
        }
        .volume-bar {
            width: 100%;
        }
        button {
            font-size: 25px;
            margin: 10px 5px;
        }
        .food-main-content {
            flex-direction: column;
        }
        .food-left-column {
            width: 100%;
        }
        .back-to-has-btn {
            position: absolute;
            top: 9%;
            right: 0;
            width: 110px;
            height: 5vh;
            border: 2px solid #000000;
            background-color: transparent;
            color: #000000;
            font-family: 'ZT Formom', sans-serif;
            font-size: 13px;
            border-radius: 34px;
            text-align: center;
            line-height: 39px;
            text-decoration: none;
            opacity: 1;
            transition: all 0.3s ease;
            z-index: 997;
        }
        .food-title {
            font-family: 'ZT Formom', sans-serif;
            font-size: 50px;
            color: black;
            margin-bottom: 0.5rem;
        }
        .food-difficulty {
            font-family: 'ZT Formom', sans-serif;
            font-size: 20px;
            color: black;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .food-stars {
            font-size: 20px;
            color: rgb(0, 0, 0);
        }
        .food-video-section {
            width: 100%;
            margin-bottom: 20px;
        }
        .sticker {
            display: none;
        }
        .have-a-bite-bg {
            height: 50vh;
            width: auto;
            max-width: 100vw;
            z-index: 0;
            position: absolute;
        }
        .about-page {
            background-position: unset !important;
        }
    }