@charset "UTF-8";

/* We begin with Eric Meyer's CSS reset.  */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

@font-face {
  font-family: Inconsolata;
  src: url(Inconsolata.otf);
  }      

    .or {
      color: #FFFFFF;
      background-color: #000000;
      text-decoration: none;
      font-weight: normal;
      cursor: pointer;
    }

    .or a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
    }

    .or a {
     text-decoration: none;
    }

    .or:hover {
      text-decoration: none;
      color: #000000;
      background-color: #FFFFFF;
    }

    .or:active {
      color: #E20000;
      background-color: #000000;
      text-decoration: none; 
    }

     .and {
      color: #FFFFFF;
      background-color: #000000;
      text-decoration: none;
      font-weight: normal;
      cursor: pointer;
    }

    .and a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
    }

    .and a {
     text-decoration: none;
    }

    .and:hover {
      text-decoration: none;
      color: #000000;
      background-color: #FFFFFF;
    }

    .and:active {
      color: #E20000;
      background-color: #000000;
      text-decoration: none; 
    }

    #emoticon {
      color: #FFFFFF;
      background-color: #000000;
    }

     .error {
      text-decoration: line-through;
      color: #E20000;
     }

 .navbar {
    position: fixed;
    bottom: 5%;
    left: 2%;
    width: 100%;
}

.navbar a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: inherit;
}

.navbar a {
  text-decoration: none;
}

.navbar a:hover {
  text-decoration: underline; 
  color: black;
}

.navbar a.active {
  color: #E20000;
  text-decoration: none; 
}

.menuBar {
    position: fixed;
    bottom: 5%;
    left: 2%;
    width: 100%;
}

.menuBar a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: inherit;
}

.menuBar a {
  text-decoration: none;
}

.menuBar a:hover {
  text-decoration: underline; 
  color: black;
}

.menuBar a.active {
  color: #E20000;
  text-decoration: none; 
}

#menuLinks {
 font-size: 50%;
 width: fit-content; /* Adjust width based on content */
 margin: 0 auto; /* Center horizontally */
 text-align: center; /* Center text within the block */
 }

.menuLink {
  display: block;
  }

#menuLinks a {
  color: #FFFFFF;
  background-color: #000000;
  text-decoration: none;
  }

#menuLinks a:hover {
  color: #FFFFFF;
  text-decoration: none;
  }

#menuLinks a:active {
 color: #E20000;
 background-color: #000000;
 text-decoration: none;
 }

h1, h2, #menuLinks, #slideset, .menuLink, .navbar {
  font-family: Inconsolata;
  }

@media screen and (min-width: 1px) {
      h1 {
         text-align: center;
        font-size: 105%;
        padding: 2%;
      }

      h2 {
        text-align: center;
          font-style: italic;          
        font-size: 75%;
        font-weight: normal;
        
      }

    #slideset {
       font-size: 73%;
       font-weight: normal;
      color: #000000; /* Change text color to black */
      background-color: #FFFFFF; /* Set a light background color */
      left: 1em;
      top: 2em;
    }

    .navbar span {
      display: block;
      font-size:55%;
      color: black;
      text-decoration: none;
    } 

  .menuBar span {
    display: block;
    font-size: 49%;
    color: black;
    text-decoration: none;
  }

  #menuLinks a {
   color: #000000;
   font-size: 275%;
   text-decoration: none;
  }
}

@media screen and (min-width: 400px) {
      h1 {
         text-align: center;
        font-size: 105%;
        padding: 2%;
      }

      h2 {
        text-align: center;
          font-style: italic;          
        font-size: 75%;
        font-weight: normal;
      }

    #slideset {
       font-size: 73%;
       font-weight: normal;
      color: #000000; /* Change text color to black */
      background-color: #FFFFFF; /* Set a light background color */
      left: 10em;
      top: 2em;
    }

    .navbar span {
      display: block;
      font-size:55%;
      color: black;
      text-decoration: none;
    } 

  .menuBar span {
    display: block;
    font-size: 49%;
    color: black;
    text-decoration: none;
  }

  #menuLinks a {
   color: #000000;
   font-size: 280%;
   text-decoration: none;
  }
}

@media screen and (min-width: 600px) {
      h1 {
         text-align: center;
        font-size: 108%;
        padding: 2%;
      }

      h2 {
        text-align: center;
          font-style: italic;          
        font-size: 80%;
        font-weight: normal;
      }

    #slideset {
       font-size: 81%;
       font-weight: normal;
      color: #000000; /* Change text color to black */
      background-color: #FFFFFF; /* Set a light background color */
      left: 15em;
       top: 2em;
    }
    .navbar span {
      display: block;
      font-size:54%;
      color: black;
      text-decoration: none;
    } 

  .menuBar span {
    display: block;
    font-size: 54%;
    color: black;
    text-decoration: none;
  }

  #menuLinks a {
   color: #000000;
   font-size: 290%;
   text-decoration: none;
  }
}

