/* import */
@font-face{
  font-family: gamepaused;
  src: url(/fonts/gamepaused.otf);
  }
@font-face {
  font-family: bytebounce;
  src: url(/fonts/bytebounce.ttf);
  }

/* elements */
body {
  background-color: #00B7EF;
  background-image: url(/img/earthbg1.png);
  background-size: 50%;
  background-repeat: repeat;
  background-attachment: scroll;
  }
  
.titleheader {
  z-index: 1;
  position: fixed;
  display: block;
  background-color: white;
  box-shadow: -3px -3px lightgray, -6px -6px gray, -9px -9px black;
  border-radius: 5px;
  width: 400px;
  height: auto;
  color: black;
  margin-left: 20px;
  margin-top: 40px;
  }

.title{
  font-family: gamepaused;
  font-size: 60px;
  text-shadow: -1px -1px lightgray, -2px -2px gray, -3px -3px black;
  line-height: 30px;
  padding: 25px 12px 0 12px;
  }

.desc{
  font-family: bytebounce;
  font-size: 30px;
  padding: 0 12px 13px 12px;
  }

/* Home */
.homebutton{
  z-index: 1;
  position: fixed;
  display: block;
  background-color: white;
  box-shadow: -3px -3px lightgray, -6px -6px gray, -9px -9px black;
  border-radius: 5px;
  width: 400px;
  height: auto;
  color: black;
  margin-left: 20px;
  margin-top: 350px;
  }

.home{
  font-family: gamepaused;
  font-size: 60px;
  text-shadow: -1px -1px lightgray, -2px -2px gray, -3px -3px black;
  line-height: 30px;
  padding: 0px 0px 0 18px;
  line-height: 3px;
  }

/* Garfield */
.garfield {
  position: fixed;
  margin-top: 350px;
  margin-left: 475px;
    }
    
.garfield .hoverimg{
  position: absolute;
      left: 0;
      top: 0;
      display: none;
  }
  
.garfield:hover .hoverimg{
  display: block;
  }

/* Trinkets */
.trinkets {
  position: fixed;
  margin-top: 70px;
  margin-left: 500px;
  width: 100px;
    }
    
.trinkets .hoverimg2{
  position: absolute;
      left: 0;
      top: 0;
      display: none;
  }
  
.trinkets:hover .hoverimg2{
  display: block;
  }

/* Fish */
.fish {
  position: fixed;
  margin-top: 100px;
  margin-left: 850px;
  width: 100px;
  display: block;
    }
    
.fish .hoverimg3{
  position: absolute;
      left: 0;
      top: 0;
      display: none;
  }
  
.fish:hover .hoverimg3{
  display: block;
}

.fish:hover .defimg3{
  display: none;
  }

/* Hangyodon */
.hang {
  position: fixed;
  margin-top: 250px;
  margin-left: 825px;
  width: 100px;
  display: block;
    }
    
.hang .hoverimg4{
  position: absolute;
      left: 0;
      top: 0;
      display: none;
  }
  
.hang:hover .hoverimg4{
  display: block;
}

.hang:hover .defimg4{
  display: none;
  }