* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: watchwordbold;
    src: url("../assets/Watchword_bold_demo.otf");
}

@font-face {
    font-family: watchwordreg;
    src: url("../assets/Watchword_regular_demo.otf");
}

:root {

    --veronica-main: #FFFFFF;
    --veronica-second: #FE0170;
    --100nl-main: #FFFFFF;
    --100nl-second: #12A638;
    --slam-main: #FFFFFF;
    --slam-second: #007AFF;
    --main-bg: #EEEEEE;
    --second-bg: #FFFFFF;
    --header-bg: #08022D;
    --normal-text: #000000;
    --faded-text: #383737;
    --inverted-text: #FFFFFF;
    --tijdlijn: #ff0000;

    @media (prefers-color-scheme: dark) {

        --veronica-main: #0091FF;
        --veronica-second: #FE0170;
        --100nl-main: #EF7D00;
        --100nl-second: #12A638;
        --slam-main: #E50069;
        --slam-second: #007AFF;
        --main-bg: #010B31;
        --second-bg: #06021D;
        --header-bg: #06021D;
        --normal-text: #ffffff;
        --faded-text: #ffffff;
        --inverted-text: #ffffff;
        --tijdlijn: #ff0000;
    }

    --header-height: 5rem;

    --layout-sc-body: "header header header "
    "main main main"
    "player player player";

    --layout-dt-body: "header header"
    "player main"

}

h1 {
    font-family: watchwordreg;
    color: var(--inverted-text);
    /* z-index: 15; */
    align-content: center;
    padding-left: 1em;
}

h2,
h3 {
    font-family: watchwordbold;
    color: var(--normal-text);
}

