/*  version: 0.8 */
@import url(gs-animations.css);


:root {
    /* block layout widths for fluid design. Default. */
    --max-main-width: auto;
    --max-section-width: auto;
    --max-article-width: auto;
    --max-footer-width: auto;
    --max-navigation-width: auto;
    --sidebar1-width: var(--gold-mini);
    --sidebar2-width: var(--gold-mini);

    /* if body is set to [data-fixed-width] */
     --fixed-page-width:1200px;

    /* a full window height element */
    --fullheight: 100vh;
    
    /* -----use for particular parts------------- */
    
    --body-bg-color: hsla(47,45%,78%,1);
    /* --body-bg-color:hsla(10, 80%, 1% , 1); */
    --body-bg-image: url();
    --body-textcolor: hsla(36, 100%, 14% , 1);
    --main-bg-color: ;
    --main-bg-image: url();
    /* --section-bg-color: transparent ; */
    --section-bg-image: url();
    --section-fullwidth-bg-color: rgb(168, 53, 14);
    --section-fullwidth-fontcolor: hsla(48, 11%, 94% , 1);
    --article-bg-color: hsl(0, 0%, 100%);
    --article-bg-image: url();
    --header-bg-image: url();
    --header-bg-position: ;
    --header-div-image: url(../img/music.jpg);
    --footer-height: var(--space-big-x4);
    --footer-bgcolor: hsla(15,58%,47%,.8);
    --footer-bg-image: url();
    --footer-textcolor:hsla(48, 11%, 94% , 1); ;
    --footer-border: ;
    --footer-article-border:0;
    --footer-article-bg-color:transparent;
    --sidebar1-bg: hsla(10, 60%, 40% , 1);
    --sidebar2-bg: hsla(10, 60%, 30% , 1);
    --sidebar1-fontcolor:hsla(48, 11%, 94% , 1);
    --sidebar2-fontcolor:hsla(48, 11%, 94% , 1);

    /* --main-border: 10px solid var(--fontcolor1); */
    /* use anywhere: */
    --bgcolor: hsla(48, 11%, 94% , 1);
    --bgcolor1: hsla(47,45%,78%,1);
    --bgcolor2: hsla(8,41%,15%,1);
    --bgcolor3: hsla(15,58%,47%,1);
    --fontcolor: hsla(48, 11%, 94% , 1);
    --fontcolor1: hsla(36, 100%, 14% , 1);
    --fontcolor1-light: hsla(36, 100%, 14% , .2);
    --buttoncolor1: hsla(10, 61%, 61% , 1);
    --buttoncolor1-over: hsla(10, 80%, 1% , 1);
    --buttontext1: hsl(0, 0%, 100%);
    --linkcolor-visited: hsla(10, 80%, 1% , 1);
    --linkcolor-hover: hsla(10, 61%, 61% , 1);
    --linkcolor: hsla(36, 100%, 14% , 1);
    --linkcolor-active: hsla(0, 0%, 100% , 1);

    /* tekst groottes */
    --default-fontfamily:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --base-fontsize: clamp(1rem , 1.7vw , 1.5rem );
    --extreme-fontsize: 200%;
    --bigger-fontsize: 140%;
    --big-fontsize: 120%;
    --small-fontsize: 80%;
    --smaller-fontsize: 60%;
    --extrasmall-fontsize: 40%;
    --h3-size: clamp(1.35rem , 2vw , 2rem );
    --h2-size: clamp(1.7rem , 3vw , 2.5rem );
    --h1-size: clamp(2rem , 4vw , 3rem );

    /* main nav menu */
    --nav-bgcolor: hsl(17.5, 73.7%, 59.8% , 0.8);
    --nav-bg-image: url();
    --nav-bg-position: ;
    --menu-content-width: 100%;
    --menu-content-height:100%;
    --menu-content-justify: flex-end;
    --menu-align-items:center; 
    --menu-content-order: 0;
    --menu-bgcolor:transparent;
    --main-menu-height: var(--space-mega);
    --main-menu-align-items:center;
    --main-menu-justify-content:center;
    --main-menu-bg-color:transparent;
    --main-menu-column-gap: var(--space-big);
    --site-logo: url(../img/logo-small.png);
    --site-logo-width: 100%;
    --site-logo-height: 100%;
    --site-logo-position: left;
    --site-logo-max-width: 250px;
    --mobile-nav-height: 48px;
    --mobile-logo: url(../img/logo-small.png);
    /* nav buttons */
    --nav-link-min-width: 150px;
    --nav-link-bg: hsla(48, 11%, 94% , 1);
    --nav-link-bg-over: hsla(8,41%,15%,1);
    /* --nav-link-textcolor: hsla(48, 11%, 94% , 1); */
    --nav-link-textcolor-over: hsla(48, 11%, 94% , 1);

    /* gulden snede: 0,618 - 0,382.
   gecentreert: 0,191 | 0,618 | 0,191
   gemaximaliseerd: 0,0955 | 0,809 | 0,0955 */
    --space-small: 0.382rem;
    --space-medium: 0.618rem;
    --space-big: 0.809rem;
    --space-big-x2: 1.618rem;
    --space-big-x4: 3.236rem;
    --space-mega: 6.472rem;
    --space-mega-x2: 12.944rem;
        
    --gold-mini: 19.1%;
    --gold-small: 38.2%;
    --gold-medium: 61.8%;
    --gold-big: 80.9%;

    --window-width-mini: 19.1vw;
    --window-width-small: 38.2vw;
    --window-width-medium: 61.8vw;
    --window-width-big: 80.9vw;

    --window-height-mini: 19.1vh;
    --window-height-small: 38.2vh;
    --window-height-medium: 61.8vh;
    --window-height-big: 80.9vh;
    
    

    /* borders */
    --border1: var(--fontcolor1) thin double;
    --border2: 1px solid var(--fontcolor1-light);

    /* cards */
    --card-min-width: 20rem;
    --cardheader-bgcolor: hsla(10, 60%, 50% , 1);
    --cardcontent-bgcolor: hsla(48, 11%, 94% , 1);
    --cardfooter-bgcolor: hsla(10, 60%, 50% , 1);
    --cardgroup-textcolor: ;
    --cardheader-textcolor: hsla(48, 11%, 94% , 1);
    --cardcontent-textcolor: ;
    --cardfooter-textcolor: hsla(48, 11%, 94% , 1);
    --cardfooter-linkcolor: hsla(10, 60%, 50% , 1);

    /* buttons */
    --button-min-width:1rem;
    --button-color:hsla(48, 11%, 94% , 1);
    --button-color-hover: hsla(36, 100%, 14% , 1);
    --button-color-active: var(--buttoncolor1-over);
    --button-bgcolor:hsla(10, 60%, 50% , 1);
    --button-bgcolor-hover:hsla(47,45%,78%,.7);
    --button-bgcolor-active:hsla(10, 60%, 50% , 1);

    --button-sidebar1-min-width:90%;
    --button-sidebar1-color:hsla(48, 11%, 94% , 1);
    --button-sidebar1-color-hover: hsla(36, 100%, 14% , 1);
    --button-sidebar1-color-active: var(--buttoncolor1-over);
    --button-sidebar1-bgcolor:hsla(10, 60%, 50% , 1);
    --button-sidebar1-bgcolor-hover:hsla(47,45%,78%,.7);
    --button-sidebar1-bgcolor-active:hsla(10, 60%, 50% , 1);

    --button-sidebar2-min-width:90%;
    --button-sidebar2-color:hsla(48, 11%, 94% , 1);
    --button-sidebar2-color-hover: hsla(36, 100%, 14% , 1);
    --button-sidebar2-color-active: var(--buttoncolor1-over);
    --button-sidebar2-bgcolor:hsla(10, 60%, 50% , 1);
    --button-sidebar2-bgcolor-hover:hsla(47,45%,78%,.7);
    --button-sidebar2-bgcolor-active:hsla(10, 60%, 50% , 1);

   --animation-duration:.5s;

    /* to be done */


}



