@charset "UTF-8";

      /* We begin with Eric Meyer's CSS reset. */
      html, body, div, a, 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: JuliaMono-Regular;
        src: url(JuliaMono-Regular.ttf);
      }

      @font-face {
        font-family: 'Inconsolata';
        src: url('Inconsolata.otf');
      }
      body {
        font-family: 'Inconsolata';
        font-size: 12px;
      }
     .navbar {
       position: fixed;
       bottom: 2%;
       margin-left: 10em;
     }

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

  .blue {
    color: blue;
  }
  h1 {
    font-size: 125%;
    position: absolute;
    margin-top: 1em;
    margin-left: 15em;
  }
  #poem1, #poem2, #poem3, #poem4, #poem5, #poem6, #poem7, #poem8, #poem9, #poem10, #poem11, #poem12, #poem13, #poem14, #poem15, #poem16, #poem17, #poem18, #poem19, #poem20, #poem21, #poem22, #poem23, #poem24, #poem25, #poem26, #poem27, #poem28, #poem29, #poem30, #poem31, #poem32, #poem33, #poem34, #poem35, #poem36, #poem37, #poem38, #poem39, #poem40, #poem41, #poem42, #poem43, #poem44, #poem45, #poem46, #poem47, #poem48, #poem49, #poem50, #poem51, #poem52, #poem53, #poem54, #poem55, #poem56, #poem57, #poem58, #poem59, #poem60, #poem61, #poem62, #poem63, #poem64, #poem65, #poem66, #poem67, #poem68, #poem69, #poem70, #poem71, #poem72, #poem73, #poem74, #poem75, #poem76, #poem77, #poem78, #poem79, #poem80, #poem81, #poem82, #poem83, #poem84, #poem85, #poem86, #poem87, #poem88, #poem89, #poem90, #poem91, #poem92, #poem93, #poem94, #poem95, #poem96, #poem97, #poem98, #poem99, #poem100 {
    position: absolute;
    top: 4em; 
    left: 5em;
    color: black;
    background-color: white;
    z-index: 1; /* Ensure poem1 is behind the paragram */
  }
  .paragram-div {
    position: absolute; 
    top: 4em; 
    left: 5em;
    z-index: 2; /* Ensure the selected paragram is above poem1 */
    pointer-events: none; /* Allow interaction with poem1 behind */
    display: none; /* Hide all paragram divs initially */
  }
      #paragram1, #paragram2, #paragram3, #paragram4, #paragram5, #paragram6, #paragram7, #paragram8, #paragram9, #paragram10, #paragram11, #paragram12, #paragram13, #paragram14, #paragram15, #paragram16, #paragram17, #paragram18, #paragram19, #paragram20, #paragram21, #paragram22, #paragram23, #paragram24, #paragram25, #paragram26, #paragram27, #paragram28, #paragram29, #paragram30, #paragram31, #paragram32, #paragram33, #paragram34, #paragram35, #paragram36, #paragram37, #paragram38, #paragram39, #paragram40, #paragram41, #paragram42, #paragram43, #paragram44, #paragram45, #paragram46, #paragram47, #paragram48, #paragram49, #paragram50, #paragram51, #paragram52, #paragram53, #paragram54, #paragram55, #paragram56, #paragram57, #paragram58, #paragram59, #paragram60, #paragram61, #paragram62, #paragram63, #paragram64, #paragram65, #paragram66, #paragram67, #paragram68, #paragram69, #paragram70, #paragram71, #paragram72, #paragram73, #paragram74, #paragram75, #paragram76, #paragram77, #paragram78, #paragram79, #paragram80, #paragram81, #paragram82, #paragram83, #paragram84, #paragram85, #paragram86, #paragram87, #paragram88, #paragram89, #paragram90, #paragram91, #paragram92, #paragram93, #paragram94, #paragram95, #paragram96, #paragram97, #paragram98, #paragram99, #paragram100 {
        color: transparent; /* Make all text transparent */
      }
      #paragram1 .paragram, #paragram2 .paragram, #paragram3 .paragram, #paragram4 .paragram, #paragram5 .paragram, #paragram6 .paragram, #paragram7 .paragram, #paragram8 .paragram, #paragram9 .paragram, #paragram10 .paragram, #paragram11 .paragram, #paragram12 .paragram, #paragram13 .paragram, #paragram14 .paragram, #paragram15 .paragram, #paragram16 .paragram, #paragram17 .paragram, #paragram18 .paragram, #paragram19 .paragram, #paragram20 .paragram, #paragram21 .paragram, #paragram22 .paragram, #paragram23 .paragram, #paragram24 .paragram, #paragram25 .paragram, #paragram26 .paragram, #paragram27 .paragram, #paragram28 .paragram, #paragram29 .paragram, #paragram30 .paragram, #paragram31 .paragram, #paragram32 .paragram, #paragram33 .paragram, #paragram34 .paragram, #paragram35 .paragram, #paragram36 .paragram, #paragram37 .paragram, #paragram38 .paragram, #paragram39 .paragram, #paragram40 .paragram, #paragram41 .paragram, #paragram42 .paragram, #paragram43 .paragram, #paragram44 .paragram, #paragram45 .paragram, #paragram46 .paragram, #paragram47 .paragram, #paragram48 .paragram, #paragram49 .paragram, #paragram50 .paragram, #paragram51 .paragram, #paragram52 .paragram, #paragram53 .paragram, #paragram54 .paragram, #paragram55 .paragram, #paragram56 .paragram, #paragram57 .paragram, #paragram58 .paragram, #paragram59 .paragram, #paragram60 .paragram, #paragram61 .paragram, #paragram62 .paragram, #paragram63 .paragram, #paragram64 .paragram, #paragram65 .paragram, #paragram66 .paragram, #paragram67 .paragram, #paragram68 .paragram, #paragram69 .paragram, #paragram70 .paragram, #paragram71 .paragram, #paragram72 .paragram, #paragram73 .paragram, #paragram74 .paragram, #paragram75 .paragram, #paragram76 .paragram, #paragram77 .paragram, #paragram78 .paragram, #paragram79 .paragram, #paragram80 .paragram, #paragram81 .paragram, #paragram82 .paragram, #paragram83 .paragram, #paragram84 .paragram, #paragram85 .paragram, #paragram86 .paragram, #paragram87 .paragram, #paragram88 .paragram, #paragram89 .paragram, #paragram90 .paragram, #paragram91 .paragram, #paragram92 .paragram, #paragram93 .paragram, #paragram94 .paragram, #paragram95 .paragram, #paragram96 .paragram, #paragram97 .paragram, #paragram98 .paragram, #paragram99 .paragram, #paragram100 .paragram {
        display: inline-block; /* Change to inline-block to allow transform */
        color: white; /* Visible color for anchors */
       	background-color: black; /* Black background for anchors */
        text-decoration: none; 
	opacity: 1;
	padding: 0 0.2em; /* Padding for better readability */
	pointer-events: auto; /* Ensure anchors are clickable */
        transition: transform 0.3s ease; /* Smooth transition for movement */
      }
      #paragram1 .paragram:hover, #paragram2 .paragram:hover, #paragram3 .paragram:hover, #paragram4 .paragram:hover, #paragram5 .paragram:hover, #paragram6 .paragram:hover, #paragram7 .paragram:hover, #paragram8 .paragram:hover, #paragram9 .paragram:hover, #paragram10 .paragram:hover, #paragram11 .paragram:hover, #paragram12 .paragram:hover, #paragram13 .paragram:hover, #paragram14 .paragram:hover, #paragram15 .paragram:hover, #paragram16 .paragram:hover, #paragram17 .paragram:hover, #paragram18 .paragram:hover, #paragram19 .paragram:hover, #paragram20 .paragram:hover, #paragram21 .paragram:hover, #paragram22 .paragram:hover, #paragram23 .paragram:hover, #paragram24 .paragram:hover, #paragram25 .paragram:hover, #paragram26 .paragram:hover, #paragram27 .paragram:hover, #paragram28 .paragram:hover, #paragram29 .paragram:hover, #paragram30 .paragram:hover, #paragram31 .paragram:hover, #paragram32 .paragram:hover, #paragram33 .paragram:hover, #paragram34 .paragram:hover, #paragram35 .paragram:hover, #paragram36 .paragram:hover, #paragram37 .paragram:hover, #paragram38 .paragram:hover, #paragram39 .paragram:hover, #paragram40 .paragram:hover, #paragram41 .paragram:hover, #paragram42 .paragram:hover, #paragram43 .paragram:hover, #paragram44 .paragram:hover, #paragram45 .paragram:hover, #paragram46 .paragram:hover, #paragram47 .paragram:hover, #paragram48 .paragram:hover, #paragram49 .paragram:hover, #paragram50 .paragram:hover, #paragram51 .paragram:hover, #paragram52 .paragram:hover, #paragram53 .paragram:hover, #paragram54 .paragram:hover, #paragram55 .paragram:hover, #paragram56 .paragram:hover, #paragram57 .paragram:hover, #paragram58 .paragram:hover, #paragram59 .paragram:hover, #paragram60 .paragram:hover, #paragram61 .paragram:hover, #paragram62 .paragram:hover, #paragram63 .paragram:hover, #paragram64 .paragram:hover, #paragram65 .paragram:hover, #paragram66 .paragram:hover, #paragram67 .paragram:hover, #paragram68 .paragram:hover, #paragram69 .paragram:hover, #paragram70 .paragram:hover, #paragram71 .paragram:hover, #paragram72 .paragram:hover, #paragram73 .paragram:hover, #paragram74 .paragram:hover, #paragram75 .paragram:hover, #paragram76 .paragram:hover, #paragram77 .paragram:hover, #paragram78 .paragram:hover, #paragram79 .paragram:hover, #paragram80 .paragram:hover, #paragram81 .paragram:hover, #paragram82 .paragram:hover, #paragram83 .paragram:hover, #paragram84 .paragram:hover, #paragram85 .paragram:hover, #paragram86 .paragram:hover, #paragram87 .paragram:hover, #paragram88 .paragram:hover, #paragram89 .paragram:hover, #paragram90 .paragram:hover, #paragram91 .paragram:hover, #paragram92 .paragram:hover, #paragram93 .paragram:hover, #paragram94 .paragram:hover, #paragram95 .paragram:hover, #paragram96 .paragram:hover, #paragram97 .paragram:hover, #paragram98 .paragram:hover, #paragram99 .paragram:hover, #paragram100 .paragram:hover {
        text-decoration: none; 
        transform: translateX(6em); /* Move 2em to the right on hover */
      }
      #paragram1 .paragramLink, #paragram2 .paragramLink, #paragram3 .paragramLink, #paragram4 .paragramLink, #paragram5 .paragramLink, #paragram6 .paragramLink, #paragram7 .paragramLink, #paragram8 .paragramLink, #paragram9 .paragramLink, #paragram10 .paragramLink, #paragram11 .paragramLink, #paragram12 .paragramLink, #paragram13 .paragramLink, #paragram14 .paragramLink, #paragram15 .paragramLink, #paragram16 .paragramLink, #paragram17 .paragramLink, #paragram18 .paragramLink, #paragram19 .paragramLink, #paragram20 .paragramLink, #paragram21 .paragramLink, #paragram22 .paragramLink, #paragram23 .paragramLink, #paragram24 .paragramLink, #paragram25 .paragramLink, #paragram26 .paragramLink, #paragram27 .paragramLink, #paragram28 .paragramLink, #paragram29 .paragramLink, #paragram30 .paragramLink, #paragram31 .paragramLink, #paragram32 .paragramLink, #paragram33 .paragramLink, #paragram34 .paragramLink, #paragram35 .paragramLink, #paragram36 .paragramLink, #paragram37 .paragramLink, #paragram38 .paragramLink, #paragram39 .paragramLink, #paragram40 .paragramLink, #paragram41 .paragramLink, #paragram42 .paragramLink, #paragram43 .paragramLink, #paragram44 .paragramLink, #paragram45 .paragramLink, #paragram46 .paragramLink, #paragram47 .paragramLink, #paragram48 .paragramLink, #paragram49 .paragramLink, #paragram50 .paragramLink, #paragram51 .paragramLink, #paragram52 .paragramLink, #paragram53 .paragramLink, #paragram54 .paragramLink, #paragram55 .paragramLink, #paragram56 .paragramLink, #paragram57 .paragramLink, #paragram58 .paragramLink, #paragram59 .paragramLink, #paragram60 .paragramLink, #paragram61 .paragramLink, #paragram62 .paragramLink, #paragram63 .paragramLink, #paragram64 .paragramLink, #paragram65 .paragramLink, #paragram66 .paragramLink, #paragram67 .paragramLink, #paragram68 .paragramLink, #paragram69 .paragramLink, #paragram70 .paragramLink, #paragram71 .paragramLink, #paragram72 .paragramLink, #paragram73 .paragramLink, #paragram74 .paragramLink, #paragram75 .paragramLink, #paragram76 .paragramLink, #paragram77 .paragramLink, #paragram78 .paragramLink, #paragram79 .paragramLink, #paragram80 .paragramLink, #paragram81 .paragramLink, #paragram82 .paragramLink, #paragram83 .paragramLink, #paragram84 .paragramLink, #paragram85 .paragramLink, #paragram86 .paragramLink, #paragram87 .paragramLink, #paragram88 .paragramLink, #paragram89 .paragramLink, #paragram90 .paragramLink, #paragram91 .paragramLink, #paragram92 .paragramLink, #paragram93 .paragramLink, #paragram94 .paragramLink, #paragram95 .paragramLink, #paragram96 .paragramLink, #paragram97 .paragramLink, #paragram98 .paragramLink, #paragram99 .paragramLink, #paragram100 .paragramLink {
        display: inline-block; /* Change to inline-block to allow transform */
        color: white; /* Visible color for anchors */
       	background-color: black; /* Black background for anchors */
        text-decoration: none; 
	opacity: 1;
	padding: 0 0.2em; /* Padding for better readability */
	pointer-events: auto; /* Ensure anchors are clickable */
      }
      #paragram1 .paragramLink:hover, #paragram2 .paragramLink:hover, #paragram3 .paragramLink:hover, #paragram4 .paragramLink:hover, #paragram5 .paragramLink:hover, #paragram6 .paragramLink:hover, #paragram7 .paragramLink:hover, #paragram8 .paragramLink:hover, #paragram9 .paragramLink:hover, #paragram10 .paragramLink:hover, #paragram11 .paragramLink:hover, #paragram12 .paragramLink:hover, #paragram13 .paragramLink:hover, #paragram14 .paragramLink:hover, #paragram15 .paragramLink:hover, #paragram16 .paragramLink:hover, #paragram17 .paragramLink:hover, #paragram18 .paragramLink:hover, #paragram19 .paragramLink:hover, #paragram20 .paragramLink:hover, #paragram21 .paragramLink:hover, #paragram22 .paragramLink:hover, #paragram23 .paragramLink:hover, #paragram24 .paragramLink:hover, #paragram25 .paragramLink:hover, #paragram26 .paragramLink:hover, #paragram27 .paragramLink:hover, #paragram28 .paragramLink:hover, #paragram29 .paragramLink:hover, #paragram30 .paragramLink:hover, #paragram31 .paragramLink:hover, #paragram32 .paragramLink:hover, #paragram33 .paragramLink:hover, #paragram34 .paragramLink:hover, #paragram35 .paragramLink:hover, #paragram36 .paragramLink:hover, #paragram37 .paragramLink:hover, #paragram38 .paragramLink:hover, #paragram39 .paragramLink:hover, #paragram40 .paragramLink:hover, #paragram41 .paragramLink:hover, #paragram42 .paragramLink:hover, #paragram43 .paragramLink:hover, #paragram44 .paragramLink:hover, #paragram45 .paragramLink:hover, #paragram46 .paragramLink:hover, #paragram47 .paragramLink:hover, #paragram48 .paragramLink:hover, #paragram49 .paragramLink:hover, #paragram50 .paragramLink:hover, #paragram51 .paragramLink:hover, #paragram52 .paragramLink:hover, #paragram53 .paragramLink:hover, #paragram54 .paragramLink:hover, #paragram55 .paragramLink:hover, #paragram56 .paragramLink:hover, #paragram57 .paragramLink:hover, #paragram58 .paragramLink:hover, #paragram59 .paragramLink:hover, #paragram60 .paragramLink:hover, #paragram61 .paragramLink:hover, #paragram62 .paragramLink:hover, #paragram63 .paragramLink:hover, #paragram64 .paragramLink:hover, #paragram65 .paragramLink:hover, #paragram66 .paragramLink:hover, #paragram67 .paragramLink:hover, #paragram68 .paragramLink:hover, #paragram69 .paragramLink:hover, #paragram70 .paragramLink:hover, #paragram71 .paragramLink:hover, #paragram72 .paragramLink:hover, #paragram73 .paragramLink:hover, #paragram74 .paragramLink:hover, #paragram75 .paragramLink:hover, #paragram76 .paragramLink:hover, #paragram77 .paragramLink:hover, #paragram78 .paragramLink:hover, #paragram79 .paragramLink:hover, #paragram80 .paragramLink:hover, #paragram81 .paragramLink:hover, #paragram82 .paragramLink:hover, #paragram83 .paragramLink:hover, #paragram84 .paragramLink:hover, #paragram85 .paragramLink:hover, #paragram86 .paragramLink:hover, #paragram87 .paragramLink:hover, #paragram88 .paragramLink:hover, #paragram89 .paragramLink:hover, #paragram90 .paragramLink:hover, #paragram91 .paragramLink:hover, #paragram92 .paragramLink:hover, #paragram93 .paragramLink:hover, #paragram94 .paragramLink:hover, #paragram95 .paragramLink:hover, #paragram96 .paragramLink:hover, #paragram97 .paragramLink:hover, #paragram98 .paragramLink:hover, #paragram99 .paragramLink:hover, #paragram100 .paragramLink:hover {
        color: black;
      }

  

 @media screen and (min-width: 1px) {
    body { 
      font-size: 7px;      
    }     
  } 

  @media screen and (min-width: 360px) {
    body { 
      font-size: 8px;      
    }     
  } 

  @media screen and (min-width: 530px) {
    body { 
      font-size: 12px;      
    }     
  } 

  @media screen and (min-width: 710px) {
    body { 
      font-size: 16px;      
    }     
  } 
  @media screen and (min-width: 890px) {
    body { 
      font-size: 20px;      
    }     
  }  
  @media screen and (min-width: 1075px) {
    body { 
      font-size: 24px;      
    }     
  }