/* =========================================================
   WEDDING INVITATION
   SYAUQI & ATHIYAH
   ========================================================= */


/* =========================================================
   1. COLOR PALETTE
   ========================================================= */

:root {

    --cream: #f7eee2;
    --soft: #fbf6ee;
    --beige: #ead9c5;
    --taupe: #cbb49b;
    --caramel: #b9855d;
    --cocoa: #76503b;
    --chestnut: #603d2d;
    --text: #634938;

}


/* =========================================================
   2. RESET
   ========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}


body {
    margin: 0;
    background: var(--cream);
    color: var(--text);
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden;
}


img {
    display: block;
    max-width: 100%;
}


a {
    text-decoration: none;
}


/* =========================================================
   3. GENERAL SECTION
   ========================================================= */

.page {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}


.section {
    padding: 7rem 0;
}


.section h2 {
    font-family: "Cormorant Garamond", serif;
    color: var(--cocoa);
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1;
}


.center {
    text-align: center;
}


.eyebrow {
    letter-spacing: .25em;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: .75rem;
}


.ornament {
    text-align: center;
    color: var(--caramel);
    margin: 0 auto 2rem;
    font-size: 1rem;
}


.narrow {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   4. NAVBAR
   ========================================================= */

.wedding-navbar {

    height: 72px;

    padding: 0 4vw;

    background:
        rgba(251, 246, 238, .94);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border-bottom:
        1px solid
        rgba(118, 80, 59, .12);

    z-index: 50;
}


.brand {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 1.3rem;

    letter-spacing: .1em;

    color: var(--cocoa) !important;

    border:
        1px solid
        var(--caramel);

    border-radius: 50%;

    width: 42px;
    height: 42px;

    justify-content: center;

    margin: 15px;
}


.nav-link {

    font-family:
        "Cormorant Garamond",
        serif;

    color: var(--cocoa) !important;

    font-size: 1.05rem;

    font-weight: 600;

    transition: .3s ease;
}


.nav-link:hover {

    color:
        var(--caramel) !important;

    background:
        transparent !important;
}


/* =========================================================
   5. BUTTON
   ========================================================= */

.btn {

    background:
        var(--cocoa);

    color:
        #fffaf3;

    border: 0;

    border-radius:
        999px;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    font-size:
        .72rem;

    font-weight:
        500;

    padding:
        0 1.5rem;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.btn:hover {

    background:
        var(--chestnut);

    color:
        #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(96, 61, 45, .2);
}


/* =========================================================
   6. COVER / HERO
   ========================================================= */

.hero {

    display: flex;

    align-items: center;

    min-height: 100vh;

    padding-top: 72px;

    background:

        linear-gradient(
            90deg,
            rgba(247, 238, 226, .97) 0%,
            rgba(247, 238, 226, .84) 45%,
            rgba(247, 238, 226, .25) 100%
        ),

        url("../assets/images/cover.jpg")

        center / cover no-repeat;
}


.hero-content {

    width: 100%;

    padding-left: 6vw;
}


.hero .eyebrow {

    position: relative;

    z-index: 5;

    margin-bottom:
        2.5rem;

    letter-spacing:
        .35em;
}


.hero h1 {

    position: relative;

    z-index: 2;

    font-family:
        "Great Vibes",
        cursive;

    font-size:
        clamp(
            4.5rem,
            9vw,
            8.5rem
        );

    line-height:
        .78;

    font-weight:
        400;

    color:
        var(--cocoa);

    /*
       JARAK INI YANG MEMISAHKAN
       THE WEDDING OF DARI SYAUQI
    */

    margin:
        2rem 0 1.5rem;
}


.hero h1 span {
    color:
        var(--caramel);
}


.date {

    letter-spacing:
        .4em;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.25rem;

    margin:
        1rem 0;
}


.quote {

    max-width:
        560px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.05rem;

    line-height:
        1.45;

    margin-bottom:
        .5rem;
}


.source {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1rem;

    margin-bottom:
        1.5rem;
}


/* =========================================================
   7. SECTION BACKGROUND SYSTEM
   ========================================================= */

.section-bg {

    position:
        relative;

    min-height:
        100vh;

    overflow:
        hidden;

    background-position:
        center;

    background-size:
        cover;

    background-repeat:
        no-repeat;
}


.section-bg-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(247, 238, 226, .82);

    z-index:
        0;
}


.section-content {

    position:
        relative;

    z-index:
        1;
}


/* =========================================================
   8. BACKGROUND INTRODUCTION
   ========================================================= */

.intro-bg {

    background-image:
        url("../assets/images/intro.jpg");
}


.intro-bg .section-bg-overlay {

    background:
        rgba(247, 238, 226, .82);
}


/* =========================================================
   9. BACKGROUND COUPLE
   ========================================================= */

.couple-bg {

    background-image:
        url("../assets/images/intro.jpg");
}


.couple-bg .section-bg-overlay {

    background:
        rgba(247, 238, 226, .88);
}


/* =========================================================
   10. INTRODUCTION CONTENT
   ========================================================= */

.copy {

    padding:
        2rem 4rem;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.3rem;

    line-height:
        1.6;
}


.copy h2 {

    margin-bottom:
        1rem;
}


.copy blockquote {

    border-left:
        2px solid
        var(--caramel);

    padding-left:
        1.2rem;

    font-size:
        1.15rem;

    margin:
        1.5rem 0;

    font-style:
        italic;
}


.copy .source {

    font-size:
        1rem;
}


/* =========================================================
   11. ARCH PHOTO
   ========================================================= */

.arch {

    overflow:
        hidden;

    border:
        2px solid
        rgba(185, 133, 93, .55);

    border-radius:
        48%
        48%
        12px
        12px;

    aspect-ratio:
        4 / 5;

    background:
        var(--beige);

    max-width:
        430px;

    margin:
        auto;

    box-shadow:
        0 15px 35px
        rgba(96, 61, 45, .08);
}


.arch img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .5s ease;
}


