body{
      font-family: "Stack Sans Headline", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.logo {
    position: relative;
    margin: 0;
    margin-bottom: 5vh;
    width: 20vw;
    transform: translateX(-50%);
    left: 50%;
}
#overlay {
    position: fixed;
    inset: 0;
    filter: blur(7px);
    background: rgba(0, 0, 0, 0.397);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
    z-index: 6;
}

/* active blur */
#overlay.active {
    opacity: 1;
    pointer-events: all;
}
#gallery.disabled {
    pointer-events: none;
}

.blocks {
    position: absolute;
    z-index: 5;
    background-color: white;
    font-size: 4vw;
    padding: 10px;
    border-radius: 15px;
    filter: drop-shadow(4px 4px 10px rgb(0, 0, 0, 0.8));

    transform: translateX(-50%);

    min-width: 20vw;
    text-align: center;
}
#block1 {
    left: calc(50% - 19vw);
    top: 20vh;
}
#block2 {
    left: calc(50% + 19vw);
    top: 40vh;
}
.expanded {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    height: 100vh !important;
    width: 30vw !important;
    z-index: 1000 !important;
    transition: 0.35s ease;
    cursor: zoom-out;
}
.pictures img {
    border-radius: 15px;
    object-fit: fill;
    aspect-ratio: 9/16;
    position: absolute;  
    filter: drop-shadow(4px 4px 10px rgb(0, 0, 0, 0.8));
    transition: 0.5s ease;
}
.pictures img:hover {
    filter: drop-shadow(4px 4px 10px rgb(0, 148, 62));

}
.pictures {
    position: relative;
    width: 50vw;      /* width of the whole cluster */
    height: 40vw;     /* enough height for the overlaps */
    margin: 0 auto; 
  /* centers the whole group */
}
#pic3 {
    width: 20vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

#pic2 {
    width: 12vw;
    left: calc(50% - 16vw);
    top: 9vw;
    transform: translateX(-50%);
    z-index: 2;
}

#pic4 {
    width: 12vw;
    left: calc(50% + 14vw);
    transform: translateX(-50%);
    top: 6vw;
    z-index: 4;
}

#pic1 {
    width: 15vw;
    left: calc(50% - 22vw);
    transform: translateX(-50%);
    top: 3vw;
    z-index: 1;
}

#pic5 {
    width: 15vw;
    left: calc(50% + 22vw);
    transform: translateX(-50%);
    top: 5vw;
    z-index: 1;
}