@font-face {
    font-family: "Comic Sans MS";
    src: url("../fonts/Comic\ Sans\ MS.woff") format('woff');
  }
* {
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(to bottom right, #f4acb7 0%, #a2d2ff 100%);
    /* background: #fef0ee; */
    overflow: hidden;
}

#overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.5s;
}

#overlay.active {
    opacity: 1;
}

.heart {
    position: relative;
    width: 600px;
    height: 600px;
}

.polaroid {
    width: 60px;
    height: 70px;
    background: white;
    position: absolute;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transform: rotate(calc(-30deg + 60deg * var(--rotation)));
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), box-shadow 0.5s, margin 0.5s;
    z-index: 0;
}

.polaroid:hover .image-container::before {
    transform: scale(1);
}

.polaroid.active:hover .image-container::before {
    transform: scale(0);
}

.image-container {
    width: 100%;
    height: 85%;
    position: relative;
}

.image-container::before {
    content: "♥";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 90%;
    height: 95%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1em;
    font-family: "Roboto", sans-serif;
    transform: scale(0);
    transition: all 0.25s;
    margin: 5% 5% 0 5%;
    cursor: pointer;
}

.polaroid img {
    padding: 5% 5% 0 5%;
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

.polaroid figcaption {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;

    font-size: 0.8%;
    font-family: Comic Sans MS;
    word-break: break-word;
    transition: font-size 0;
}

.polaroid.active figcaption {
    transition: font-size 1s;
    font-size: 2.5rem;
}

.close-button {
    display: none;
}

.polaroid.active .close-button {
    display: block;
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background-color: #f53d3d;
    border: 3px solid #fff;
    border-radius: 50%;
    outline: none;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    box-shadow: -2px 2px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.polaroid.active {
    animation: flyToCenter 1s ease-out forwards !important;
    z-index: 3;
}

@keyframes flyToCenter {
    100% {
        transform: translate(-50%, -50%);
        width: 480px;
        height: 560px;
        top: 50%;
        left: 50%;
    }
}


/* region polaroid */

#polaroid0 {
    animation: polaroid0 4.3s ease-out forwards;
}

@keyframes polaroid0 {
    0% {
        transform: translate(964px, 598px);
    }
}


#polaroid1 {
    animation: polaroid1 3.7s ease-out forwards;
}

@keyframes polaroid1 {
    0% {
        transform: translate(-689px, -386px);
    }
}


#polaroid2 {
    animation: polaroid2 4.1s ease-out forwards;
}

@keyframes polaroid2 {
    0% {
        transform: translate(-1482px, 366px);
    }
}


#polaroid3 {
    animation: polaroid3 4.6s ease-out forwards;
}

@keyframes polaroid3 {
    0% {
        transform: translate(-518px, -1655px);
    }
}


#polaroid4 {
    animation: polaroid4 4.8s ease-out forwards;
}

@keyframes polaroid4 {
    0% {
        transform: translate(332px, 379px);
    }
}


#polaroid5 {
    animation: polaroid5 4.5s ease-out forwards;
}

@keyframes polaroid5 {
    0% {
        transform: translate(-1329px, 1246px);
    }
}


#polaroid6 {
    animation: polaroid6 3.1s ease-out forwards;
}

@keyframes polaroid6 {
    0% {
        transform: translate(957px, 360px);
    }
}


#polaroid7 {
    animation: polaroid7 3.5s ease-out forwards;
}

@keyframes polaroid7 {
    0% {
        transform: translate(-1448px, 134px);
    }
}


#polaroid8 {
    animation: polaroid8 4.8s ease-out forwards;
}

@keyframes polaroid8 {
    0% {
        transform: translate(1572px, -1218px);
    }
}


#polaroid9 {
    animation: polaroid9 4.0s ease-out forwards;
}

@keyframes polaroid9 {
    0% {
        transform: translate(-645px, 450px);
    }
}


#polaroid10 {
    animation: polaroid10 3.8s ease-out forwards;
}

@keyframes polaroid10 {
    0% {
        transform: translate(440px, -883px);
    }
}


#polaroid11 {
    animation: polaroid11 4.5s ease-out forwards;
}

@keyframes polaroid11 {
    0% {
        transform: translate(948px, -933px);
    }
}


#polaroid12 {
    animation: polaroid12 4.8s ease-out forwards;
}

@keyframes polaroid12 {
    0% {
        transform: translate(157px, -1645px);
    }
}


#polaroid13 {
    animation: polaroid13 3.9s ease-out forwards;
}

@keyframes polaroid13 {
    0% {
        transform: translate(-960px, 483px);
    }
}


#polaroid14 {
    animation: polaroid14 4.6s ease-out forwards;
}

@keyframes polaroid14 {
    0% {
        transform: translate(1897px, -1996px);
    }
}


#polaroid15 {
    animation: polaroid15 3.1s ease-out forwards;
}

@keyframes polaroid15 {
    0% {
        transform: translate(1618px, -1239px);
    }
}


#polaroid16 {
    animation: polaroid16 4.1s ease-out forwards;
}

@keyframes polaroid16 {
    0% {
        transform: translate(1677px, 607px);
    }
}


#polaroid17 {
    animation: polaroid17 4.8s ease-out forwards;
}

@keyframes polaroid17 {
    0% {
        transform: translate(1681px, -97px);
    }
}


#polaroid18 {
    animation: polaroid18 3.5s ease-out forwards;
}

@keyframes polaroid18 {
    0% {
        transform: translate(681px, 1436px);
    }
}


#polaroid19 {
    animation: polaroid19 3.6s ease-out forwards;
}