.arch:hover img {

    transform:
        scale(1.03);
}


/* =========================================================
   12. COUPLE
   ========================================================= */

.person {

    text-align:
        center;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.05rem;

    line-height:
        1.5;
}


.person .arch {

    max-width:
        300px;

    margin-bottom:
        1.5rem;
}


.person h3 {

    font-family:
        "Great Vibes",
        cursive;

    font-size:
        3.5rem;

    font-weight:
        400;

    margin:
        .5rem 0;

    color:
        var(--cocoa);
}


.person p {

    margin-bottom:
        .5rem;
}


.amp {

    font-family:
        "Great Vibes",
        cursive;

    color:
        var(--caramel);

    font-size:
        5rem;

    text-align:
        center;
}


/* =========================================================
   13. EVENT
   AKAD + RESEPSI
   ========================================================= */

.event {

    position:
        relative;

    min-height:
        100vh;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background-position:
        center;

    background-size:
        cover;

    background-repeat:
        no-repeat;
}


/* =========================================================
   14. AKAD BACKGROUND
   ========================================================= */

.akad {

    background-image:

        linear-gradient(
            rgba(55, 38, 28, .30),
            rgba(55, 38, 28, .30)
        ),

        url("../assets/images/akad.jpg");

    background-position:
        center;

    background-size:
        cover;
}


/* =========================================================
   15. RESEPSI BACKGROUND
   ========================================================= */

.resepsi {

    background-image:

        linear-gradient(
            rgba(55, 38, 28, .30),
            rgba(55, 38, 28, .30)
        ),

        url("../assets/images/resepsi.jpg");

    background-position:
        center;

    background-size:
        cover;
}


/* =========================================================
   16. EVENT OVERLAY
   ========================================================= */

.event-overlay {

    width:
        100%;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        6rem 2rem;
}


/* =========================================================
   17. EVENT INFORMATION CARD
   ========================================================= */

.event .info {

    width:
        min(550px, 90%);

    padding:
        3.5rem;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    color:
        #fffaf3;

    background:
        rgba(75, 49, 35, .62);

    border:
        1px solid
        rgba(255, 250, 243, .35);

    backdrop-filter:
        blur(4px);

    -webkit-backdrop-filter:
        blur(4px);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, .12);
}


.event .info .eyebrow {

    color:
        #fffaf3;
}


.event .info h2 {

    color:
        #fffaf3;

    margin-bottom:
        .5rem;
}


.event .info p {

    color:
        #fffaf3;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.25rem;

    line-height:
        1.5;

    margin-bottom:
        1.25rem;
}


.event .info p b {

    font-weight:
        600;
}


.event .ornament {

    color:
        #ead9c5;

    margin-bottom:
        1.5rem;
}


.event .btn {

    margin-top:
        .5rem;
}


/* =========================================================
   18. GALLERY BACKGROUND
   ========================================================= */

.gallery-bg {

    background-image:
        url("../assets/images/gallery-1.jpg");
}


