@charset "UTF-8";

/* General Notes: */

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

.navbar {
   position: fixed;
   bottom: 10%;
   width: 100%;
}

.navbar span {
  display: block;
  text-align: center;
  color: blue;
  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; 
}

/* special styles for 53.5-9 */
/* Turn the rectangular border into a cloud-like irregular border (if possible). But actually, the rectilinear border is better because it imitates the II and pi in the poem. It may also imitate the tank in which the urchins live in the market. */

.cloud {
  width: 7em;
  position: absolute;
  top: 12em;
  left: 25em;
  border-top: 2px blue solid;
  border-right: 2px white solid;
  border-bottom: 2px blue solid;
  border-left: 2px blue solid;
}

#fullcloud {
  width: 7em;
  position: absolute;
  top: 12em;
  left: 25em;
  border-width: 2px;
  border-color: blue;
  border-style: solid;
  background-color: blue;
  color: blue;
}

.doublecloud {
  width: 8em;
  position: absolute;
  top: 12em;
  left: 25em;
  border-width: 4px;
  border-color: blue;
  border-style: double;
}

body { font-family: Inconsolata;
  font-size: 43%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }

@media screen and (min-width: 414px) {
body { font-family: Inconsolata;
  font-size: 57%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

@media screen and (min-width: 600px) {
body { font-family: Inconsolata;
  font-size: 75%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

@media screen and (min-width: 760px) {
body { font-family: Inconsolata;
  font-size: 100%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

@media screen and (min-width: 910px) {
body { font-family: Inconsolata;
  font-size: 125%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

@media screen and (min-width: 1100px) {
body { font-family: Inconsolata;
  font-size: 150%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

@media screen and (min-width: 1400px) {
body { font-family: Inconsolata;
  font-size: 200%;
  }

h1 {font-family: Inconsolata;
  font-size: 150%;
  }
}

/* animation */

@supports (animation-delay: 4s) {
    #slideset {height: 10em; position: relative}
    #slideset > * {visibility: hidden; animation: 36s autoplay1 infinite;
      position: absolute; top: 0; left: 10em}
    #slideset > *:nth-child(1) {animation-delay: 0s}
    #slideset > *:nth-child(2) {animation-delay: 4s}
    #slideset > *:nth-child(3) {animation-delay: 8s}
    #slideset > *:nth-child(4) {animation-delay: 12s}
    #slideset > *:nth-child(5) {animation-delay: 16s}
    #slideset > *:nth-child(6) {animation-delay: 20s}
    #slideset > *:nth-child(7) {animation-delay: 24s}
    #slideset > *:nth-child(8) {animation-delay: 28s}
    #slideset > *:nth-child(9) {animation-delay: 32s}
    @keyframes autoplay1 {
      0% {visibility: visible}
      11.1111% {visibility: hidden}
         }
    }