html {
  box-sizing: border-box;
  font-size: 16px;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  box-sizing: inherit;
}




/* body, header en link styles */
body {
    font-family: var(--default-fontfamily);
    color: var(--body-textcolor);
    font-size: var(--base-fontsize);
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;

    /* background image fullscreen fixed */
    background-color: var(--body-bg-color);
    background-image:var(--body-bg-image);
    background-size: cover;
    background-attachment: fixed;
}

h1 {    font-size: var(--h1-size);}
h2 {    font-size: var(--h2-size);}
h3 {    font-size: var(--h3-size);}

a:link {    color: var(--linkcolor);}
a:visited {    color: var(--linkcolor-visited);}
a:hover {    color: var(--linkcolor-hover);}
a:active {    color: var(--linkcolor-active);}

textarea {    width: 100%;}

img {
    border-radius: var(--space-small);
}

/* MAIN FRAMEWORK ELEMENTS */

main {
    width: 100%;
    max-width: var(--max-main-width);
    margin: auto;
    background-color: var(--main-bg-color);
    border: var(--main-border);
}

section {
    width: 100%;
    /* margin: auto; */
    margin: var(--space-big-x4) auto;
    /* padding: var(--space-big-x4) 0; */
    max-width: var(--max-section-width);
    background-color: var(--section-bg-color);
}

