@font-face {
    font-family: Montserrat-Bold;
    src: url(../font/Montserrat-Bold.woff2);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Montserrat-Light;
    src: url(../font/Montserrat-Light.woff2);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Montserrat-Medium;
    src: url(../font/Montserrat-Medium.woff2);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: Roboto-Regular;
    src: url(../font/Roboto-Regular.woff2);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: RobotoMono-Regular;
    src: url(../font/RobotoMono-Regular.woff2);
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: RobotoMono-Regular, sans-serif;
    padding: 0;
    margin: 0;
    background-color: #B7B6B2;
}

ul {
    font-family: Montserrat-Bold, sans-serif;
    font-size: 7.7vw;
    line-height: 1em;
    list-style-type: none;
    margin: 16px 0 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

li {
    color: #434542;
    text-decoration: none;
}

li.nav1 {
    font-family: Montserrat-Medium, sans-serif;
    opacity: 0.5;
}

li.nav2 {
    font-family: Montserrat-Light, sans-serif;
    opacity: 0.3;
}

li a {
    color: #434542;
    text-decoration: none;
}

li a:hover {
    text-decoration: underline 24px #BBF449;
}

.gallery {
    columns: 300px;
    max-width: 1299px;
    width: 80%;
    margin: 10% auto 16px auto;
    padding: 0;
}

.gallery .item {
    position: relative;
    padding: 21px;
    margin: 0 -31px -15px 0;
}

.item img {
    width: 100%;
    height: auto;
}

/* vier Fadenkreuze an den Ecken der Bilder */

:root {
    --cross-size: 15px;
    /* Größe des Fadenkreuzes */
    --cross-offset: 0px;
    /* Abstand nach außen */
}

.gallery .item::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        url("../img/fadenkreuz.png"),
        /* oben links */
        url("../img/fadenkreuz.png"),
        /* oben rechts */
        url("../img/fadenkreuz.png"),
        /* unten links */
        url("../img/fadenkreuz.png");
    /* unten rechts */
    background-repeat: no-repeat;
    background-size: var(--cross-size);
    background-position:
        top var(--cross-offset) left var(--cross-offset),
        top var(--cross-offset) right var(--cross-offset),
        bottom var(--cross-offset) left var(--cross-offset),
        bottom var(--cross-offset) right var(--cross-offset);
    opacity: 0.4;
}

.cfooter {
    font-size: calc(0.6vw + 0.3rem);
    width: fit-content;
    rotate: -90deg;
    margin-top: calc(7vw + 3rem);
    margin-left: calc(-5vw - 52px);
    color: #434542;
    opacity: 0.8;
}