body {
    background-color: rgb(245, 255, 160);
  font-family: 'Chivo', monospace;
  font-family: 'Asul', monospace;
  font-size: 100%;
}

h2
{
  font-family: 'Asul', serif;
  font-size:36pt;
}

    {
        font-family: 'Chivo', sans-serif;
        font-family: 'Asul', sans-serif;
        font-size: 36pt;
    }
    
/* unvisited link */
a:link {
  color: black;
}

/* visited link */
a:visited {
  color: black;
}

/* mouse over link */
a:hover {
  color: deeppink;
  font-style: bold;
}

/* selected link */
a:active {
  color: yellow;
}
                
.container {
  /*display: grid;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;*/
  padding: 0px;
  background: cornsilk;
}

/*#mood1 {
  grid-column: 1;
  grid-row: 1;
}*/

#mood1:hover {
color: rosybrown;
}

#mood1hov {
  opacity:0
  /*grid-column: 3 / 5;
  grid-row: 1 / 2;*/
}

#mood1:hover ~ #mood1hov {
  opacity:100;
}

/*#mood2 {
  grid-column: 1;
  grid-row: 2;
}*/

#mood2:hover {
color: rosybrown;
}

#mood2hov {
  opacity:0;
  /*grid-column: 3 / 5;
  grid-row: 1 / 2;*/
}

#mood2:hover ~ #mood2hov {
  opacity:100;
}

/*#mood3 {
  grid-column: 1;
  grid-row: 3;
}*/

#mood3:hover {
color: rosybrown;
}

#mood3hov {
  opacity:0;
  /*grid-column: 3 / 5;
  grid-row: 1 / 2;*/
}

#mood3:hover ~ #mood3hov {
  opacity:100;
}

/*#mood4{
  grid-column: 1;
  grid-row: 4;
}*/

#mood4:hover {
color: rosybrown;
}

#mood4hov {
  opacity:0;
  /*grid-column: 3 / 5;
  grid-row: 1 / 2;*/
}

#mood4:hover ~ #mood4hov {
  opacity:100;
}

/*#mood5 {
  grid-column: 1;
  grid-row: 5;
}*/

#mood5:hover {
color: rosybrown;
}

#mood5hov {
  opacity: 0;
  /*grid-column: 3 / 5;
  grid-row: 1 / 2;*/
}

#mood5:hover ~ #mood5hov {
  opacity:100;
}

/*#mood6 {
  grid-column: 1;
  grid-row: 6;
}*/

#mood6:hover {
color: rosybrown;
}

#mood6hov {
  opacity: 0;
  /*grid-column: 3 / 5;
  grid-row: 1 / 2;*/
}

#mood6:hover ~ #mood6hov {
  opacity:100;
}