/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
html{
	cursor: url("cursor15.png") 16 16, auto;
	max-height: 100%
}

html a {
	cursor: url("cursor25.png") 16 16, auto;
}

.center {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.middle {
  text-align: center;
}

a:hover {
  opacity: 0.8;
  color: white;
} 

.column {
  display: block;
  float: left;
  width: 30%;
  height: 60vh;
}
.left {
  position: fixed;
  top: 65%;
  left: -25%;
}
.overlay1 {
  position: absolute;
  top: -130px;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;

}
.left:hover .overlay1 {
 opacity: 1;
  color: white;
  cursor: url("cursor35.png") 16 16, auto;
}
.right {
  position: fixed;
  top: 10%;
  left: 100%;
  transform: rotate(-20deg);
}
.overlay2 {
  position: absolute;
  top: -130px;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transform: rotate(20deg);
  transition: .3s ease;

}

.right:hover .overlay2 {
  opacity: 1;
  color: white;
  cursor: url("cursor35.png") 16 16, auto;
}

.text {
  color: darkslategrey;
  font-size: 20px;
  font-family: "Marker Felt", sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.blog {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 180%;
}
iframe {
  border: 0em;
  transform: translate(-30%, 0%);
}

/* Set height of body and the document to 100% to enable "full page tabs" */
body {
  background-image: url("bugbg.png");
  background-size: cover;
  color: darkslategrey;
  font-family: Verdana;
  text-align: center;
  height: 90vh;
  width: 100vh;
}

/* Style tab links */
.tablink {
  background-color: rgba(0, 0, 255, 0) ;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;

  
}

.tablink:hover {
  color: white;
  opacity: 1;
  cursor: url("cursor25.png") 16 16, auto;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: darkslategrey;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
.tabcontent.active{/* add this */
  display:block;
}
.footer {
  position: fixed;
  text-align: center;
  bottom: 0;
  padding: 30px;
  width: 200vh;
  overflow: auto;
  background-image: url("grass2.png");
}
.music {
   top: 200%;
  left: 200%;
}