html,
body {
  font-family: "Luckiest Guy", cursive;
  background-image: url("background.gif");
  color: white;
  height: 100%;
}

#home {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#home img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  border: 10px solid black;
  margin-bottom: 50px;
}

#home h1 {
  text-align: center;
  padding-bottom: 30px;
  margin-top: 20px;
  font-size: 50px;
  animation: color-change 2s ease-in-out infinite,
    backAndForth 2s ease-in-out infinite;
}

#home-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

#social-buttons {
  display: flex;
}

.social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: yellow;
  border: 10px solid white;
  text-decoration: none;
  color: black;
  margin-bottom: 10px;
  margin-right: 50px;
  animation: color-change 2s ease-in-out infinite,
    backAndForth 2s ease-in-out infinite;
}

.social-button i {
  font-size: 50px;
}

.social-button:hover {
  background-color: black;
  color: white;
}

#roadmap {
  display: flex;
  flex-direction: column;
  margin: 50px;
  font-size: 50px;
}

.footer {
  text-align: center;
  font-size: 30px;
}

@keyframes backAndForth {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

#animation-element {
  animation: backAndForth 2s ease-in-out infinite;
}

@keyframes color-change {
  0% {
    color: yellow;
  }
  16% {
    color: red;
  }
  33% {
    color: green;
  }
  50% {
    color: blue;
  }
  66% {
    color: orange;
  }
  83% {
    color: purple;
  }
  100% {
    color: yellow;
  }
}