@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;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

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

body {
   margin-top: 2%;
}

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

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

.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: red;
  text-decoration: none; 
}

.darkred {
  color: rgb(192, 0, 0);
}

.red {
  color: rgb(255, 0, 0);
}

.orange {
  color: rgb(255, 192, 0);
}

.lightgreen {
  color: rgb(146, 208, 80);
}

.lightblue {
  color: rgb(0, 176, 240);
}

.green {
   color: rgb(0, 176, 80);
}

.white {
    color: rgb(255, 255, 255);
}

.overlap {
   position: relative; 
   margin: 0 auto;
   text-align: center;
   font-size: 0.5em;
}

.overlap2 {
   position: absolute;
   top: 0; width: 100%;
   font-size: 0.93em;  /* this line controls the pattern of the overlapping texts */ 
}

#options {
    text-align: center;
    font-size: 1em;
    margin-top: 1em;
    margin-bottom: 2em;
    }

#options span {
  display: block;
  text-align: center;
  font-size: 0.75em;
  color: black;
  text-decoration: none;
}

#options a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: inherit;
}

#options a {
  text-decoration: none;
}

#options a:hover {
  color: rgb(0, 176, 240);
}

#options a.active {
  color: red;
   text-decoration: none; 
}

h1 {font-family: Inconsolata;
   margin-top: 1em;
   margin-bottom: 1em;
    font-weight: bold;
   font-size: 1em;
   text-indent: 25%;
   }

h2 {font-family: Inconsolata;
     margin-bottom: 1em;
   font-size: 1em;
   }

body { font-family: Inconsolata;
  font-size: 100%;
   background-color: rgb(255, 255, 255);
  justify-content: center;
  }

@media screen and (min-width: 700px) {


h2 {font-family: Inconsolata;
   font-size: 1em;
   }

body { font-family: Inconsolata;
  font-size: 150%;
   justify-content: center;
  }
}

@media screen and (min-width: 900px) {


h2 {font-family: Inconsolata;
   font-size: 1em;
   }

body { font-family: Inconsolata;
  font-size: 200%;
   justify-content: center;
  }
}

@media screen and (min-width: 1100px) {


h2 {font-family: Inconsolata;
   font-size: 1em;
   }

body { font-family: Inconsolata;
  font-size: 250%;
   justify-content: center;
  }
}

@media screen and (min-width: 1300px) {


h2 {font-family: Inconsolata;
   font-size: 1em;
   }

body { font-family: Inconsolata;
  font-size: 300%;
   justify-content: center;
  }
}

@media screen and (min-width: 1500px) {


h2 {font-family: Inconsolata;
   font-size: 1em;
   }

body { font-family: Inconsolata;
  font-size: 350%;
   justify-content: center;
  }
}

/* animation */

@supports (animation-delay: 1s) {
    #slideset {height: 9em; position: relative}
    #slideset > * {
         visibility: hidden; 
         animation: 37s autoplay1 infinite;
      position: absolute; left: 25%; top: 0;
         }
    #slideset > *:nth-child(1) {animation-delay: 0s}
    #slideset > *:nth-child(2) {animation-delay: 1s}
    #slideset > *:nth-child(3) {animation-delay: 2s}
    #slideset > *:nth-child(4) {animation-delay: 3s}
    #slideset > *:nth-child(5) {animation-delay: 4s}
    #slideset > *:nth-child(6) {animation-delay: 5s}
    #slideset > *:nth-child(7) {animation-delay: 6s}
    #slideset > *:nth-child(8) {animation-delay: 7s}
    #slideset > *:nth-child(9) {animation-delay: 8s}
    #slideset > *:nth-child(10) {animation-delay: 9s}
    #slideset > *:nth-child(11) {animation-delay: 10s}
    #slideset > *:nth-child(12) {animation-delay: 11s}
    #slideset > *:nth-child(13) {animation-delay: 12s}
    #slideset > *:nth-child(14) {animation-delay: 13s}
    #slideset > *:nth-child(15) {animation-delay: 14s}
    #slideset > *:nth-child(16) {animation-delay: 15s}
    #slideset > *:nth-child(17) {animation-delay: 16s}
    #slideset > *:nth-child(18) {animation-delay: 17s}
    #slideset > *:nth-child(19) {animation-delay: 18s}
    #slideset > *:nth-child(20) {animation-delay: 19s}
    #slideset > *:nth-child(21) {animation-delay: 20s}
    #slideset > *:nth-child(22) {animation-delay: 21s}
    #slideset > *:nth-child(23) {animation-delay: 22s}
    #slideset > *:nth-child(24) {animation-delay: 23s}
    #slideset > *:nth-child(25) {animation-delay: 24s}
    #slideset > *:nth-child(26) {animation-delay: 25s}
    #slideset > *:nth-child(27) {animation-delay: 26s}
    #slideset > *:nth-child(28) {animation-delay: 27s}
    #slideset > *:nth-child(29) {animation-delay: 28s}
    #slideset > *:nth-child(30) {animation-delay: 29s}
    #slideset > *:nth-child(31) {animation-delay: 30s}
    #slideset > *:nth-child(32) {animation-delay: 31s}
    #slideset > *:nth-child(33) {animation-delay: 32s}
    #slideset > *:nth-child(34) {animation-delay: 33s}
    #slideset > *:nth-child(35) {animation-delay: 34s}
    #slideset > *:nth-child(36) {animation-delay: 35s}
    @keyframes autoplay1 {
      0% {visibility: visible}
      2.7777777777777777777% {visibility: hidden}
    }
}