.gallery-bg .section-bg-overlay {

    background:
        rgba(247, 238, 226, .88);
}


/* =========================================================
   19. GALLERY
   ========================================================= */

.gallery {

    text-align:
        center;

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr;

    grid-template-rows:
        210px 210px;

    gap:
        10px;

    max-width:
        1000px;

    margin:
        2rem auto;
}


.gallery button {

    padding:
        0;

    border:
        0;

    overflow:
        hidden;

    background:
        var(--beige);

    cursor:
        pointer;

    position:
        relative;
}


.gallery button:first-child {

    grid-row:
        span 2;
}


.gallery img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .5s ease,
        filter .5s ease;
}


.gallery button:hover img {

    transform:
        scale(1.05);

    filter:
        brightness(.9);
}


.gallery-caption {

    text-align:
        center;

    font-family:
        "Cormorant Garamond",
        serif;

    font-style:
        italic;

    font-size:
        1.1rem;

    color:
        var(--cocoa);
}


/* =========================================================
   20. STORY BACKGROUND
   ========================================================= */

.story-bg {

    background-image:
        url("../assets/images/story-2021.jpg");
}


.story-bg .section-bg-overlay {

    background:
        rgba(247, 238, 226, .90);
}


/* =========================================================
   21. LOVE STORY / TIMELINE
   ========================================================= */

.timeline {

    max-width:
        900px;

    margin:
        auto;

    position:
        relative;
}


.timeline:before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        var(--taupe);
}


.timeline article {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        4rem;

    align-items:
        center;

    min-height:
        220px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.1rem;

    line-height:
        1.5;
}


.timeline article:nth-child(even) img {

    grid-column:
        2;
}


.timeline article:nth-child(even) div {

    grid-row:
        1;

    text-align:
        right;
}


.timeline img {

    width:
        155px;

    height:
        155px;

    object-fit:
        cover;

    border-radius:
        50%;

    border:
        4px solid #fff;

    outline:
        1px solid
        var(--caramel);

    justify-self:
        center;
}


.timeline b {

    font-size:
        2rem;

    color:
        var(--caramel);

    font-family:
        "Cormorant Garamond",
        serif;
}


.timeline h3 {

    margin:
        0 0 .5rem;

    color:
        var(--cocoa);

    font-size:
        1.8rem;
}


.timeline p {

    margin:
        0;
}


/* =========================================================
   22. RSVP BACKGROUND
   ========================================================= */

.rsvp-bg {

    background-image:
        url("../assets/images/closing.jpg");
}


.rsvp-bg .section-bg-overlay {

    background:
        rgba(247, 238, 226, .91);
}


/* =========================================================
   23. RSVP
   ========================================================= */

.box {

    background:
        rgba(255, 250, 243, .72);

    border:
        1px solid
        rgba(118, 80, 59, .2);

    box-shadow:
        0 15px 40px
        rgba(96, 61, 45, .08);

    padding:
        2rem;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


.label {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.1rem;

    color:
        var(--cocoa);
}


.input,
.textarea {

    border-color:
        rgba(118, 80, 59, .22);

    background:
        rgba(255, 255, 255, .55);

    color:
        var(--text);

    font-family:
        "Montserrat",
        sans-serif;
}


.input:focus,
.textarea:focus {

    border-color:
        var(--caramel);

    box-shadow:
        0 0 0 .125em
        rgba(185, 133, 93, .15);
}


.textarea {

    min-height:
        120px;

    resize:
        vertical;
}


.radio {

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        .9rem;

    margin-right:
        1rem;
}


#rsvpMessage {

    margin-top:
        1.5rem;

    text-align:
        center;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.1rem;
}


/* =========================================================
   24. CLOSING
   ========================================================= */

.closing {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    min-height:
        100vh;

    background:

        linear-gradient(
            90deg,
            rgba(247, 238, 226, .88),
            rgba(247, 238, 226, .45)
        ),

        url("../assets/images/closing.jpg")

        center / cover no-repeat;
}


.closing-content {

    max-width:
        700px;

    padding:
        2rem;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.3rem;

    line-height:
        1.5;
}


.closing h2 {

    font-family:
        "Great Vibes",
        cursive;

    font-size:
        clamp(
            3rem,
            7vw,
            6rem
        );

    font-weight:
        400;

    color:
        var(--cocoa);

    line-height:
        1;
}


.closing-names {

    font-family:
        "Great Vibes",
        cursive;

    font-size:
        3rem;

    color:
        var(--cocoa);

    margin:
        1rem 0;
}


