/* -------------  FLEX ATTRIBUTTEN -------------------->>>> */
[data-flex] {
    display: flex;
}

@media (max-width: 768px) {
    [data-flex] {
        display: block;
    }
}
[data-flex-justify="left"] {    justify-content: flex-start;}
[data-flex-justify="right"] {    justify-content: flex-end;}
[data-flex-justify="center"] {    justify-content: center;}
[data-flex-justify="between"] {    justify-content: space-between;}
[data-flex-justify="evenly"] {    justify-content: space-evenly;}

/* more to come */

/* ------------------ >>>>> EINDE FLEX ATTR ///////////// */
/* data attributes */
[data-gs-block] {
    display: block;
}

/* width and height  */

/* relative to the window */

[data-window-height="mini"] { height: 19.1vh; }
[data-window-height="small"] { height:38.2vh;}
[data-window-height="medium"] {height:61.8vh;}
[data-window-height="big"] {height:80.9vh;} 

[data-window-width="mini"] { width:19.1vw; }
[data-window-width="small"] { width:38.2vw;}
[data-window-width="medium"] {width:61.8vw;}
[data-window-width="big"] {width:80.9vw;} 

[data-width="100%"] {    width: 100%;}
[data-width="50%"] {    width: 50%;}




[data-width="0"] {    width: 0;}
[data-width="1rem"] {    width: 1rem;}
[data-width="2rem"] {    width: 2rem;}
[data-width="3rem"] {    width: 3rem;}
[data-width="4rem"] {    width: 4rem;}
[data-width="5rem"] {    width: 5rem;}
[data-width="auto"] {    width: auto;}
[data-width="small"] {  width: var(--space-small); }
[data-width="medium"] {    width: var(--space-medium);}
[data-width="big"] {    width: var(--space-big);}
[data-width="big-x2"] {    width: var(--space-big-x2);}
[data-width="big-x4"] {    width: var(--space-big-x4);}
[data-width="mega"] {    width: var(--space-mega);}

[data-gold-width="small"] {  width: var(--gold-small); }
[data-gold-width="medium"] {    width: var(--gold-medium);}
[data-gold-width="big"] {    width: var(--gold-big);}
[data-gold-width="big-x2"] {    width: var(--gold-big-x2);}
[data-gold-width="big-x4"] {    width: var(--gold-big-x4);}
[data-gold-width="mega"] {    width: var(--gold-mega);}

[data-height="0"] {    height: 0;}
[data-height="1rem"] {    height: 1rem;}
[data-height="2rem"] {    height: 2rem;}
[data-height="3rem"] {    height: 3rem;}
[data-height="4rem"] {    height: 4rem;}
[data-height="5rem"] {    height: 5rem;}
[data-height="auto"] {    height: auto;}
[data-height="small"] {  height: var(--space-small); }
[data-height="medium"] {    height: var(--space-medium);}
[data-height="big"] {    height: var(--space-big);}
[data-height="big-x2"] {    height: var(--space-big-x2);}
[data-height="big-x4"] {    height: var(--space-big-x4);}
[data-height="mega"] {    height: var(--space-mega);}
[data-height="mega-x2"] {    height: var(--space-mega-x2);}

[data-gold-height="small"] {  height: var(--gold-small); }
[data-gold-height="medium"] {    height: var(--gold-medium);}
[data-gold-height="big"] {    height: var(--gold-big);}
[data-gold-height="big-x2"] {    height: var(--gold-big-x2);}
[data-gold-height="big-x4"] {    height: var(--gold-big-x4);}
[data-gold-height="mega"] {    height: var(--gold-mega);}



