* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  background-color: white;
}

.content {
  overflow-x: hidden;
  height: fit-content;
}

.overlaycontainer {
  position: relative;
  width: auto;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .9s ease;
  background-color: rgb(255,255,255, 95%);
}
.overlaycontainer:hover .overlay {
  opacity: 1;
}
.overlaytext {
  color: rgb(26, 26, 26);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;

  line-height: normal;
  width: inherit;
  max-width: 80%;

  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
.overlaytext p {
  color: rgb(79, 79, 79);
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 20px;
  margin-bottom: 5%;
}

@keyframes floatup {
    0% {transform: translateY(0px);}
    25% {transform: translateY(-20px);}
    50% {transform: translateY(0px);}
    75% {transform: translateY(20px);}
  100% {transform: translateY(0px);}
}
@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}





/* Home */
.homebackground {
  height: 100%;
  width: 100%;
  position: fixed;

  background-image: url(images/homebackground.PNG);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

#logo img {
  height: auto;
  width: 75%;
  
  animation: floatup 2.5s infinite;
}
#logo {
  display: flex;
  align-items: center; /* Vertically centers content */
  justify-content: center; /* Optionally, horizontally centers content */
  height: 100vh; /* Example: set a defined height for the container */
}

.homebuttons img {
  height: 200px;
  width: 200px;
  
  animation: wiggle 2.5s infinite;
}
.homebuttons:hover {
  animation: none;
}

.profilebutton {
  position: fixed;
  top: 10%;
  right: 50%;
}
.profilebutton img:last-child {
  display:none
}
.profilebutton:hover img:first-child {
  display:none
}
.profilebutton:hover img:last-child {
  display:inline-block
}
#portfoliobutton img {
  position: fixed;
  bottom: 14%;
  right: 5%;
}
#gamesbutton img {
  position: fixed;
  top: 2%;
  right: 8%;
}
#instagrambutton img {
  position: fixed;
  bottom: 6%;
  left: 5%;
}