/* =====================================================
   GENERAL
===================================================== */

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {

    margin: 0;

    min-height: 100vh;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,0.35) 0 2px,
            transparent 3px
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(255,255,255,0.25) 0 2px,
            transparent 3px
        ),

        linear-gradient(
            135deg,
            #f79ab5,
            #ee789d,
            #f49ab6,
            #ed7e9f
        );

    background-size:
        90px 90px,
        120px 120px,
        100% 100%;

    color: #512d3c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    overflow-x: hidden;

}


/* =====================================================
   GLITTER
===================================================== */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 0;

    background-image:

        radial-gradient(
            circle,
            rgba(255,255,255,0.9) 0 1px,
            transparent 2px
        );

    background-size: 65px 65px;

    animation:
        glitterMove 8s linear infinite;

    opacity: 0.55;

}


@keyframes glitterMove {

    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(20px, 15px);
    }

    100% {
        transform: translate(0, 0);
    }

}


/* =====================================================
   MAIN PAGE
===================================================== */

.birthday-page {

    position: relative;

    z-index: 1;

    min-height: 100vh;

    width: 100%;

    padding:
        150px
        20px
        250px;

}


/* =====================================================
   LETTER
===================================================== */

.letter {

    position: relative;

    z-index: 3;

    width: min(850px, 70vw);

    min-height: 570px;

    margin: 0 auto;

    padding:
        65px
        80px;

    background:

        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,0.8),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #fff8ee,
            #ffeede,
            #fff7ec
        );

    border: 3px solid transparent;

    border-image:

        linear-gradient(
            90deg,
            #e7a0b8,
            #ffd878,
            #e995b2,
            #ffd878,
            #e7a0b8
        ) 1;

    box-shadow:

        0 0 8px #fff,

        0 0 18px
        rgba(255, 220, 235, 0.9),

        0 15px 35px
        rgba(90, 35, 55, 0.25);

    transform: rotate(-0.4deg);

    animation:
        letterGlow 3s ease-in-out infinite;

}


@keyframes letterGlow {

    0% {

        box-shadow:
            0 0 8px #fff,
            0 0 18px
            rgba(255, 220, 235, 0.8),
            0 15px 35px
            rgba(90, 35, 55, 0.25);

    }

    50% {

        box-shadow:
            0 0 12px #fff,
            0 0 28px
            rgba(255, 220, 235, 1),
            0 15px 35px
            rgba(90, 35, 55, 0.25);

    }

    100% {

        box-shadow:
            0 0 8px #fff,
            0 0 18px
            rgba(255, 220, 235, 0.8),
            0 15px 35px
            rgba(90, 35, 55, 0.25);

    }

}


/* =====================================================
   RIBBON
===================================================== */

.letter-ribbon {

    position: absolute;

    top: -32px;

    left: 50%;

    transform:
        translateX(-50%);

    width: 95px;

    height: 55px;

    background: #f5a0b8;

    border-radius: 50%;

    border: 3px solid #ffd2df;

    box-shadow:
        0 3px 10px
        rgba(80, 30, 50, 0.2);

}


.letter-ribbon::before,
.letter-ribbon::after {

    content: "";

    position: absolute;

    top: 15px;

    width: 65px;

    height: 45px;

    background: #f5a0b8;

    z-index: -1;

}


.letter-ribbon::before {

    right: 55px;

    transform: rotate(30deg);

}


.letter-ribbon::after {

    left: 55px;

    transform: rotate(-30deg);

}


.letter-ribbon span {

    position: relative;

    display: block;

    text-align: center;

    margin-top: 10px;

    font-size: 30px;

    color: white;

}


/* =====================================================
   LETTER TITLE
===================================================== */

.letter h1 {

    margin: 0;

    text-align: center;

    font-size:
        clamp(35px, 5vw, 58px);

    color: #c94d77;

    font-style: italic;

    text-shadow:
        0 1px white,
        0 0 8px
        rgba(255,255,255,0.9);

}


.letter h1 span {

    color: #e77b9b;

}