/* margin */
[data-margin="0"] {    margin: 0;}
[data-margin="1rem"] {    margin: 1rem;}
[data-margin="2rem"] {    margin: 2rem;}
[data-margin="3rem"] {    margin: 3rem;}
[data-margin="4rem"] {    margin: 4rem;}
[data-margin="5rem"] {    margin: 5rem;}
[data-margin="auto"] {    margin: auto;}
[data-margin="small"] {  margin: var(--space-small); }
[data-margin="medium"] {    margin: var(--space-medium);}
[data-margin="big"] {    margin: var(--space-big);}
[data-margin="big-x2"] {    margin: var(--space-big-x2);}
[data-margin="big-x4"] {    margin: var(--space-big-x4);}
[data-margin="mega"] {    margin: var(--space-mega);}

[data-margin-top="0"] {    margin-top: 0;}
[data-margin-top="1rem"] {    margin-top: 1rem;}
[data-margin-top="2rem"] {    margin-top: 2rem;}
[data-margin-top="3rem"] {    margin-top: 3rem;}
[data-margin-top="4rem"] {    margin-top: 4rem;}
[data-margin-top="5rem"] {    margin-top: 5rem;}
[data-margin-top="auto"] {    margin-top: auto;}
[data-margin-top="small"] {  margin-top: var(--space-small); }
[data-margin-top="medium"] {    margin-top: var(--space-medium);}
[data-margin-top="big"] {    margin-top: var(--space-big);}
[data-margin-top="big-x2"] {    margin-top: var(--space-big-x2);}
[data-margin-top="big-x4"] {    margin-top: var(--space-big-x4);}
[data-margin-top="mega"] {    margin-top: var(--space-mega);}

[data-margin-bottom="0"] {    margin-bottom: 0;}
[data-margin-bottom="1rem"] {    margin-bottom: 1rem;}
[data-margin-bottom="2rem"] {    margin-bottom: 2rem;}
[data-margin-bottom="3rem"] {    margin-bottom: 3rem;}
[data-margin-bottom="4rem"] {    margin-bottom: 4rem;}
[data-margin-bottom="5rem"] {    margin-bottom: 5rem;}
[data-margin-bottom="auto"] {    margin-bottom: auto;}
[data-margin-bottom="small"] {  margin-bottom: var(--space-small); }
[data-margin-bottom="medium"] {    margin-bottom: var(--space-medium);}
[data-margin-bottom="big"] {    margin-bottom: var(--space-big);}
[data-margin-bottom="big-x2"] {    margin-bottom: var(--space-big-x2);}
[data-margin-bottom="big-x4"] {    margin-bottom: var(--space-big-x4);}
[data-margin-bottom="mega"] {    margin-bottom: var(--space-mega);}

[data-margin-left="0"] {    margin-left: 0;}
[data-margin-left="1rem"] {    margin-left: 1rem;}
[data-margin-left="2rem"] {    margin-left: 2rem;}
[data-margin-left="3rem"] {    margin-left: 3rem;}
[data-margin-left="4rem"] {    margin-left: 4rem;}
[data-margin-left="5rem"] {    margin-left: 5rem;}
[data-margin-left="auto"] {    margin-left: auto;}
[data-margin-left="small"] {  margin-left: var(--space-small); }
[data-margin-left="medium"] {    margin-left: var(--space-medium);}
[data-margin-left="big"] {    margin-left: var(--space-big);}
[data-margin-left="big-x2"] {    margin-left: var(--space-big-x2);}
[data-margin-left="big-x4"] {    margin-left: var(--space-big-x4);}
[data-margin-left="mega"] {    margin-left: var(--space-mega);}

[data-margin-right="0"] {    margin-right: 0;}
[data-margin-right="1rem"] {    margin-right: 1rem;}
[data-margin-right="2rem"] {    margin-right: 2rem;}
[data-margin-right="3rem"] {    margin-right: 3rem;}
[data-margin-right="4rem"] {    margin-right: 4rem;}
[data-margin-right="5rem"] {    margin-right: 5rem;}
[data-margin-right="auto"] {    margin-right: auto;}
[data-margin-right="small"] {  margin-right: var(--space-small); }
[data-margin-right="medium"] {    margin-right: var(--space-medium);}
[data-margin-right="big"] {    margin-right: var(--space-big);}
[data-margin-right="big-x2"] {    margin-right: var(--space-big-x2);}
[data-margin-right="big-x4"] {    margin-right: var(--space-big-x4);}
[data-margin-right="mega"] {    margin-right: var(--space-mega);}