/* =========================================================
   25. MODAL GALLERY
   ========================================================= */

.modal {

    z-index:
        100;
}


.modal-background {

    background:
        rgba(45, 30, 22, .85);
}


.modal-content {

    max-width:
        90vw;

    max-height:
        90vh;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}


.modal-content img {

    max-height:
        85vh;

    max-width:
        90vw;

    width:
        auto;

    height:
        auto;

    object-fit:
        contain;

    border-radius:
        4px;
}


.modal-close {

    background-color:
        rgba(255, 255, 255, .85);
}


/* =========================================================
   26. TABLET
   1023px
   ========================================================= */

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


    /* NAVBAR */

    .wedding-navbar {

        padding:
            0 2vw;
    }


    .navbar-menu {

        background:
            rgba(251, 246, 238, .98);

        box-shadow:
            0 10px 20px
            rgba(96, 61, 45, .08);
    }


    .nav-link {

        padding:
            1rem 1.5rem;
    }


    /* HERO */

    .hero-content {

        padding-left:
            5vw;
    }


    .hero h1 {

        font-size:
            clamp(
                4rem,
                10vw,
                7rem
            );
    }


    /* INTRO */

    .copy {

        padding:
            2rem;
    }


    /* COUPLE */

    .person h3 {

        font-size:
            3rem;
    }


    /* EVENT */

    .event .info {

        width:
            70%;
    }


    /* TIMELINE */

    .timeline {

        padding:
            0 2rem;
    }

}


/* =========================================================
   27. MOBILE
   768px
   ========================================================= */

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


    /* GENERAL */

    .section {

        padding:
            5rem 1.25rem;
    }


    .page {

        min-height:
            auto;
    }


    .section-bg {

        min-height:
            100vh;
    }


    .section-bg-overlay {

        background:
            rgba(247, 238, 226, .88);
    }


    /* NAVBAR */

    .wedding-navbar {

        height:
            64px;
    }


    .brand {

        width:
            38px;

        height:
            38px;

        margin:
            12px;
    }


    /* HERO */

    .hero {

        min-height:
            100vh;

        padding-top:
            64px;

        background:

            linear-gradient(
                rgba(247, 238, 226, .86),
                rgba(247, 238, 226, .72)
            ),

            url("../assets/images/cover.jpg")

            center / cover no-repeat;
    }


    .hero-content {

        padding:
            3rem 1.25rem;

        text-align:
            center;
    }


    .hero .column {

        width:
            100%;
    }


    .hero .eyebrow {

        margin-bottom:
            2rem;

        letter-spacing:
            .28em;
    }


    .hero h1 {

        font-size:
            clamp(
                4rem,
                18vw,
                6rem
            );

        line-height:
            .8;

        margin-top:
            1.5rem;
    }


    .hero .quote {

        max-width:
            100%;

        font-size:
            .98rem;
    }


    .hero .date {

        font-size:
            1.05rem;
    }


    /* INTRODUCTION */

    #introduction .columns {

        display:
            flex;

        flex-direction:
            column;
    }


    #introduction .column {

        width:
            100%;
    }


    #introduction .arch {

        max-width:
            280px;
    }


    .copy {

        padding:
            2rem .5rem;

        text-align:
            center;

        font-size:
            1.15rem;
    }


    .copy blockquote {

        text-align:
            left;

        font-size:
            1.05rem;
    }


    /* COUPLE */

    #couple .columns {

        display:
            flex;

        flex-direction:
            column;
    }


    #couple .column {

        width:
            100%;

        margin-bottom:
            2rem;
    }


    #couple .amp {

        margin:
            0 0 1rem;
    }


    .person h3 {

        font-size:
            3rem;
    }


    .person .arch {

        max-width:
            250px;
    }


    /* EVENT */

    .event {

        min-height:
            667px;

        background-position:
            center;

        background-size:
            cover;
    }


    .akad {

        background-position:
            center center;
    }


    .resepsi {

        background-position:
            center center;
    }


    .event-overlay {

        min-height:
            667px;

        padding:
            4rem 1rem;
    }


    .event .info {

        width:
            92%;

        padding:
            2rem 1.25rem;

        background:
            rgba(75, 49, 35, .68);
    }


    .event .info h2 {

        font-size:
            2.5rem;

        margin-bottom:
            .5rem;
    }


    .event .info p {

        font-size:
            1.05rem;

        line-height:
            1.45;
    }


    .event .info .eyebrow {

        font-size:
            .65rem;
    }


    .event .ornament {

        margin-bottom:
            1rem;
    }


    .event .btn {

        font-size:
            .65rem;

        padding:
            0 1.2rem;
    }


    /* GALLERY */

    .gallery {

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            180px 180px 180px;

        gap:
            7px;
    }


    .gallery button:first-child {

        grid-row:
            span 2;
    }


    .gallery-caption {

        font-size:
            1rem;

        padding:
            0 1rem;
    }


    /* LOVE STORY */

    .timeline {

        padding:
            0 1rem;
    }


    .timeline:before {

        left:
            25px;
    }


    .timeline article {

        display:
            grid;

        grid-template-columns:
            60px 1fr;

        gap:
            1.25rem;

        min-height:
            180px;

        align-items:
            center;
    }


    .timeline article:nth-child(even) img {

        grid-column:
            1;

        grid-row:
            1;
    }


    .timeline article:nth-child(even) div {

        grid-column:
            2;

        grid-row:
            1;

        text-align:
            left;
    }


    .timeline img {

        width:
            55px;

        height:
            55px;

        border-width:
            2px;
    }


    .timeline b {

        font-size:
            1.6rem;
    }


    .timeline h3 {

        font-size:
            1.4rem;

        margin-bottom:
            .25rem;
    }


    .timeline p {

        font-size:
            .95rem;

        line-height:
            1.4;
    }


    /* RSVP */

    .box {

        padding:
            1.25rem;
    }


    #rsvp .columns {

        display:
            block;
    }


    #rsvp .column {

        width:
            100%;
    }


    /* CLOSING */

    .closing {

        min-height:
            100vh;

        padding:
            5rem 1.5rem;
    }


    .closing-content {

        padding:
            1rem;

        font-size:
            1.1rem;
    }


    .closing h2 {

        font-size:
            clamp(
                3rem,
                14vw,
                5rem
            );
    }


    .closing-names {

        font-size:
            2.7rem;
    }


    /* MODAL */

    .modal-content {

        max-width:
            95vw;
    }


    .modal-content img {

        max-width:
            95vw;

        max-height:
            80vh;
    }

}