/* =====================================================
   DIVIDER
===================================================== */

.divider {

    text-align: center;

    margin:
        20px
        0
        30px;

    color: #d15d7f;

    font-size: 18px;

    letter-spacing: 4px;

}


/* =====================================================
   LETTER TEXT
===================================================== */

.letter-text {

    font-size: 18px;

    line-height: 1.85;

}


.letter-text p {

    margin:
        0
        0
        22px;

}


.signature {

    text-align: right;

    margin-top: 35px;

    font-style: italic;

}


.signature span {

    color: #c94d77;

    font-size: 20px;

}


/* =====================================================
   HEARTS
===================================================== */

.heart {

    position: absolute;

    z-index: 10;

    width: 150px;

    height: 150px;

    border: none;

    cursor: pointer;

    padding: 0;

    background: transparent;

    color: white;

    filter:
        drop-shadow(
            0 8px 10px
            rgba(80, 30, 50, 0.25)
        );

    transition:
        transform 0.25s ease,
        filter 0.25s ease;

}


/* Heart shape */

.heart::before {

    content: "";

    position: absolute;

    width: 105px;

    height: 105px;

    top: 30px;

    left: 22px;

    background:
        var(--heart-color);

    transform:
        rotate(-45deg);

    border-radius:
        20px
        0
        20px
        0;

    box-shadow:

        inset 5px 5px 10px
        rgba(255,255,255,0.45),

        inset -5px -5px 10px
        rgba(80,30,50,0.12),

        0 0 15px
        rgba(255,255,255,0.35);

}


.heart::after {

    content: "";

    position: absolute;

    width: 75px;

    height: 75px;

    top: 9px;

    left: 37px;

    background:
        var(--heart-color);

    border-radius: 50%;

    box-shadow:

        inset 5px 5px 10px
        rgba(255,255,255,0.45);

}


.heart-label {

    position: absolute;

    z-index: 5;

    top: 52px;

    left: 0;

    width: 100%;

    text-align: center;

    font-size: 16px;

    line-height: 1.25;

    font-weight: bold;

    color: white;

    text-shadow:
        0 2px 4px
        rgba(80,30,50,0.35);

}


.heart-decoration {

    position: absolute;

    z-index: 5;

    bottom: 18px;

    left: 0;

    width: 100%;

    text-align: center;

    font-size: 25px;

    color:
        rgba(255,255,255,0.9);

}


.heart:hover {

    transform:
        scale(1.13)
        rotate(3deg);

    filter:
        drop-shadow(
            0 10px 20px
            rgba(255,255,255,0.7)
        );

}


.heart:active {

    transform:
        scale(0.96);

}


/* =====================================================
   HEART POSITIONS + COLORS
===================================================== */


/* TOP LEFT - PINK */

.heart-1 {

    --heart-color:
        #e85d86;

    top: 85px;

    left: 8%;

    transform:
        rotate(-8deg);

}


/* TOP RIGHT - PURPLE */

.heart-2 {

    --heart-color:
        #a878d4;

    top: 90px;

    right: 8%;

    transform:
        rotate(8deg);

}


/* BOTTOM LEFT - TEAL */

.heart-3 {

    --heart-color:
        #68bdb7;

    bottom: 120px;

    left: 16%;

    transform:
        rotate(-7deg);

}


/* BOTTOM RIGHT - GOLD */

.heart-4 {

    --heart-color:
        #e8b94f;

    bottom: 120px;

    right: 16%;

    transform:
        rotate(7deg);

}


/* =====================================================
   CORNER PHOTOS
===================================================== */

.corner-photo {

    position: absolute;

    z-index: 4;

    width: 220px;

    padding:
        10px
        10px
        25px;

    background: #fff8ef;

    box-shadow:
        0 8px 20px
        rgba(80,30,50,0.3);

}


.corner-photo img {

    display: block;

    width: 100%;

    height: 160px;

    object-fit: cover;

}


.photo-caption {

    margin-top: 10px;

    text-align: center;

    font-size: 14px;

    color: #744052;

    font-style: italic;

}


