/* ==========================================================
   Birthday Website
   Responsive CSS
   Author : Huy + ChatGPT
   ========================================================== */

/* ==========================================================
   1400px
   ========================================================== */

@media (max-width: 1400px){

    .container{

        width:min(100% - 64px, 1140px);

    }

}

/* ==========================================================
   1200px
   ========================================================== */

@media (max-width: 1200px){

    :root{

        --font-size-4xl:4.5rem;
        --font-size-3xl:3.5rem;
        --font-size-2xl:2.8rem;

    }

    .container{

        width:min(100% - 56px, 1000px);

    }

}

/* ==========================================================
   992px
   ========================================================== */

@media (max-width: 992px){

    .container{

        width:min(100% - 48px, 900px);

    }

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

    .grid-3{

        grid-template-columns:repeat(2,1fr);

    }

}

/* ==========================================================
   768px
   ========================================================== */

@media (max-width: 768px){

    :root{

        --font-size-4xl:3.5rem;
        --font-size-3xl:3rem;
        --font-size-2xl:2.4rem;
        --font-size-xl:1.8rem;

    }

    .container{

        width:min(100% - 40px, 100%);

    }

    .row{

        flex-direction:column;

    }

    .between{

        flex-direction:column;

        justify-content:center;

        gap:var(--space-5);

    }

    .grid-4,
    .grid-3,
    .grid-2{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   576px
   ========================================================== */

@media (max-width: 576px){

    :root{

        --font-size-4xl:2.8rem;
        --font-size-3xl:2.3rem;
        --font-size-2xl:2rem;
        --font-size-xl:1.6rem;
        --font-size-lg:1.125rem;

    }

    .container{

        width:calc(100% - 32px);

    }

    .btn{

        width:100%;

    }

}

/* ==========================================================
   400px
   ========================================================== */

@media (max-width: 400px){

    :root{

        --font-size-4xl:2.3rem;
        --font-size-3xl:2rem;
        --font-size-2xl:1.8rem;

    }

    .container{

        width:calc(100% - 24px);

    }

}

/* ==========================================================
   Birthday Sections
   ========================================================== */

@media (max-width: 992px){

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .story-content{

        grid-template-columns:1fr;

    }

    .highlight-content{

        grid-template-columns:1fr;

    }

    .memory-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width: 768px){

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .loading-progress{

        width:100%;

    }

    .firework-canvas{

        height:500px;

    }

    .cake-illustration{

        width:240px;

    }

    .welcome-title,
    .gallery-title,
    .story-title,
    .memory-title,
    .highlight-title,
    .firework-title,
    .cake-title,
    .ending-title{

        line-height:1.2;

    }

}

@media (max-width: 576px){

    .story-content,
    .highlight-content{

        gap:var(--space-6);

    }

    .memory-card{

        padding:var(--space-5);

    }

    .welcome-description,
    .story-text,
    .highlight-text,
    .cake-message,
    .ending-message{

        font-size:var(--font-size-base);

    }

    .firework-canvas{

        height:400px;

    }

}