@charset "UTF-8";

/* General Notes: */

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

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

.navbar span {
  display: block;
  font-size: 0.75em;
  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; 
}

 #poems {
    display: grid;
    grid-template-rows: 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em 4em;
    grid-template-columns: 4em 4em 4em 4em 5em;
    justify-content: center;
     text-align: center;
  }

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

  #poems a {
   text-decoration: none;
    color: blue;
  }

  #poems a:hover {
    text-decoration: underline; 
    color: black;
  }

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

body { 
    font-family: Inconsolata;
    font-size: 90%;
    line-height: 3em;
  }

  h1 {
    text-align: center;
    font-size: 130%;
  }

  #epigraph {
    text-align: center;
    font-size: 90%;
    padding-bottom: 2em;
  }

/* To avoid flash of unstyled content */
html {
    visibility: visible;
    opacity: 1;
}

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

  body { 
    font-family: Inconsolata;
    font-size: 120%;
    line-height: 1em;
  }

  h1 {
    font-size: 150%;
    text-align: center;
  }

  #epigraph {
    font-size: 100%;
    padding-bottom: 2em;
    text-align: center;
  }

  html {
    visibility: visible;
    opacity: 1;
  }

}

@media screen and (min-width: 500px) {
body { 
    font-family: Inconsolata;
    font-size: 150%;
    line-height: 1em;
  }

  h1 {
    display: grid;
    font-size: 150%;
    text-align: center;
  }

  #epigraph {
    font-size: 60%;
    padding-bottom: 2em;
    text-align: center;
  }

  #poems {
    display: grid;
    grid-template-rows: 2em 2em 2em 2em 2em 2em 2em 2em 2em 3em;
    grid-template-columns: 2em 2em 2em 2em 2em 2em 2em 2em 2em 2em;
    justify-content: center;
      text-align: center;
  }

   html {
    visibility: visible;
    opacity: 1;
   }
}

@media screen and (min-width: 700px) {
   
  body { 
    font-family: Inconsolata;
    font-size: 200%;
      line-height: 1em;      
  }

  h1 {
    text-align: center;
    font-size: 150%;
  }

  #epigraph {
    text-align: center;
    font-size: 60%;
    padding-bottom: 2em;
  }

  #poems {
    display: grid;
    grid-template-rows: 2em 2em 2em 2em 2em 2em 2em 2em 2em 3em;
    grid-template-columns: 2em 2em 2em 2em 2em 2em 2em 2em 2em 2em;
    justify-content: center;
      text-align: center;
  }

   html {
    visibility: visible;
    opacity: 1;
   }
}