/* =========================================================
   28. SMALL MOBILE
   360px
   ========================================================= */

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


    /* HERO */

    .hero h1 {

        font-size:
            4rem;

        margin-top:
            1.5rem;
    }


    .hero .eyebrow {

        font-size:
            .62rem;

        letter-spacing:
            .18em;

        margin-bottom:
            1.8rem;
    }


    .hero .quote {

        font-size:
            .9rem;
    }


    .hero .date {

        font-size:
            .95rem;

        letter-spacing:
            .25em;
    }


    /* GENERAL TITLE */

    .section h2 {

        font-size:
            2.3rem;
    }


    /* COUPLE */

    .person h3 {

        font-size:
            2.7rem;
    }


    .person .arch {

        max-width:
            220px;
    }


    /* EVENT */

    .event-overlay {

        padding:
            3rem .5rem;
    }


    .event .info {

        width:
            95%;

        padding:
            1.5rem 1rem;
    }


    .event .info h2 {

        font-size:
            2.2rem;
    }


    .event .info p {

        font-size:
            .95rem;
    }


    /* GALLERY */

    .gallery {

        grid-template-rows:
            150px 150px 150px;
    }


    /* TIMELINE */

    .timeline {

        padding-left:
            .25rem;
    }


    .timeline article {

        grid-template-columns:
            50px 1fr;

        gap:
            .8rem;
    }


    .timeline:before {

        left:
            20px;
    }


    .timeline img {

        width:
            45px;

        height:
            45px;
    }


    .timeline b {

        font-size:
            1.4rem;
    }


    .timeline h3 {

        font-size:
            1.25rem;
    }


    .timeline p {

        font-size:
            .88rem;
    }


    /* RSVP */

    .box {

        padding:
            1rem;
    }


    /* CLOSING */

    .closing-names {

        font-size:
            2.3rem;
    }

}

/* ===============================
   MUSIC BUTTON
================================ */

.music-button {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 50px;
    height: 50px;

    border: 1px solid var(--caramel);
    border-radius: 50%;

    background: rgba(251, 246, 238, 0.95);

    color: var(--cocoa);

    font-size: 1.2rem;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 100;

    box-shadow:
        0 5px 20px rgba(96, 61, 45, 0.18);

    transition: 0.3s ease;
}

.music-button:hover {
    transform: scale(1.08);
    background: var(--beige);
}