* {
  padding: 0;
  margin: 0;
}

a {
  color: rgb(196, 192, 192) !important;
  text-decoration: none !important;
}
a:hover {
  color: #fff !important;
}
@keyframes slide {
  0% {
    left: 50%;
    font-size: 80px;
  }
  100% {
    left: 51%;
    font-size: 95px;
  }
}

@keyframes slide-back {
  0% {
    left: 51%;
    font-size: 95px;
  }
  100% {
    left: 50%;
    font-size: 80px;
  }
}
body {
  background: url("./images/image.png") no-repeat;
  background-size: 100vw;
}

.wrapper {
  position: relative;
  margin: 0;
  width: 100vw;
  height: 101vh;
  background-image: linear-gradient(
    130deg,
    rgba(255, 255, 255, 0) 10%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0.8) 98%
  );
}
.wrapper div {
  font-family: "Staatliches";
  position: absolute;
  top: 35vh;
  margin: -8px;
  width: 600px;
  height: 100px;
  font-size: 5vw !important;
  color: rgb(196, 192, 192);
  font-weight: 800;
  animation: slide-back 0.5s ease-out forwards;
}

.projects {
  top: 45vh !important;
}

.contact {
  top: 55vh !important;
}

.about:hover {
  animation: slide 0.5s ease-out forwards;
}

.projects:hover {
  animation: slide 0.5s ease-out forwards;
}
.contact:hover {
  animation: slide 0.5s ease-out forwards;
}