* {
    margin: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

@font-face {
    font-family: "KontextDot0033";
    src: url(./KontextDot0033/KontextDot0033.woff);
    src: url(./KontextDot0033/KontextDot0033.woff2);
}

@font-face {
    font-family: "Georgia-regular";
    src: url(./assets/fonts/Georgia/georgia.ttf);
}

@font-face {
    font-family: "Georgia-bold";
    src: url(./assets/fonts/Georgia/georgiab.ttf);
}

@font-face {
    font-family: "Georgia-italic";
    src: url(./assets/fonts/Georgia/georgiai.ttf);
}

@font-face {
    font-family: "Georgia-bold-italic";
    src: url(./assets/fonts/Georgia/georgiaz.ttf);
}

.font-bold {
    font-family: "Georgia-bold";
}

#main {
    position: relative;
    overflow-x: auto;
}


.main-head {
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    background-color: whitesmoke;
}

#main-logo {
    position: absolute;
    font-family: 'KontextDot0033';
    color: rgb(79 79 79);
    top: calc(var(--vh, 1vh) * 1.5);
    right: 3vw;
    padding: 2px 10px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 6;
}

#main-logo:hover {
    cursor: unset;
}

.Kontext-texts {
    font-size: clamp(25px, 4vw, 35px);
}

/* #scroll-btn-volume,
#scrollBtn-index {
  position: absolute;
  display: none;
  background: white;
  border: 1px solid black;
  padding: 8px 16px;
  z-index: 2;
  cursor: pointer;
} */

#scroll-btn-volume {
    bottom: 15px;
    right: 10px;
}

#scrollBtn-index {
    top: calc(var(--vh, 1vh)*3);
    right: 10px;
}

.main-head #scroll-btn-volume,
.main-head #scrollBtn-index {
    display: none !important;
} 


.main-sections {
    display: grid;
    position: relative;
    grid-template-columns: 50vw 50vw;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 5;
    background-color: white;
}

.poster-main {
    position: relative;
    display: flex;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    margin: auto;
    justify-content: center;
}

.upperPoster {
    width: fit-content;
    height: 60vh;
    margin: auto;
    align-content: center;
    display: flex;

}


#upperPoster-berlin {
    background-color: #E3E3E3;
}

.section-logos {
    height: 50px;
    width: auto;
    cursor: alias;
    position:relative;
    z-index: 2;
}

#section-berlin {
    display: block;
    position: absolute;
    bottom: calc(var(--vh, 1vh) * 10);
    right: calc(var(--vh, 1vw) * 5);
}

#section-test {
    position: absolute;
    bottom: 20vh;
}