/* padding */
[data-padding="1rem"] {    padding: 1rem;}
[data-padding="2rem"] {    padding: 2rem;}
[data-padding="3rem"] {    padding: 3rem;}
[data-padding="4rem"] {    padding: 4rem;}
[data-padding="5rem"] {    padding: 5rem;}
[data-padding="small"] {    padding: var(--space-small);}
[data-padding="medium"] {    padding: var(--space-medium);}
[data-padding="big"] {    padding: var(--space-big);}
[data-padding="big-x2"] {    padding: var(--space-big-x2);}
[data-padding="big-x4"] {    padding: var(--space-big-x4);}
[data-padding="mega"] {    padding: var(--space-mega);}

[data-padding-top="1rem"] {    padding-top: 1rem;}
[data-padding-top="2rem"] {    padding-top: 2rem;}
[data-padding-top="3rem"] {    padding-top: 3rem;}
[data-padding-top="4rem"] {    padding-top: 4rem;}
[data-padding-top="5rem"] {    padding-top: 5rem;}
[data-padding-top="small"] {    padding-top: var(--space-small);}
[data-padding-top="medium"] {    padding-top: var(--space-medium);}
[data-padding-top="big"] {    padding-top: var(--space-big);}
[data-padding-top="big-x2"] {    padding-top: var(--space-big-x2);}
[data-padding-top="big-x4"] {    padding-top: var(--space-big-x4);}
[data-padding-top="mega"] {    padding-top: var(--space-mega);}

[data-padding-bottom="1rem"] {    padding-bottom: 1rem;}
[data-padding-bottom="2rem"] {    padding-bottom: 2rem;}
[data-padding-bottom="3rem"] {    padding-bottom: 3rem;}
[data-padding-bottom="4rem"] {    padding-bottom: 4rem;}
[data-padding-bottom="5rem"] {    padding-bottom: 5rem;}
[data-padding-bottom="small"] {    padding-bottom: var(--space-small);}
[data-padding-bottom="medium"] {    padding-bottom: var(--space-medium);}
[data-padding-bottom="big"] {    padding-bottom: var(--space-big);}
[data-padding-bottom="big-x2"] {    padding-bottom: var(--space-big-x2);}
[data-padding-bottom="big-x4"] {    padding-bottom: var(--space-big-x4);}
[data-padding-bottom="mega"] {    padding-bottom: var(--space-mega);}

[data-padding-left="1rem"] {    padding-left: 1rem;}
[data-padding-left="2rem"] {    padding-left: 2rem;}
[data-padding-left="3rem"] {    padding-left: 3rem;}
[data-padding-left="4rem"] {    padding-left: 4rem;}
[data-padding-left="5rem"] {    padding-left: 5rem;}
[data-padding-left="small"] {    padding-left: var(--space-small);}
[data-padding-left="medium"] {    padding-left: var(--space-medium);}
[data-padding-left="big"] {    padding-left: var(--space-big);}
[data-padding-left="big-x2"] {    padding-left: var(--space-big-x2);}
[data-padding-left="big-x4"] {    padding-left: var(--space-big-x4);}
[data-padding-left="mega"] {    padding-left: var(--space-mega);}

