@import url("https://fonts.googleapis.com/css2?family=Bitcount+Single:wght@100..900&family=Black+Ops+One&family=Geo:ital@0;1&family=Long+Cang&family=Lugrasimo&display=swap");

body {
  background-image: url(dither_it_3.png);
  color: chartreuse;
}
h1 {
  font-family: "Lugrasimo", cursive;
  font-size: 50px;
  font-weight: 400;
  font-style: normal;
  align-content: center;
  position: relative;
  text-align: center;
}

a {
  color: aqua;
}
div.link{
  position: absolute;
  right: 50px;
  top: 20px;
  font-size: 40px; 
}

div.explain{
  font-family: "Lugrasimo", cursive;
  color: aqua;
  position: absolute;
  right: 50px;
  top: 65px;
  font-size: 20px;
}

div.HiddenText{
  position: absolute;
  left: 60px;
  font-size: 20px;
  
}

div.enCh {
  background-color: rgba(16, 16, 16, 0.3);
  padding-left: 20px;
  display: flex;
  z-index: -1;
}

div.letterIndividual1 {
  z-index: 99;
  font-family: "Long Cang", cursive;
  font-weight: 400;
  font-size: 22px;
  font-style: normal;
  flex: 50%;
  text-align: right;
  padding-right: 10px;
}
div.letterIndividual2 {
   z-index: 99;
  font-family: "Lugrasimo", cursive;
  font-weight: 400;
  font-style: normal;
  flex: 50%;
  text-align: left;
  padding-left: 10px;
}
div.letterIndividual3 {
   z-index: 99;
  font-family: "Long Cang", cursive;
  font-weight: 400;
  font-size: 22px;
  font-style: normal;
  flex: 50%;
  text-align: right;
  /*padding-right: 30px;*/
}
div.letterIndividual4 {
   z-index: 99;
  font-family: "Lugrasimo", cursive;
  font-weight: 400;
  font-style: normal;
  flex: 50%;
  text-align: left;
  /*padding-left: 30px;*/
}
div.img1 {
  position: absolute;
  left: 300px;
  top: 400px;
  z-index: 1;
}

div.img2 {
  position: absolute;
  left: 40px;
  top: 200px;
  z-index: 1;
}
 /*need to figure out the image layout*/
div.imgGrid1 {
  position: absolute;
  top: -40px;
  left: 1px;
    align-content: left;
  /*margin-top: 20px;*/
    display: flex;
    padding: 50px;
  z-index: 999;
}

div.imgGrid2 {
  position: absolute;
  top: -40px;
  align-content: right;
  right: 1px;
  /*margin-top: 20px;*/
    display: flex;
    padding: 50px;
}


div.column {
    flex: 20%;
}
.container .hover-image {
    /*
    width: 300px;
    height: 300px;
    */
    display: none;
    /*padding: 20px;*/
}

.container:hover .initial {
    width: 300px;
    height: 300px;
    display: none;
    /*padding: 20px;*/
}

.container:hover .hover-image {
    /*
    width: 300px;
    height: 300px;
    */
    display: block;
    /*padding: 20px;*/
}