@font-face {
    font-family: "brandon-medium";
    src: url("/fonts/BrandonTextCond-Medium.otf") format("opentype");
    font-weight: medium;
    font-style: normal;
}

@font-face {
    font-family: "brandon-light";
    src: url("/fonts/BrandonTextCond-Light.otf") format("truetype");
    font-weight: light;
    font-style: normal;
}

@font-face {
    font-family: "brandon-thin";
    src: url("/fonts/BrandonTextCond-Thin.otf") format("truetype");
    font-weight: light;
    font-style: normal;
}

@font-face {
    font-family: "brandon-black";
    src: url("/fonts/BrandonTextCond-Black.otf") format("truetype");
    font-weight: bolder;
    font-style: normal;
}

:root {
    font-size: 20pt;

    ::selection {
        background-color: rgba(0,0,0,0.8);

        color: white;
    }
}

/* BODY */
body {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0 5vw;
    width: 90vw;
    min-height: 100dvh;

    font-family: "brandon-light", sans-serif;

    a {
        color: black;
        text-decoration: none;
        font-family: "brandon-black";
    }
    a:hover {
        color: black;
        text-decoration: underline;
    }
    a:visited {
        color: black;
    }

    main {
        width: 80vw;

        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

header {
    width: 95vw;
    height: 5rem;

    display: flex;
    flex-direction: column;

    padding: 2vw 0 4vw 0;

    #logo {
        width: 30vw;

        display: flex;
        flex-direction: column;

        text-align: center;

        i {
            height: 1.8rem;

            margin-bottom: 0.3rem;

            font-style: normal;
            font-size: min(1.8rem);
        }
        mark {
            height: 1.2rem;

            padding: 0.05rem 0 0.2rem 0;

            background-color: black;

            color: white;
            font-family: "brandon-medium";
            font-size: 1.15rem;
        }
    }
    #search {
        height: 1rem;

        display: flex;
        align-items: center;
        align-self: flex-end;

        label {
            padding: 0.1rem 0.2rem 0 0;
        }

        input {
            width: 20vw;
            height: 1rem;

            padding: 0.2rem;

            border: none;

            background-color: black;
        
          color: white;
        }
    }
}


#slideshow {
    width: 35vw;
    height: 36vw;

    padding: 0 0 2rem 0;

    display: grid;
    grid-template-columns: 4vw 27vw 4vw;

    a {
        width: 4vw;
        height: 36vw;

        border: none;
        background: transparent;

        font-family: "brandon-thin";
        font-size: 3.5rem;
    }

    img {
        min-width: 27vw;
        max-height: 36vw;

        overflow: hidden;
    }

    span {
        width: 27vw;

        padding: 0.5vw 4vw 0 4vw;

        font-family: "brandon-thin";
        font-size: 1.25rem;
        text-align: end;
        text-wrap: nowrap;
    }
}

#slideshow-details {
    width: calc(35vw - 2*0.75vw - 2*2px);

    margin: 0 0 2vw 0;
    padding: 0.75vw;
    
    display: grid;

    border: solid 2px black;

    div {
        max-width: 90%;

        display: flex;
        flex-wrap: wrap;
        gap: 0 0.2rem;
    }
    #slideshow-details-map {
        justify-self: flex-end;
    }
}

.gallery {
    width: 66vw;

    display: flex;
    flex-wrap: wrap;
    gap: 2vw 2vw;

    .gallery-pages {
        width: 66vw;
        height: 1.2rem;

        display: flex;
        align-items: center;
        justify-content: end;

        span {
            padding: 0.1rem 0.2rem 0 0;

            font-size: 1.3rem;
        }

        a, mark {
            padding: 0 0.2rem;
            
            background-color: black;
            
            color: white;
            font-family: "brandon-light";
            font-size: 1rem;
        }
    }

    .gallery-entry {
        width: 15vw;
        height: 15vw;

        background-size: cover;
        background-position: 50% 50%;

        .gallery-entry-cover {
            width: 15vw;
            height: 15vw;

            display: flex;
            align-items: center;
            justify-content: center;

            background-color: rgba(255,255,255,0.8);
            backdrop-filter: blur(1px);

            filter: opacity(100);
            transition: 0.25s ease-in-out;
        }
    }
    .gallery-entry:hover {
        .gallery-entry-cover {
            filter: opacity(0);

            transition: 0.25s ease-in-out;
        }
    }
}