@font-face {
      font-family: "Alagard"; 
       src: url("fonts/alagard.TTF");
       src: url("fonts/alagard.woff");
  }
  
body, html 
{
  height: 100%;
  margin: 0;
  cursor: url("images/Moth.cur"),default;
}

.bg 
{
  background-color: #80d2f0;
  background-image: url("images/dresser.jpg");

  z-index: 1;
  height: 100%; 

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor; 
  
}

img
{
  
  
  image-rendering: pixelated;
}


.heart {
  position: absolute;
  width: auto;
  height: auto;
  z-index: 90;
  left: -10%;
  bottom: -30%;
  transform: scaleY(0.20)scaleX(-0.20);
  background-color: #5c7246;
  -ms-interpolation-mode: nearest-neighbor;

}


.hearttext {
  visibility: hidden;
  width: 240px;
  background-color: #5c7246;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  z-index: 99;
  top: -495%;
  left: 476%;
  
  
  position: absolute;
  
}
 
.heart:hover .hearttext {
  visibility: visible;

}




.atlas
{
z-index: 15;
position: absolute;

height: auto;
width: auto;
right:0%;
top:0%;
transform: scaleY(1)scaleX(-1);
  
  -ms-interpolation-mode: nearest-neighbor;

}

.mothhand
{
  z-index: 14;
  position: absolute;

  right:0%;
  bottom:0%;
  transform: scale(1);
  
  -ms-interpolation-mode: nearest-neighbor;
}



#container
{

position:relative;
width: 1000px;
height:auto;
left: calc(50% - 600px);
top: 10%;
background-image: url(images/portal.jpg);
 

}


.flex 
{
  
  border:1px solid #5c7246; 
 
  position:absolute;
  z-index: 10;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  align-items: center;
  width: 1000px;
  height:600px;
  
  
}

.flex div
{
  font-family:Alagard;
  font-size: large;
z-index: 11;
color: rgb(92, 114, 70);
height: auto;
width: auto;
align-items: center;
text-align: center;

position: absolute;
}







.mouse {
  position: absolute;
  left: 5% ;
  top: 5%;
  z-index: 90;
  border:1px solid #5c7246; 
}
 
.mousetext {
  visibility: hidden;
  background-color: #5c7246;
  width: 240px;
  color:#a1d071;
  text-align: center;
  border:1px solid #5c7246; 
  padding: 5px 0;
  z-index: 99;
  top: 100%;
  left: 0%;
  position: absolute;
  
}

.mouse:hover .mousetext { 
  visibility: visible;
  
}






.dice {
  position: absolute;
  z-index: 90;
  left: calc(50% + 225px);
  top:calc(50% + 20px);
  border:1px solid #5c7246; 
}


.dicetext {
  visibility: hidden;
  width: 240px;
  color:#a1d071;
  text-align: center;
  border:1px solid #5c7246; 
  padding: 5px 0;
  z-index: 99;
  top: -150%;
  left: -100%;
  background-color: #5c7246;
  
  position: absolute;
  
}
 
.dice:hover .dicetext {
  visibility: visible;
  
}


.die {
  position: absolute;
  z-index: 90;
  left: calc(50% + 300px);
  top:calc(50% + 15px);
  border:1px solid #5c7246; 

}


.dietext {
  visibility: hidden;
  width: 240px;
  
  color:#a1d071;
  text-align: center;
  border:1px solid #5c7246; 
  padding: 5px 0;
  z-index: 99;
  top: -170%;
  left: -100%;
  background-color: #5c7246;
  
  position: absolute;
  
}
 
.die:hover .dietext {
  visibility: visible;

}

.back{
  position:absolute;
  left: 1%;
  top: 1%;
  font-family: "Alagard";
  font-size: 1.0em;
  text-decoration: none;
  text-shadow: 1px 1px 0px darkviolet;
  color:white;
}

.fwd{
  position:absolute;
  left: 2.5em;
  top: 2.0em;
  font-family: "Alagard";
  font-size: 1.0em;
  text-decoration: none;
  text-shadow: 1px 1px 0px darkviolet;
  color:white;
}

.bwd{
  position:absolute;
  left: 1.0em;
  top: 2.0em;
  font-family: "Alagard";
  font-size: 1.0em;
  text-decoration: none;
  text-shadow: 1px 1px 0px darkviolet;
  color:white;
}


a:hover { 
    text-decoration: none;
    color:#ff008c;
    font-weight:700;
    cursor: url("images/Moth.cur"),default;
  } 
  a:active { 
    text-decoration: none; 
    color:#ff008c;
    font-weight:700;
    cursor: url("images/Moth.cur"),default;
  }


/* FROM HERE PAGE 2  */

.headless {
  position: absolute;
  left: 5% ;
  top: 5%;
  z-index: 90;
  border:1px solid #5c7246; 
}
 
.hltext {
  visibility: hidden;
  background-color: #5c7246;
  width: 240px;
  color:#a1d071;
  text-align: center;
  border:1px solid #5c7246; 
  padding: 5px 0;
  z-index: 99;
  top: -10%;
  left: 0%;
  position: absolute;
  
}

.headless:hover .hltext { 
  visibility: visible;
  
}

.ringhead {
  position: absolute;
  right: 5% ;
  top: 5%;
  z-index: 90;
  border:1px solid #5c7246; 
}
 
.rhtext {
  visibility: hidden;
  background-color: #5c7246;
  width: 240px;
  color:#a1d071;
  text-align: center;
  border:1px solid #5c7246; 
  padding: 5px 0;
  z-index: 99;
  top: -10%;
  left: -10%;
  position: absolute;
  
}

.ringhead:hover .rhtext { 
  visibility: visible;
  
}

img {
   image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor; 
}