body section:first-child {
    margin-top:0;
}

article {
    background-color: var(--article-bg-color);
    padding: var(--space-big-x2);
    box-sizing:border-box;
}

article p:first-of-type {
    margin-top: 0;
}

article figure {
    width: 100%;
    padding: 0;
    margin: 0;
}

article figure figcaption {
    font-style: italic;
    font-size: 90%;
    text-align: left;
    margin-left: 1em;
    height: 3em;
}

[data-gs-footer] {
    display: flex;
    width: 100%;
    height: var(--footer-height);
    margin:auto;
    background-color: var(--footer-bgcolor);
    color: var(--footer-textcolor);
    max-width: var(--max-footer-width);
    border: var(--footer-border);
}

[data-gs-footer] article {
    border: var(--footer-article-border);
    margin: 0 auto;
    text-align: center;
    font-size: var(--small-fontsize);
    background-color: var(--footer-article-bg-color);
}

/* fixed width */
@media  (min-width:1024px) {
    
    body[data-fixed-width] main,
    body[data-fixed-width] nav#site-navigation,
    body[data-fixed-width] header,
    body[data-fixed-width] [data-gs-footer]
     {
        width: var(--fixed-page-width);
    }
    body[data-fixed-width] section {
        --section-bg-color: var(--article-bg-color);
        /* margin-top:50px; */
    }
    
}

/* Columns, fullwidth block, Hero, Cards, Buttons, presentation */

/* columns */
[data-gs-columns] {
    column-width:17rem;
    text-align: justify;
    font-size:1rem;
  }
  [data-gs-columns] h1, [data-gs-columns] h2 {
   text-align: center;
  }
  [data-gs-columns] img {width:100%;}
  
  
  
 
/* A FULLWIDTH SECTION BLOCK, so give it a bg and hide the article color */
[data-section-fullwidth] {
    background-color: var(--section-fullwidth-bg-color);
}

[data-section-fullwidth] article {
    background-color: transparent;
    color: var(--section-fullwidth-fontcolor);
}

[data-fullheight] {
    height: var(--fullheight);
}



/* simple twocol block layout -----[hero]----------   */
[data-gs-twocol] > div:last-of-type {
    text-align: center;
}

[data-gs-twocol] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
}

[data-gs-twocol] > * {
    flex: 1 1 22rem;
}

[data-gs-twocol] img {
    max-width: 100%;
}

/* end two column ------------------------------------ */


/* RESPONSIVE ------------------------ */
@media (min-width: 1024px) {
    nav#site-navigation {
        max-width: var(--max-navigation-width);
    }

    section article {
        width: var(--gold-big);
        max-width: var(--max-article-width);
        margin: auto;
    }
}