[data-padding-right="1rem"] {    padding-right: 1rem;}
[data-padding-right="2rem"] {    padding-right: 2rem;}
[data-padding-right="3rem"] {    padding-right: 3rem;}
[data-padding-right="4rem"] {    padding-right: 4rem;}
[data-padding-right="5rem"] {    padding-right: 5rem;}
[data-padding-right="small"] {    padding-right: var(--space-small);}
[data-padding-right="medium"] {    padding-right: var(--space-medium);}
[data-padding-right="big"] {    padding-right: var(--space-big);}
[data-padding-right="big-x2"] {    padding-right: var(--space-big-x2);}
[data-padding-right="big-x4"] {    padding-right: var(--space-big-x4);}
[data-padding-right="mega"] {    padding-right: var(--space-mega);}

/* [data-main-padding-top] {    padding-top: var(--main-menu-height)} */
/* [data-main-padding-bottom] {    padding-bottom: 175px;} */

[data-gs-duration=".1"] {animation-duration:.1s}
[data-gs-duration=".2"] {animation-duration:.2s}
[data-gs-duration=".3"] {animation-duration:.3s}
[data-gs-duration=".4"] {animation-duration:.4s}
[data-gs-duration=".5"] {animation-duration:.5s}
[data-gs-duration=".6"] {animation-duration:.6s}
[data-gs-duration=".7"] {animation-duration:.7s}
[data-gs-duration=".8"] {animation-duration:.8s}
[data-gs-duration=".9"] {animation-duration:.9s}
[data-gs-duration="1"] {animation-duration:1s}
[data-gs-duration="1.5"] {animation-duration:1.5s}
[data-gs-duration="2"] {animation-duration:2s}
[data-gs-duration="2.5"] {animation-duration:2.5s}
[data-gs-duration="3"] {animation-duration:3s}
[data-gs-duration="3.5"] {animation-duration:3.5s}
[data-gs-duration="4"] {animation-duration:4s}
[data-gs-duration="4.5"] {animation-duration:4.5s}
[data-gs-duration="5"] {animation-duration:5s}




/* attribuut utilitiess */

/* make a block item */
a[data-gs-block] {
    display: block;
}

/* FONTSIZES */
[data-gs-extreme-fontsize] {
    font-size: var(--extreme-fontsize);
}

[data-gs-bigger-fontsize] {
    font-size: var(--bigger-fontsize);
}

[data-gs-extre-big-fontsize] {
    font-size: var(--big-fontsize);
}

[data-gs-normal-fontsize] {
    font-size: var(--normal-fontsize);
}

[data-gs-small-fontsize] {
    font-size: var(--small-fontsize);
}

[data-gs-smaller-fontsize] {
    font-size: var(--smaller-fontsize);
}


/* text-align */
[data-text-align="left"] {
    text-align: left;
}

[data-text-align="right"] {
    text-align: right;
}

[data-text-align="center"] {
    text-align: center;
}

[data-text-align="justify"] {
    text-align: justify;
}



/* float */
[data-float-left] {
    float: left;
    margin-right: var(--space-big);
    max-width: 50%;

}

[data-float-right] {
    float: right;
    margin-left: var(--space-big);
    max-width: 50%;

}

/* top / bottom fixed position */
[data-fixed-top] {
    position: fixed;
    top: 0;
    width: 100%;
}
/* ad padding to main */
[data-fixed-top] ~ main {
    padding-top: var(--main-menu-height);
}

[data-fixed-bottom] {
    position: fixed;
    bottom: 0;
    width: 100%;
}
[data-fixed-bottom] ~ main {
    padding-bottom: var(--footer-height);
}

[data-sticky-top] {
    position:sticky;
    top:0;
}

/* knoppen in een flex nav-bar rechts plaatsen */
[data-nav-right] {
    margin-left: auto;
}

[data-nav-left] {
    margin-right: auto;
}

/* koppel aan een element om aan begin en eind een afbeelding te plaatsen */
[data-kop]::before,
[data-kop]::after {
    position: absolute;
    content: url("../img/spiral-wit.png");
    filter: drop-shadow(3px 3px 3px white);
}

[data-kop]::before {
    left: 10px;
}

[data-kop]::after {
    right: 10px;
};