* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  color: #fff !important;
  text-decoration: none !important;
}

@keyframes slide {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes slide-back {
  0% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes slide-up {
  0% {
    transform: translateY(100vh);
  }
  100% {
    transform: translateX(0px);
  }
}

.background {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right bottom, #366ba1, #abc7e3);
  background-attachment: fixed;
}

.home {
  font-family: "Staatliches";
  position: absolute;
  padding: 30px 0 0 30px;
  width: 170px;
  height: 70px;
  color: #fff;
  font-size: 20px;
  animation: slide-back 0.4s ease-out forwards;
}

.home:hover {
  animation: slide 0.4s ease-out forwards;
}

.home .my-name {
  display: inline-block;
  width: 100%;
  text-align: right;
}

.text1,
.text2 {
  font-family: "Staatliches";
  background: linear-gradient(
    to right bottom,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.25)
  );
  position: absolute;
  left: 300px;
  top: 200px;
  padding: 1vw;
  font-size: 60px;
  color: #fff;
  border-radius: 30px;
}

.text2 {
  left: 1000px;
}

.intro h2 {
  margin-bottom: 1vh;
}

.intro {
  position: absolute;
  top: 20vh;
  left: 50vw;
  margin-left: -25vw;
  margin-bottom: 200px;
  padding: 3vw;
  width: 50vw;
  font-size: 40px;
  color: #fff !important;
  background: linear-gradient(
    to right bottom,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.25)
  );
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.1);
  border-radius: 60px;
  animation: slide-up 0.7s ease-out;
}

.placeholder {
  position: absolute;
  top: 220vh;
}