/* 
    Default page behaviours
*/

* {
    user-select: none;  /* disable user selecting text */
    margin: 0;          /* removes unwanted margins */

    --font1: 'BetterGrade'; /* logo */
    --font2: 'Woolen';
    --font3: 'Rachelya'; /* fancy */
    --font4: 'PlayFair Italics';
    --font5: 'Penna';
    --font6: 'PlayFair Regular';
    --font7: 'PlayFair';

    --fontLogo: "BetterGrade";
    --fontFancy: "Rachelya";
    --fontNormal: "Public Sans, sans-serif";
}

/* FONT SIZES */
* {
    --header-min-height: 10.5vh;
    --header-min-font-size: 2.25vw;
    --hminh: var(--header-min-height);
    --hminfs: var(--header-min-font-size);
    
    --header-max-height: 17.5vh;
    --header-max-font-size: 2vw;
    --hmaxh: var(--header-max-height);
    --hmaxfs: var(--header-max-font-size);
}

::selection {
    background: rgb(0, 250, 255, 0.20);
}

/* 
    Header
*/

#header {
    position: fixed;
    width: 100vw;
    display: flex;
    background-color: #f9f9fe; /* lavender (#e6e6fa3b)*/
    z-index: 1000;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    top: 0;
    justify-content: center;
    transition: all ease-in-out 0.5s;
}

.header-max {
    height: var(--hmaxh);
    font-size: var(--hmaxfs);
}

.header-min {
    height: var(--hminh);
    font-size: var(--hminfs);
}

#headerSpace {
    transition: all ease-in-out 0.5s;
}

/*
    (Header) Gallery Menu
*/

#galleryMenu {
    width: 0;
    height: 10vh;
    display: flex;
    flex-direction: column;
    transition: transform ease-in-out 0.5s;
}

#galleryMenu * {
    transition: font-size ease-in-out 0.5s;
}

.galleryMenu-max {
    transform: translateY(calc((var(--hmaxh) - var(--hmaxfs)) / 2));
    font-size: 1.5vw !important;
}

.galleryMenu-min {
    transform: translateY(calc((var(--hminh) - var(--hminfs)) / 2));
    font-size: 1.25vw !important;
}

#galleryMenu.hidden {
    visibility: hidden;
}

#galleryMenu a {
    width: fit-content;
    block-size: fit-content;
    margin: 0vw !important;
    padding: 0.5vw !important;
    background-color:#f9f9fe;
    transform: translateX(1vw);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
}

#galleryMenu a:hover {
    background-color: #d9ecf5 !important;
}

/*
    Navigation bar
*/

#navigationBar {
    font-family: var(--fontFancy);
    letter-spacing: 0.08vw;
    display: inline-flex;

    /* align-items: center; */
    align-items: flex-start;

    text-align: center;
    justify-content: center;

    transition: transform ease-in-out 0.5s;
}

.header-max #navigationBar {
    transform: translateY(calc(var(--hmaxh) / 2 - 1vw));
}

.header-min #navigationBar {
    transform: translateY(calc(var(--hminh) / 2 - 1vw));
}

#navigationBar a {
    padding: 1vw;
    margin: 1vw;
    text-decoration: none;
    color: black;
    white-space: nowrap;
}

#navigationBar a:hover {
    background-color: rgb(113, 141, 154, 0.03);
}

#navigationBar a.currentPage {
    color: #718d9a;
    border-bottom: 2px solid #718d9a;
    background-color: rgb(113, 141, 154, 0.05);
}

#logo {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fontLogo);
    /*letter-spacing: 0.25vw;*/
    text-decoration: none;
    color: #08445e;
    transition: all ease-in-out 0.5s;
}

.logo-max {
    width: 40vw;
    font-size: 6vw;
}

.logo-min {
    width: 37.5vw;
    font-size: 5vw;
}