:root {
    --load-animation: 0.7s ease-in-out 0.4s backwards;
}

::selection {
    color: var(--second100);
    background-color: var(--first100);
}

::marker {
    color: var(--first50);
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--second100);
    font-size: 16px;
    width: 100vw;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--main-font);
    overflow: hidden;
}

header {
    height: 15vh;
    background-color: var(--second100);
    color: var(--first100);
    border-bottom: 1px solid var(--first20);
    padding: 12px 12px 0px 12px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    animation: header-load var(--load-animation);
    
    a{
        font-size: clamp(2.5rem, 1.702rem + 2.553vw, 5rem);
        font-family: var(--main-font);
        text-decoration: none;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: -2px;
        animation: header-a-load var(--load-animation);
    }

    a:hover {
        background-color: inherit;
        color: inherit;
    }
}

@keyframes header-load {
    from {
      height: 98vh;
      padding: 12px 12px 2vh 12px;
    }
  }

  @keyframes header-a-load {
    from {
        font-size: clamp(7rem, 1.702rem + 2.553vw, 12rem);
    }
  }

  
  .tags {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      align-self: flex-end;
      justify-content: flex-start;
      gap: 8px;
    }
    
    .tag {
        display: inline-flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: flex-start;
        background-color: var(--first10);
        height: 20px;
        color: var(--first100);
        border-radius: 4px;
        padding: 4px 8px 4px 8px;
        font-size: 14px;
        font-family: var(--main-font);
        text-decoration: none;
        font-style: normal;
        
    }
    
    .name-mottos {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        align-items: baseline;
        width: 100%;
        text-align: right;
    }
    
container {
    width: 100%;
    height: 85vh;
    display: flex;
    flex-direction: row;

    animation: container-load var(--load-animation);
}

@keyframes container-load {
    from {
      height: 0vh;
    }
  }

section {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    -webkit-scrollbar: none; /* WebKit */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    /*
       scroll-behavior: smooth går i beina på lazy-loading av bilder.

       Vi har lazy-loading av bilder med HTML ala denne:

         <img loading="lazy" src="olav.jpg">

       Når vi samtidig har scroll-behavior: smooth, risikerer vi at følgende skjer:

       1. En bruker får lastet nettsiden kjapt fordi vi lazy-loader bilder
       2. Brukeren trykker på en lenke langt ned, feks OLORM-7
       3. Brukeren kommer ikke ned til OLORM-7, scrollen stopper feks på OLORM-33.

       Så hva har skjedd?
       1. Nettleseren regnet ut at det var (feks) 7000 px ned til OLORM-7
       2. Nettleseren begynner å scrolle
       3. Imens nettleseren scroller, blir bilder laster inn.
       4. Nettleseren stopper å scrolle etter å ha scrollet 7000 px, MEN nå
          har avstanden fra toppen og ned til OLORM-7 økt til 13000 px.

       Med andre ord, vi må gjøre et valg på hvordan dette funker.

       Kommenter inn igjen scroll-behavior: smooth hvis du vil, men la gjerne
       denne comment-blokka bli igjen så vi bevarer kontekst & intensjon.

   */
    /*scroll-behavior: smooth;*/
    transition: ease-in-out 0.3s;
    opacity: 1;
}


section:hover ~ section, section:has(~ section:hover) {
    && img {
        filter: grayscale(1);
        mix-blend-mode: screen;
    }
}

.navigation {
    width: 50%;
    border-right: 1px solid var(--first20);
}

nav {
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
}


.navList {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: fit-content;
    cursor: cell;
    gap: 4px;
    padding: 8px 12px 8px 12px;
    text-decoration: none;
    transition: ease-out 0.3s;
    border-bottom: 0;
    border-bottom: 1px solid var(--first10);

    > p {
        padding: 0;
    }
}

.navList:hover {
    background-color: var(--first100);
    cursor: cell;
    transition: ease-out 0s;

    p {
        color: var(--second100);
    }
}


.navList:active {
    background-color: var(--first80);
}



.navTitle{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 80%;
    padding-right: 0;
    margin: 0;
    text-decoration: none;
}

.navListData {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.navMeta {
    color: var(--first50);
    white-space: nowrap;
    padding: 0;
    margin: 0;
}


.content {
    width: 50%;
}

@media screen and (max-width: 800px) {
    .navList {
        flex-direction: column;
        gap: 0;
    }

    .navTitle {
        max-width: 100%;
    }
    
    header {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 12px;
    
        > a { 
            font-size: clamp(4rem, 1.3rem + 4vw, 6rem);
            animation: header-a-load-small var(--load-animation);
        }
    }
    
    @keyframes header-a-load {
        from {
            font-size: clamp(4rem, 1.3rem + 4vw, 6rem);
        }
    }
    
    
    .tags {
        align-self: flex-start;
    }
    
    .name-mottos {
        align-items: flex-start;
        flex-direction: column;
        > p { 
            padding: 0; 
            margin: 0;
        }
    }
}


@media screen and (max-width: 600px) { /* Mobile */

    container { 
        margin: 0;
        padding: 0;
    }

    .navigation, .filters {
        display: none;
    }


    .content {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .doc {
        /*height: 100vh;*/
        margin-bottom: 5rem;
    }
}