main {
    background-color: rgb(0, 0, 0);
    filter: blur(40%);
    display: grid;
    place-items: center;
    height: 100%;
    z-index: -2;
}

article {
    border: solid black 1px;
    border-radius: 2em;
    width: 96%;
    height: 90vh;
    background-color: rgb(240, 240, 240);
    padding: 1em;
    gap: 1em;
    display: grid;
    grid-template-columns: 2em 6fr 2.4fr ;
    grid-template-rows: fit-content 1fr;
    overflow-y: scroll;
    position: relative;
    box-shadow: rgba(62, 160, 67, 0.12) 0px 19px 38px, rgba(29, 113, 132, 0.22) 0px 15px 12px;
    z-index: 1;
}
article > h1 {
    grid-column: 2/3;
    margin: 0;
}
article .date {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
article > a {
    order: -3;
    transform: rotate(-90deg);
    text-decoration: none;
    color: black;
    transform-origin: center center;
    width: fit-content;
    font-size: 2em;
    transition: 100ms;
}
article > a:hover {
    scale: 1.1;
}

article > div {
    grid-column: 1/4;

    grid-row: 2/3;

    height: 100%;
    overflow-y: auto;
}
article > div section {
    position: relative;
}
article > div h2 {
    --sticky-top: 0rem;
    top: var(--sticky-top);
    z-index: 9;
}
article > div h3 { 
    --sticky-top: 2.1rem;
    top: calc(var(--sticky-top) + clamp(var(--font-size-heading), calc(var(--font-size-heading) * 0.6522) + 1.2vw, calc(var(--font-size-heading) + 0.7em)) - (var(--sticky-top) / 1.5));
    z-index: 8;
}
article > div h4 {
    --sticky-top: 4rem;
    top: calc(var(--sticky-top) + clamp(var(--font-size-heading), calc(var(--font-size-heading) * 0.6522) + 1.2vw, calc(var(--font-size-heading) + 0.7em)) - (var(--sticky-top) / 5));
    z-index: 7;
}

article > div p, article > div li, article .date{
    max-width: 40em;
    margin-block: 0;
    font-size: clamp(1rem, calc(1rem * 0.6522) + 0.87vw, 1.4rem);
}
article > div code {
    font-size: clamp(0.95rem, calc(1rem * 0.4) + 0.87vw, 1.2rem);
}

article > div img {
    width: 100%;
}
article > nav li {
    font-size: clamp(1rem, 0.6522rem + 1.05vw, 1.4rem);
}

article > div p:not(:last-of-type){
    margin-bottom: 1em;
}
article > div h2, article > div h3, article > div h4 {
    padding-top: 1.5em;
    padding-bottom: 0.5em;
    align-self: start;
    position: sticky;
    height: 1.7em;
    height: fit-content;
    background-color: rgb(240, 240, 240);
    animation: addBorder linear forwards;
    font-size: clamp(calc(var(--font-size-heading) - 0.3em), calc(var(--font-size-heading) * 0.6522) + 1.2vw, calc(var(--font-size-heading) + 0.7em));
    margin-block: 0;
    animation-timeline: view();
    animation-range: calc(90vh - 3em - var(--sticky-top) - 80px) calc(100vh - 10vh - 25px);
}

@keyframes addBorder {
    from { 
        border-bottom: solid 0px white;
    }
    10% {
        border-bottom: solid 0px white;
    }
    80% {
        border-bottom: solid 4px var(--color-body);
    }
    to {
        border-bottom: solid 4px var(--color-body);
        /* font-size: calc( var(--font-size-heading) - 0.2em); */
        padding-block: 0.2em;
        padding-bottom: 0.1em;
    }
}


/* Nav */

article .nav {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: none;
    justify-content: center;
    padding-block: 0.5rem;
    padding-top: 0;
    grid-column: 3/4;
    grid-row: 2/3;
}
article .nav ul {
    border-inline-start: var(--color-body) solid 2px;
    width: fit-content;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: fit-content;
    max-height: 100%;
}
article .nav ul li a{
    padding-block: 0.5em;
    display: block;
}
article .nav::after {
    content: "";
    position: absolute;
    background: var(--color-body);
    opacity: 0;
    pointer-events: none;
    transition: 200ms;
}

/* TODO gewoon met js doen */
@supports(anchor-name: --anchor) {
    
    article .nav li:nth-of-type(1) { anchor-name: --1; }
    article .nav li:nth-of-type(2) { anchor-name: --2; }
    article .nav li:nth-of-type(3) { anchor-name: --3; }
    article .nav li:nth-of-type(4) { anchor-name: --4; }
    article .nav li:nth-of-type(5) { anchor-name: --5; }
    article .nav li:nth-of-type(6) { anchor-name: --6; }
    article .nav li:nth-of-type(7) { anchor-name: --7; }
    article .nav li:nth-of-type(8) { anchor-name: --8; }
    article .nav li:nth-of-type(9) { anchor-name: --9; }
    article .nav li:nth-of-type(10) { anchor-name: --10; }
    article .nav li:nth-of-type(11) { anchor-name: --11; }
    article .nav li:nth-of-type(12) { anchor-name: --12; }
    article .nav li:nth-of-type(13) { anchor-name: --13; }
    article .nav li:nth-of-type(14) { anchor-name: --14; }
    article .nav li:nth-of-type(15) { anchor-name: --15; }
    article .nav li:nth-of-type(16) { anchor-name: --16; }
  
    :root { --anchor: --develop; }
    :root:has(article .nav li:nth-of-type(1):hover, article .nav li:nth-of-type(1) a[data-in-viewport="true"]) { --anchor: --1; }
    :root:has(article .nav li:nth-of-type(2):hover, article .nav li:nth-of-type(2) a[data-in-viewport="true"]) { --anchor: --2; }
    :root:has(article .nav li:nth-of-type(3):hover, article .nav li:nth-of-type(3) a[data-in-viewport="true"]) { --anchor: --3; }
    :root:has(article .nav li:nth-of-type(4):hover, article .nav li:nth-of-type(4) a[data-in-viewport="true"]) { --anchor: --4; }
    :root:has(article .nav li:nth-of-type(5):hover,  article .nav li:nth-of-type(5) a[data-in-viewport="true"]) { --anchor: --5; }
    :root:has(article .nav li:nth-of-type(6):hover, article .nav li:nth-of-type(6) a[data-in-viewport="true"]) { --anchor: --6; }
    :root:has(article .nav li:nth-of-type(7):hover, article .nav li:nth-of-type(7) a[data-in-viewport="true"]) { --anchor: --7; }
    :root:has(article .nav li:nth-of-type(8):hover, article .nav li:nth-of-type(8) a[data-in-viewport="true"]) { --anchor: --8; }
    :root:has(article .nav li:nth-of-type(9):hover, article .nav li:nth-of-type(9) a[data-in-viewport="true"]) { --anchor: --9; }
    :root:has(article .nav li:nth-of-type(10):hover, article .nav li:nth-of-type(10) a[data-in-viewport="true"]) { --anchor: --10; }
    :root:has(article .nav li:nth-of-type(11):hover, article .nav li:nth-of-type(11) a[data-in-viewport="true"]) { --anchor: --11; }
    :root:has(article .nav li:nth-of-type(12):hover, article .nav li:nth-of-type(12) a[data-in-viewport="true"]) { --anchor: --12; }
    :root:has(article .nav li:nth-of-type(13):hover, article .nav li:nth-of-type(13) a[data-in-viewport="true"]) { --anchor: --13; }
    :root:has(article .nav li:nth-of-type(14):hover, article .nav li:nth-of-type(14) a[data-in-viewport="true"]) { --anchor: --14; }
    :root:has(article .nav li:nth-of-type(15):hover, article .nav li:nth-of-type(15) a[data-in-viewport="true"]) { --anchor: --15; }
    :root:has(article .nav li:nth-of-type(16):hover, article .nav li:nth-of-type(16) a[data-in-viewport="true"]) { --anchor: --16; }
    
    article .nav:has(li:hover) {
        opacity: 1;
    }
    article .nav:has(li a[data-in-viewport="true"]):after {
        opacity: 0.5;
    }
    
    nav::after {
        position-anchor: var(--anchor);
        position-visibility: anchors-visible;
      inset:
        anchor(top)
        anchor(right)
        anchor(bottom)
        anchor(left);
    }
}

/* 
li:nth-of-type(1){--anchorName: --1}
li:nth-of-type(2){--anchorName: --2}
li:nth-of-type(3){--anchorName: --3}
li:nth-of-type(4){--anchorName: --4}
li:nth-of-type(5){--anchorName: --5}
li:nth-of-type(6){--anchorName: --6}


@supports(anchor-name: --anchor) {
    
    article .nav li { anchor-name: var(--anchorName);}

    :root { --anchor: --1; }
  
    :root:has(article .nav li:hover) { --anchor: var(--anchorName);}

    nav::after {
        position-anchor: var(--anchor);
        inset:
            anchor(top)
            anchor(right)
            anchor(bottom)
            anchor(left);
    }
}  */

article .nav {
    width: 100%;
}
article .nav li {
    list-style: none;
    z-index: 99;
}

article .nav li[data-tag="h3"]{
    padding-left: 0.4em;
}
article .nav li[data-tag="h4"]{
    padding-left: 0.8em;
}
article .nav li[data-tag="h5"]{
    padding-left: 1.2em;
}
article .nav li a {
    text-decoration: none;
    color: color-mix(in srgb, var(--color-main) 30%, var(--color-mix));
    transition: 200ms;
    padding: 0.5rem;

}

article .nav li a[href="#"]:hover{
    text-decoration: line-through;
    color: color-mix(in srgb, var(--color-main) 60%, var(--color-mix));
}

@media (prefers-reduced-motion:no-preference){
    div {
        scroll-behavior: smooth;
    }
}

main > img {
    position: absolute;
    object-fit: cover;
    order: -2;
    width: 100%;
    height: 100%;
    filter: blur(20px);
}

@media (min-width: 31.25em) {
    article .nav {
        display: flex;
    }
    article > div {
        grid-column: 1/3;
    }
}
@media (min-width: 44.125em) {
    article {
        width: 90%;
        gap: 2em;
        padding: 2em;
    }
}