/* START scrollbar CSS */
:root { --scrollbarBG: rgba(0,27,28,0.5);--thumbBG: #001b1c;}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background: var(--scrollbarBG);}
::-webkit-scrollbar-thumb {background-color: var(--thumbBG);border-radius: 6px;border: 3px solid var(--scrollbarBG);}
html, body {scrollbar-width: thin;scrollbar-color: var(--thumbBG) var(--scrollbarBG);}
/* END scrollbar CSS */
:root {
      --width:100vw;
      --min-width:500px;
      --mar-left:-50vw;
      --min-mar-left:-50vw;
      --width-600: 600px;
      --mar-left-600:-300px;
    }
    body {
      background: #000;
      margin:0;
    }

    /*
essential styles:
these make the slideshow work
*/
    #slides {
      position: relative;
      height: calc(100vw/1.8);
      width: var(--width);
      min-width: var(--min-width);  
      padding: 0px;
      margin: 0px;
      /* list-style-type: none; */
      z-index: 1;
    }

    .slide {
      position: absolute;
      left: 50%;
      top: 0px;
      /* width: 67vw;
      max-width: 67vw;
      margin-left: -16.5vw; */
      width: var(--width);
      max-width: var(--width);
      min-width: var(--min-width);  
      margin-left: var(--mar-left);
      height: 100%;
      opacity: 0;
      z-index: 1;
    }

    .showing {
      opacity: 1;
      z-index: 2;
    }

    nav {
      font-family: sans-serif;
      width: 400px;
      margin: 0 auto;
      text-align: center;

    }

    .message {
      position:fixed;
      width:100vw;
      height: 60vh;
      /* top:50%;
      margin-top: -50vh;
      left:50%;*/
      margin-top: 1vh;
      font-family: sans-serif; 
      font-size: 4vw;
      color:#fff;
      text-align: center;
      z-index: 2;
      transition:4s;
      opacity:1;
      /* text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999, 0.06rem 0.06rem 0.06rem #333; */
      text-shadow: 1% 1% 1% #ccc, 2% 2% 2% #999, 3% 3% 3% #333;
    }

    .buttons {
      font-size: 1.5rem;
      border-radius: 0.5rem;
      border: 1px solid #aaa;
      width:40px;
      height:34px;
      padding: 0.01rem 0.3rem 0.75rem 0.3rem;
      vertical-align: auto;
      cursor:pointer;
      background: #00a6ed;
      margin: 0.02rem 0.03rem 0.03rem 0.02rem;
    }

    .buttons:hover {
      color:#444;
      background: #00a6ed;
      margin: 0.04rem 0.01rem 0.01rem 0.04rem;
    }
    .button_active {
      /* background: #555; */
      color:#999;
      background: #00a6ed;
      margin: 0.04rem 0.01rem 0.01rem 0.04rem;
    }

    .none {
      display:none;
    }

    @media only screen and (max-width: 600px) {
        #slides {
            height: 100vh;
            width: var(--width-600);
            min-width: var(--width-600);  
            overflow-x: hidden;
            overflow-y: hidden;
        }

        .slide {
            width: var(--width-600);
            max-width: var(--width-600);
            min-width: var(--width-600);  
            margin-left: var(--mar-left-600);
            overflow-x: hidden;
            overflow-y: hidden;
        }

    }