/*Grid-layout Bazeja april 2021 */
:root {
    --clr-text: hsl(0, 0%, 100%);
    --clr-backgroundtext: hsla(0, 0%, 0%, 0.75);
    --clr-bgr: hsl(0, 0%, 4%);
    --clr-foreground: hsla(0, 0%, 21%, 0.5);
    --clr-error: hsl(0, 100%, 50%);
    --clr-succes: hsl(120, 100%, 25%);
    /* --font-size: 16; 
    --font-unit: 1pt;
    --font-dyn-size: calc(var(--font-size) * var(--font-unit));*/
}

html {
    scroll-behavior: smooth;
    min-height: 100%;
}

.scroll-to-top {
    position: fixed;
    color: bisque;
    background-color: var(--clr-ul-bg);
    padding: .3em;
    box-shadow: 0 .2rem hsl(0deg 3% 61%);
    border-radius: .7rem 0 2rem 0;
    bottom: .2rem;
    right: .2rem;
    /*bottom&right kan worden vervangen door inset: auto 1rem 1rem auto;*/
}

body {
    font-family: Copperplate, sans-serif;
    background: url(../images/sitebouw/MonkeyHead-backgr.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: var(--clr-backgroundtext);
    color: var(--clr-text);
    -webkit-background-size: cover;
    min-height: 100%;
    /* grid: auto/ 1em 1fr 1em; */
}

#layout {
    display: grid;
    padding: 0.25rem;
    grid-template-columns:
        1fr repeat(4, minmax(0, 266px)) 1fr;
    grid-template-rows:
        repeat(9, min-content);
    grid-template-areas:
        "nav nav nav nav nav nav"
        "banner banner banner banner banner banner"
        "header header header header header header"
        "title title title title title title"
        "section section section section section section"
        "cover cover cover cover cover cover"
        "column column column column column column"
        "content content content content content content"
        "footer footer footer footer footer footer"
    ;
}

#nav {
    grid-area: nav;
    display: grid;
    /* box-shadow: 1rem 1rem 1rem hsl(0 0% 100%/ 0.3); */
}

#banner {
    grid-area: banner;
    display: grid;
    padding: 2rem;
}

#banner img {
    display: grid;
    max-width: 70%;
    justify-self: center;
}

#header {
    grid-area: header;
}

#header img {
    width: 100%;
    height: 100%;
}

#title {
    grid-area: title;
    display: grid;
    place-content: center center;
}

#section {
    grid-area: section;
    display: grid;
}

.section-item {
    display: grid;
    justify-content: center;
    align-content: start;
    padding: 1.5rem;
    /* box-shadow: 1rem 1rem 1rem hsl(0 0% 100%/ 0.3); */
}

.section-item img {
    display: grid;
    /*box-shadow:1px 1px 1px 0 rgb(104, 104, 104);*/
    width: 100%;
}

.grow:hover {
    transition: transform 250ms ease;
    transform: scale(1.05);
}


/* .section-item-span {
    grid-column: 1/3;
} */

.section-item iframe {
    display: grid;
    width: 18rem;
    padding-bottom: 1rem;
}

#cover {
    grid-area: cover;
}

.cover-item {
    display: grid;
    padding: 1rem;
    background: var(--clr-foreground);
    /* box-shadow: 1rem 1rem 1rem hsl(0 0% 100%/ 0.3); */
}

.cover-item-media {
    display: grid;
    background-color: var(--clr-backgroundtext);
    justify-content: center;
    align-content: center;
    padding: 1rem;
}

#cover img {
    width: 100%;
    height: auto;
}

.video-item{
    display:grid;
    width:100%;
    justify-self:center;
    align-self:center;
}

#column {
    grid-area: column;
}


.column-column {
    display: grid;
    padding: 1rem;
    justify-content: center;
    align-content: start;
    /* box-shadow: 1rem 1rem 1rem hsl(0 0% 100%/ 0.3); */
}

.column-column img {
    width: 98%;
}

#content {
    grid-area: content;
    padding: 0.25rem;
}

#content img {
    width: 100%;
}

#content .flag {
    width: 1rem;
}

#content .bulit{
    width:0.8rem;
}

/* #section, .stretch {
    height: 75vh;
} */

#footer {
    grid-area: footer;
    display: grid;
    background-color: var(--clr-foreground);
    border-radius: 5px;
    margin-top: auto;
}

.footer-item-1 {
    grid-column: 1/2;
    margin-left: -0.4rem;
}

.footer-item-2 {
    grid-column: 2/3;
    display: grid;
    justify-content: center;
}

.footer-item-3 {
    grid-column: 3/4;
    display: grid;
    justify-content: end;
    align-content: start;
    margin-top: -0.1rem;
}

.footer-item-4 {
    grid-column: 1/4;
    display: grid;
    justify-content: center;
    align-content: end;
}

@media screen and (min-width: 480px) {
    #layout {
        grid-template-areas:
            ". nav nav nav nav ."
            ". banner banner banner banner ."
            ". header header header header ."
            ". title title title title ."
            ". section section section section ."
            ". cover cover cover cover ."
            ". column column column column ."
            ". content content content content ."
            ". footer footer footer footer ."
        ;
        grid-template-rows:
            repeat(9, min-content);
    }

    /* New version below, Thank's to Kevin Powell */
    #section {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: dense;
    }

    .section-item.grid-left {
        display: grid;
        grid-column-start: 2;
    }

    .section-item.grid-right {
        display: grid;
        grid-column-start: 1;
    }

    .section-item iframe {
        display: grid;
        width: 25rem;
        padding-bottom: 1rem;
    }

    .section-item-span {
        grid-column: 1/3;
    }

    #cover {
        grid-area: cover;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }


    #column {
        grid-area: column;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .techno {
        width: 20rem;
        float: left;
        margin-right: 1rem
    }

    #footer {
        grid-area: footer;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
}