/* ------------------- Header -----------------*/

/* https://bennettfeely.com/clippy/ */
header {
    background: var(--header_color);
    color: var(--basic_white);
    font-size: 24px;

    padding: 10px var(--padding_calc);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    height: var(--height-header);

    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    box-sizing: border-box;

    /* https://yqnn.github.io/svg-path-editor/ */
    /* clip-path: path("M 0 40 L 0 0 L 110 0 L 110 20 L 75 20 C 35 20 60 40 25 40 T 0 40"); */
    /* clip-path: path("m 0 40 l 0 -40 l 110 0 l 0 20 l -35 0 c -40 0 -15 20 -50 20 t -25 0"); */

    box-shadow: 0px -5px 10px 1px rgba(0, 0, 0, 0.6) inset, 0px 10px 5px 1px rgba(255, 255, 255, 0.4) inset;
    width: 100%;
}

header img {
    width: 80px;
}

header img:hover {
    /* cursor: pointer; */
    scale: 1.05;
}

.header-left {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* -------------------  Navbar  -----------------*/
nav>img {
    cursor: pointer;
    height: var(--height_img);
}

nav>img:hover {
    filter: drop-shadow(0px 0px 2px var(--bg_color));
}