.hidden {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

p {
    font-family: watchwordreg;
    color:var(--normal-text);

}

body {
    display: grid;
    grid-template-areas: var(--layout-sc-body);
    background-color: var(--main-bg);

    @media (min-width: 1100px) {
        grid-template-areas: var(--layout-dt-body);
        grid-template-columns: max-content 1fr;
    }
}

header {
    background-color: var(--header-bg);
    font-family: watchwordreg;
    grid-area: header;
    height: 5em;
    position: sticky;
    z-index: 10;
    top: 0;
    display: flex;
    justify-content: space-between;

    nav {
        background-color: var(--header-bg);
        width: 50%;
        height: fit-content;
        display: grid;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0 0 15px 15px;
        padding: 5em 3em 3em 0;
        translate: -250%;

    }

    button {
        all: unset;
        color: var(--inverted-text);
        z-index: 1;

        img {
            width: 3em;
            margin: 1em;
        }
    }

    .btn.is-open img {
        content: url(../assets/x.svg);

    }

    .is-open {
        translate: 0;
    }

    details {
        color: var(--inverted-text);
        padding-left: 2em;
        cursor: pointer;
        /* display: grid; */
        /* display: flex; */
        /* flex-direction: column; */
        /* gap: 1em; */

        summary {
            font-family: watchwordbold;
            padding: .3em;
        }

        a {
            all: unset;
            display: flex;
            flex-direction: column;
            color: var(--inverted-text);
        }
    }

    @media (min-width: 630px) {

        button {
            display: none;
        }

        nav {
            position: relative;
            translate: 0;
            display: flex;
            justify-content: end;
            height: fit-content;
            padding: .4em 1em 0 0;
            /* background-color: unset; */
            /* padding: 3.3em; */
            /* top:unset; */
            width: unset;
            /* height: unset; */
        }

        details {
            padding: 1em;
            /* display: ruby-text; */

            /* a {
                flex-direction: row;
            } */
        }
    }
}

.player {
    background-color: var(--second-bg);
    width: 98%;
    border-radius: 15px;
    display: grid;
    grid-area: player;
    position: sticky;
    bottom: 7px;
    z-index: 2;
    margin: .5em;
    grid-template-columns: auto max-content;
    grid-template-rows: repeat(2, 1fr);

    .spellbook {
        display: none;
    }

    h2 {
        padding: .5em .5em 0 .5em;
        grid-column: 1;
        grid-row: 1;
    }

    p {
        padding: 0 .5em 0 .8em;
        grid-column: 1;
        grid-row: 2;
    }

    audio {
        all: unset;


    }

    button {
        all: unset;
        grid-column: 2;
        grid-row: 1/-1;
        padding: .5em;
        transition: .2s;
        cursor: pointer;

        &:hover {
            scale: 1.3;
        }
    }

    @media (min-width: 1100px) {
        grid-template-columns: max-content;
        grid-template-rows: max-content max-content max-content max-content;
        height: 85vh;
        top: 5.5em;

        .spellbook {
            display: grid;
            grid-row: 1;
            grid-column: 1;
            justify-self: center;
            margin: 2em;
            border-radius: 15px;
            width: 1;
            height: 1;
        }

        h2 {
            grid-row: 2;
            grid-column: 1;
            justify-self: center;
        }

        p {
            grid-row: 3;
            grid-column: 1;
            justify-self: center;
        }

        button {
            grid-row: 4;
            grid-column: 1;
            justify-self: center;

            img {
                width: 1;
                height: 1;
            }
        }
    }
}

main {
    grid-area: main;
    display: grid;
    gap: .5rem;
    background-color: var(--main-bg);
    grid-template-columns: auto repeat(3, 1fr);
    grid-template-rows: auto repeat(25, 1fr);
    padding-top: .5em;
    /* padding-bottom: 5em; */
    overflow-x: scroll;
    scrollbar-color: var(--faded-text) var(--main-bg);
    scrollbar-width: thin;

    @media (min-width: 670px) {
        overflow-x: clip;
        padding-top: 0;
        padding: 0 1em 0 1em;
    }
}

.datum {
    grid-column: 1;
    grid-row: 1;
    width: 5.5em;
    padding-left: .3em;
    display: flex;
    align-items: center;

    @media (min-width: 670px) {
        position: sticky;
        top: var(--header-height);
        background-color: var(--main-bg);
        z-index: 3;
        padding: 0.5rem 0;
    }
}

input[type="date"] {
    background-color: var(--main-bg);
    color: var(--faded-text);
    border: unset;
    font-family: watchwordreg;
    font-size: 16px;
    /* text-align: center; */


}

::-webkit-calendar-picker-indicator {
    display: none;
}

.timeline {
    width: 100%;
    height: 2px;
    background-color: var(--tijdlijn);
    position: absolute;
    z-index: 2;
    /* top: calc(var(--time) / 24 * 100% - 19px); */
    top: calc((var(--hours) + var(--mins) / 60) / 25 * 100%);
}

.zender {
    display: grid;
    grid-template-rows: subgrid;
    grid-column: var(--col-start);
    grid-row: 1 / -1;
}

section {

    .logos {
        display: flex;
        justify-self: center;
        z-index: 3;

        @media (min-width: 670px) {
            position: sticky;
            top: var(--header-height);
            background-color: var(--main-bg);
            width: 100%;
            justify-content: center;
            padding: 0.5rem 0;
        }
    }

    article {
        /* background-color: var(--second-bg); */
        border-radius: 15px;
        grid-row: calc(var(--row-start) + 1) / calc(var(--row-end) + 1);
        display: grid;
        padding: .5em;
        grid-template-columns: 1fr max-content;
        grid-template-rows: 1fr max-content;

        h3 {
            font-size: 1em;
            grid-row: 1;
        }

        p {
            align-content: end;
            grid-row: 2;
        }

        .info-btn {
            grid-row: 2;
            grid-column: 2;
            z-index: 1;
            transition: .2s;
            cursor: pointer;
            width: 1;
            height: 1;

            &:hover {
                scale: 1.3;
            }
        }
    }

    .veronica, .nl100, .slam {
        background-color: var(--veronica-main);
    }

    .nl100 {
        background-color: var(--100nl-main);
    }

    .slam {
        background-color: var(--slam-main);
    }
    

    /* veronica */
    .logo-veronica {
        width: 7em;
        height: 100%;
    }

    /* 100%nl */
    .logo-nl {
        width: 7em;
        height: 100%;
    }

    /* slam! */
    .logo-slam {
        width: 7em;
        height: 100%;
    }
}

.tijden {

    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    grid-column: var(--col-start) / var(--col-end);
    grid-row: 2/-1;

    
    text-align: center;
    position: relative;

    p {
        color: var(--faded-text);
        grid-column: 1;
    }

}