/* A BUTTON  ------------------------    */
  
 [data-gs-button] {
    display:inline-block;
    text-decoration:dotted;
    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;
}

/* automatic light and dark CSS mode */

[data-gs-timemode] {
      position: absolute;
      top: var(--space-small);
      right: var(--space-small);
    }

@media (max-width: 1024px) {
    [data-gs-timemode] {
      left: var(--space-small);
      right:initial;
     
    }
}

    
    .switch {
      position: relative;
      display: inline-block;
      width: 90px;
      height: 34px;
    }

    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    #mode-status {
      position: absolute;
      /* width:100px; */
      top: -13px;
      left: 36px;
      z-index: 10000;
      cursor: pointer;
      font-size: 17px;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 30px;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 34px;
    }

.slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    input:checked+.slider {
      background-color: #2196F3;
    }

    input:checked+.slider:before {
      transform: translateX(26px);
    }

    .time-display {
      font-size: 1.2em;
      font-weight: bold;
      margin: 20px 0;
    }

/* end dark mode */