/* LEFT PHOTO */

.corner-photo-left {

    bottom: 25px;

    left: 2%;

    transform:
        rotate(-7deg);

}


/* RIGHT PHOTO */

.corner-photo-right {

    bottom: 25px;

    right: 2%;

    transform:
        rotate(7deg);

}


/* =====================================================
   ALBUM POPUP
===================================================== */

.album-overlay {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    justify-content: center;

    align-items: center;

    padding: 30px;

    background:
        rgba(60,20,40,0.72);

    backdrop-filter:
        blur(8px);

}


.album-overlay.active {

    display: flex;

}


/* =====================================================
   ALBUM WINDOW
===================================================== */

.album {

    position: relative;

    width:
        min(850px, 95vw);

    max-height: 90vh;

    overflow-y: auto;

    padding:
        50px 40px;

    background:
        linear-gradient(
            135deg,
            #fffaf3,
            #fff0e7
        );

    border:
        3px solid #e5a0b7;

    box-shadow:
        0 0 30px
        rgba(255,255,255,0.7);

}


/* =====================================================
   ALBUM TITLE
===================================================== */

.album h2 {

    margin:
        0 0 15px;

    text-align: center;

    color: #c94d77;

    font-size: 34px;

}


/* =====================================================
   ALBUM TEXT
===================================================== */

.album-text {

    max-width: 650px;

    margin:
        0 auto 30px;

    text-align: center;

    font-size: 17px;

    line-height: 1.8;

    color: #704052;

    white-space: pre-line;

}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.close-button {

    position: absolute;

    top: 8px;

    right: 15px;

    width: 40px;

    height: 40px;

    border: none;

    background: transparent;

    color: #a94b6d;

    font-size: 35px;

    cursor: pointer;

}


.close-button:hover {

    color: #e05b83;

    transform:
        scale(1.15);

}


/* =====================================================
   ALBUM PHOTOS
===================================================== */

.album-photos {

    display: grid;

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

    gap: 25px;

}


.album-photos img {

    width: 100%;

    height: 280px;

    object-fit: cover;

    padding: 8px;

    background: white;

    box-shadow:
        0 5px 15px
        rgba(70,30,45,0.2);

    transform:
        rotate(-1.5deg);

}


.album-photos img:nth-child(even) {

    transform:
        rotate(2deg);

}


.album-photos img:hover {

    transform:
        rotate(0deg)
        scale(1.03);

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .birthday-page {

        padding-top:
            130px;

    }


    .letter {

        width:
            75vw;

        padding:
            45px 35px;

    }


    .heart {

        width:
            120px;

        height:
            120px;

    }


    .heart-label {

        top: 42px;

        font-size: 14px;

    }


    .corner-photo {

        width:
            170px;

    }


    .corner-photo img {

        height:
            120px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    .birthday-page {

        padding:
            110px
            15px
            180px;

    }


    .letter {

        width:
            94vw;

        min-height:
            auto;

        padding:
            45px 25px;

    }


    .letter h1 {

        font-size:
            32px;

    }


    .letter-text {

        font-size:
            16px;

    }


    .heart {

        width:
            90px;

        height:
            90px;

    }


    .heart-label {

        top:
            31px;

        font-size:
            11px;

    }


    .heart-decoration {

        bottom:
            9px;

        font-size:
            16px;

    }


    .heart-1 {

        top:
            25px;

        left:
            2%;

    }


    .heart-2 {

        top:
            25px;

        right:
            2%;

    }


    .heart-3 {

        bottom:
            100px;

        left:
            2%;

    }


    .heart-4 {

        bottom:
            100px;

        right:
            2%;

    }


    .corner-photo {

        width:
            135px;

    }


    .corner-photo img {

        height:
            95px;

    }


    .photo-caption {

        font-size:
            11px;

    }


    .album {

        padding:
            40px 20px;

    }


    .album-photos {

        grid-template-columns:
            1fr;

    }


    .album-photos img {

        height:
            250px;

    }

}