@keyframes polaroid19 {
    0% {
        transform: translate(1226px, 815px);
    }
}


#polaroid20 {
    animation: polaroid20 3.5s ease-out forwards;
}

@keyframes polaroid20 {
    0% {
        transform: translate(1850px, 830px);
    }
}


#polaroid21 {
    animation: polaroid21 4.6s ease-out forwards;
}

@keyframes polaroid21 {
    0% {
        transform: translate(-621px, 686px);
    }
}


#polaroid22 {
    animation: polaroid22 4.0s ease-out forwards;
}

@keyframes polaroid22 {
    0% {
        transform: translate(517px, -555px);
    }
}


#polaroid23 {
    animation: polaroid23 4.5s ease-out forwards;
}

@keyframes polaroid23 {
    0% {
        transform: translate(-711px, -339px);
    }
}


#polaroid24 {
    animation: polaroid24 4.2s ease-out forwards;
}

@keyframes polaroid24 {
    0% {
        transform: translate(903px, -1977px);
    }
}


#polaroid25 {
    animation: polaroid25 4.4s ease-out forwards;
}

@keyframes polaroid25 {
    0% {
        transform: translate(427px, -803px);
    }
}


#polaroid26 {
    animation: polaroid26 4.5s ease-out forwards;
}

@keyframes polaroid26 {
    0% {
        transform: translate(609px, 1280px);
    }
}


#polaroid27 {
    animation: polaroid27 4.0s ease-out forwards;
}

@keyframes polaroid27 {
    0% {
        transform: translate(-1376px, 929px);
    }
}


#polaroid28 {
    animation: polaroid28 3.9s ease-out forwards;
}

@keyframes polaroid28 {
    0% {
        transform: translate(1265px, -1445px);
    }
}


#polaroid29 {
    animation: polaroid29 4.9s ease-out forwards;
}

@keyframes polaroid29 {
    0% {
        transform: translate(-1706px, -252px);
    }
}


#polaroid30 {
    animation: polaroid30 4.2s ease-out forwards;
}

@keyframes polaroid30 {
    0% {
        transform: translate(-1252px, -1493px);
    }
}


#polaroid31 {
    animation: polaroid31 4.7s ease-out forwards;
}

@keyframes polaroid31 {
    0% {
        transform: translate(511px, -1988px);
    }
}


#polaroid32 {
    animation: polaroid32 4.7s ease-out forwards;
}

@keyframes polaroid32 {
    0% {
        transform: translate(-1781px, -1918px);
    }
}


#polaroid33 {
    animation: polaroid33 4.2s ease-out forwards;
}

@keyframes polaroid33 {
    0% {
        transform: translate(363px, -1567px);
    }
}


#polaroid34 {
    animation: polaroid34 4.1s ease-out forwards;
}

@keyframes polaroid34 {
    0% {
        transform: translate(-1763px, 336px);
    }
}


#polaroid35 {
    animation: polaroid35 4.6s ease-out forwards;
}

@keyframes polaroid35 {
    0% {
        transform: translate(798px, 1831px);
    }
}


#polaroid36 {
    animation: polaroid36 3.8s ease-out forwards;
}

@keyframes polaroid36 {
    0% {
        transform: translate(1011px, 1419px);
    }
}


#polaroid37 {
    animation: polaroid37 3.7s ease-out forwards;
}

@keyframes polaroid37 {
    0% {
        transform: translate(163px, 1450px);
    }
}


#polaroid38 {
    animation: polaroid38 4.3s ease-out forwards;
}

@keyframes polaroid38 {
    0% {
        transform: translate(-1136px, 415px);
    }
}


#polaroid39 {
    animation: polaroid39 5.0s ease-out forwards;
}

@keyframes polaroid39 {
    0% {
        transform: translate(-690px, 1510px);
    }
}


#polaroid40 {
    animation: polaroid40 4.8s ease-out forwards;
}

@keyframes polaroid40 {
    0% {
        transform: translate(393px, -860px);
    }
}


#polaroid41 {
    animation: polaroid41 3.6s ease-out forwards;
}

@keyframes polaroid41 {
    0% {
        transform: translate(1889px, 77px);
    }
}


#polaroid42 {
    animation: polaroid42 4.9s ease-out forwards;
}

@keyframes polaroid42 {
    0% {
        transform: translate(241px, 1402px);
    }
}


#polaroid43 {
    animation: polaroid43 3.8s ease-out forwards;
}

@keyframes polaroid43 {
    0% {
        transform: translate(-196px, 1911px);
    }
}


#polaroid44 {
    animation: polaroid44 4.6s ease-out forwards;
}

@keyframes polaroid44 {
    0% {
        transform: translate(647px, 1908px);
    }
}


#polaroid45 {
    animation: polaroid45 3.7s ease-out forwards;
}

@keyframes polaroid45 {
    0% {
        transform: translate(1967px, 1177px);
    }
}


#polaroid46 {
    animation: polaroid46 3.0s ease-out forwards;
}

@keyframes polaroid46 {
    0% {
        transform: translate(-1356px, 1704px);
    }
}


#polaroid47 {
    animation: polaroid47 4.4s ease-out forwards;
}

@keyframes polaroid47 {
    0% {
        transform: translate(-689px, -1646px);
    }
}


#polaroid48 {
    animation: polaroid48 4.3s ease-out forwards;
}

@keyframes polaroid48 {
    0% {
        transform: translate(418px, -512px);
    }
}


#polaroid49 {
    animation: polaroid49 3.9s ease-out forwards;
}

@keyframes polaroid49 {
    0% {
        transform: translate(1545px, 1971px);
    }
}