@media screen and (min-width: 800px) {
      h1 {
         text-align: center;
        font-size: 119%;
        padding: 2%;
      }

      h2 {
        text-align: center;
          font-style: italic;          
        font-size: 90%;
        font-weight: normal;
      }

    #slideset {
       font-size: 90%;
       font-weight: normal;
      color: #000000; /* Change text color to black */
      background-color: #FFFFFF; /* Set a light background color */
      left: 17em;
       top: 2em;
    }
    .navbar span {
      display: block;
      font-size:60%;
      color: black;
      text-decoration: none;
    } 

  .menuBar span {
    display: block;
    font-size: 60%;
    color: black;
    text-decoration: none;
  }

  #menuLinks a {
   color: #000000;
   font-size: 320%;
   text-decoration: none;
  }
}

@media screen and (min-width: 1000px) {
      h1 {
         text-align: center;
        font-size: 132%;
        padding: 2%;
      }

      h2 {
        text-align: center;
          font-style: italic;          
        font-size: 100%;
        font-weight: normal;
      }

    #slideset {
       font-size: 99%;
       font-weight: normal;
      color: #000000; /* Change text color to black */
      background-color: #FFFFFF; /* Set a light background color */
      left: 19em;
       top: 2em;
    }
    .navbar span {
      display: block;
      font-size:66%;
      color: black;
      text-decoration: none;
    } 

  .menuBar span {
    display: block;
    font-size: 66%;
    color: black;
    text-decoration: none;
  }

  #menuLinks a {
   color: #000000;
   font-size: 355%;
   text-decoration: none;
  }
}

@media screen and (min-width: 1200px) {
      h1 {
         text-align: center;
        font-size: 146%;
        padding: 2%;
      }

      h2 {
        text-align: center;
          font-style: italic;          
        font-size: 130%;
        font-weight: normal;
      }

    #slideset {
       font-size: 110%;
       font-weight: normal;
      color: #000000; /* Change text color to black */
      background-color: #FFFFFF; /* Set a light background color */
      left: 21em;
       top: 2em;
    }
    .navbar span {
      display: block;
      font-size:73%;
      color: black;
      text-decoration: none;
    } 

  .menuBar span {
    display: block;
    font-size: 73%;
    color: black;
    text-decoration: none;
  }

  #menuLinks a {
   color: #000000;
   font-size: 395%;
   text-decoration: none;
  }
}

@media screen and (min-width: 1400px) {
      h1 {
         text-align: center;
        font-size: 162%;
        padding: 2%;
      }

      h2 {
        text-align: center;
          font-style: italic;          
        font-size: 140%;
        font-weight: normal;
      }

    #slideset {
       font-size: 122%;
       font-weight: normal;
      color: #000000; /* Change text color to black */
      background-color: #FFFFFF; /* Set a light background color */
      left: 24em;
       top: 2em;
    }
    .navbar span {
      display: block;
      font-size:81%;
      color: black;
      text-decoration: none;
    } 

  .menuBar span {
    display: block;
    font-size: 81%;
    color: black;
    text-decoration: none;
  }

  #menuLinks a {
   color: #000000;
   font-size: 436%;
   text-decoration: none;
  }
}

@media screen and (min-width: 1600px) {
      h1 {
         text-align: center;
        font-size: 180%;
        padding: 2%;
      }

      h2 {
        text-align: center;
          font-style: italic;          
        font-size: 90%;
        font-weight: normal;
      }

    #slideset {
       font-size: 135%;
       font-weight: normal;
      color: #000000; /* Change text color to black */
      background-color: #FFFFFF; /* Set a light background color */
      left: 27em;
       top: 2em;
    }
    .navbar span {
      display: block;
      font-size: 90%;
      color: black;
      text-decoration: none;
    } 

  .menuBar span {
    display: block;
    font-size: 90%;
    color: black;
    text-decoration: none;
  }

  #menuLinks a {
   color: #000000;
   font-size: 540%;
   text-decoration: none;
  }
}

@media screen and (min-width: 1800px) {
      h1 {
         text-align: center;
        font-size: 200%;
        padding: 2%;
      }

      h2 {
        text-align: center;
          font-style: italic;          
        font-size: 100%;
        font-weight: normal;
      }

    #slideset {
     
      font-size: 150%;
      font-weight: normal;
      color: #000000; /* Change text color to black */
      background-color: #FFFFFF; /* Set a light background color */
      left: 30em;
       top: 2em;
    }
    .navbar span {
      display: block;
      font-size: 100%;
      color: black;
      text-decoration: none;
    } 

  .menuBar span {
    
    display: block;
    font-size: 100%;
    color: black;
    text-decoration: none;
  }

  #menuLinks a {
   color: #000000;
   font-size: 600%;
   text-decoration: none;
  }
}


      
/* animation */

@supports (animation-delay: 1s) {
    #slideset {height: 26em; position: relative}
    #slideset > * {visibility: hidden; animation: 14s autoplay1 1;
      position: absolute; top: 0; left: 0em}
    #slideset > *:nth-child(1) {animation-delay: 0s}
    #slideset > *:nth-child(2) {animation-delay: 2s}
    #slideset > *:nth-child(3) {animation-delay: 4s}
    #slideset > *:nth-child(4) {animation-delay: 6s}
    #slideset > *:nth-child(5) {animation-delay: 8s}
    #slideset > *:nth-child(6) {animation-delay: 10s}
     #slideset > *:nth-child(7) {animation-delay: 12s; animation-fill-mode: forwards;}
    @keyframes autoplay1 {
      0% {visibility: visible}
      14.2857142857% {visibility: hidden}
        100% { visibility: visible; }
        }
    }