.wrapper {
    max-width: 60em;
    margin: 0 auto;
    text-align: center;
    color: #570028;
    font-family: "Pacifico", cursive;
}

header{
    animation: wobble-hor-bottom 3s;
    animation-delay: 0.5s;
    
}

body{
    font-size:100%;
    background-color: #FCD2E6;
}

<!--
footer{
    font-family:  "Delius Swash Caps", cursive;
    font-size:1.5rem;
    padding: 1rem;
    background-color: #FFABD2;
    border-radius:1rem;
}
-->

.navbar {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-around; 
    word-spacing: 50rem;
    font-family:  "Delius Swash Caps", cursive;
    font-size:1.5rem;
    padding: 1rem;
    background-color: #FFABD2;
    border-radius:1rem;
    font-weight: bold;  
    color: #8B577D;
    font-size: 150%;
    text-decoration: none;
    z-index: 2;
}

h1{
    font-size:4rem;
}

h2 {
    font-size:2rem;
    font-family: "Delius Swash Caps", cursive;
    margin: 0.5rem;
    text-align: center;
}

h3 {
    font-size:2rem;
}

.main{
    font-family: Verdana; 
    padding: 1rem;
    text-align: left;
    border-radius:1rem;
}

.works{
    display:flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    animation: fade-in-fwd 2s;
}

.polaroid {
  width: 45%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
  position: relative;
}

.polaroid .icon {
  position: absolute;
  top: 80%;
  left: 90%;
  transform: translate(-50%, -50%);
  font-size: 48px; /* Anpassung der Größe des Lupensymbols */
  color: rgba(255, 255, 255, 0.7); /* Anpassung der Farbe des Lupensymbols */
}

.container {
  text-align: center;
  padding: 10px 20px;
  font-family: "Delius Swash Caps", cursive;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.subpage{
    font-family: "Delius Swash Caps", cursive;
    background-color: #FF70B5;
    padding: 3rem;
    border-radius: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 1 50%;
}

.image{
    border-radius: 1rem;
    height: 20rem;
    width: 20rem;
    flex: 0 0 auto;
}

.description{
    padding: 1rem;
    flex: 1;
    font-family: Verdana;
}

.description2{
    align-content: center;
    padding: 2rem;
    padding-top: 3rem;
    font-family: Verdana;
    font-weight: 500;
    font-style: normal;
    font-size: 1.25rem;
}


.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;
}

.delius-swash-caps-regular {
  font-family: "Delius Swash Caps", cursive;
  font-weight: 400;
  font-style: normal;
}

a {
  font-family:  "Delius Swash Caps", cursive;
  font-weight: bold;  
  color: #59224A;
  font-size: 100%;
  text-decoration: none;
}
a:hover {
color:#7ABF36;
}
a:active {
color:#261726;
}

.title{
    flex: 0 0 30%;
}


#largeImageDiv {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 3;
        }
        #largeImageDiv img {
            max-width: 90%;
            max-height: 90%;
        }
        .close-button {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 24px;
            color: white;
            cursor: pointer;
        }

@media (max-width: 450px) {
    .title{
        flex: 0 0 100%;    
    }
    .description{
        flex: 0 0 100%;
    }
}

@media (max-width: 992px) {
div.polaroid {
  width: 100%;
    }
}

.animate {
    animation: puff-in-center 1s;
}
/* ----------------------------------------------
 * Generated by Animista on 2025-1-25 20:46:57
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}

/* ----------------------------------------------
 * Generated by Animista on 2025-1-25 20:55:7
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

/* ----------------------------------------------
 * Generated by Animista on 2025-1-25 20:58:51
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes puff-in-center{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes puff-in-center{0%{-webkit-transform:scale(2);transform:scale(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-filter:blur(0);filter:blur(0);opacity:1}}