/* A BUTTON  ------------------------    */
  
 [data-gs-button] {
    display:inline-block;
    text-decoration: none;
    text-align: center;
    background-color: var(--button-bgcolor);
    color: var(--button-color);
    padding: var(--space-big);
    text-transform: uppercase;
    border-radius: var(--space-small);
    border: none;
    cursor: pointer;
    min-width: var(--button-min-width);
    transition: all .5s;
}
[data-gs-button="smaller"] {
    font-size: var(--extrasmall-fontsize);
}
[data-gs-button="small"] {
    font-size: var(--small-fontsize);
}
[data-gs-button="normal"] {
    font-size: var(--normal-fontsize);
}
[data-gs-button="big"] {
    font-size: var(--big-fontsize);
}
[data-gs-button="bigger"] {
    font-size: var(--bigger-fontsize);
}
[data-gs-button="extreme"] {
    font-size: var(--extreme-fontsize);
}

[data-gs-button]:visited{
    color: var(--button-color);
    background-color: var(--button-bgcolor);
}
[data-gs-button]:hover{
    color: var(--button-color-hover);
    background-color: var(--button-bgcolor-hover);
}

[data-gs-button]:active {
    color: var(--button-color-active);
    background-color: var(--button-bgcolor-active);
}

[data-gs-button="alert"] ,
[data-gs-button="alert"]:visited


{
    background-color:red;
    color:white;
    
 }
 

 [data-gs-button="alert"]:hover,
 [data-gs-button="alert"]:active

 {
    background-color:grey;
    
 }


/* cardS ------------------------- */
[data-gs-cardgroup] {
    display: flex;
    flex-wrap: wrap;
    color: var(--cardgroup-textcolor);
}

[data-gs-card] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 0 var(--card-min-width);
    background-color: var(--cardcontent-bgcolor);
    border: var(--border2);
    margin: var(--space-big);
}

[data-gs-card] [data-gs-cardheader] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cardheader-bgcolor);
    padding: var(--space-big-x2);
    color: var(--cardheader-textcolor);
}

[data-gs-card] [data-gs-cardheader] h2 {
    margin: auto;
    padding: var(--space-big);
}

[data-gs-card] [data-gs-cardheader] img {
    height: 150px;
    max-width: 100%;
}

[data-gs-card] [data-gs-cardcontent] {
    width: auto;
    padding: var(--space-big-x2);
    flex: 1;
    color: var(--cardcontent-textcolor);
}

[data-gs-card] [data-gs-cardfooter] {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--cardfooter-bgcolor);
    color: var(--cardfooter-textcolor);
    padding: var(--space-big);
}

/* end cards */


/* presentation */

/* presentation style page*/


main#horscroll {
    display:flex;
    text-align: center;
}
main#vertscroll{
    display: flex;
    flex-direction: column;
    text-align: center;
    /* flex-wrap: wrap; */
}
main#horscroll section,
main#vertscroll section {
    flex: 0 0 100vw;
    flex-direction: column;
    display:flex;
    padding-bottom:1em;
    height:100vh;
    max-height: 100vh;
    
}
[data-fixed-top] ~ main#horscroll section,
[data-fixed-top] ~ main#vertscroll section {
    padding-top: var(--main-menu-height);
    background-origin: content-box;
    background-repeat: no-repeat;
}
[data-fixed-top] ~ main#horscroll section footer,
[data-fixed-top] ~ main#vertscroll section footer{
    height:50px;
    padding-bottom: 20px;
}

main#horscroll article img,
main#vertscroll article img {
    /* object-fit:contain; */
    max-width:75%;
    /* max-height:60%; */
}

/* if using cards */
#vertscroll [data-gs-card],
#horscroll [data-gs-card] {
    height:100%;
    width:100%;
    margin:auto;
    background-color: initial;

}
#vertscroll [data-gs-cardcontent],
#horscroll [data-gs-cardcontent] {
    flex:initial;
    margin:auto;
    text-align:center;
}