style.css

/* reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
}

/* styles */
body {
  font-family: "Open Sans", sans-serif;
}

header {
  color: white;
  background-color: black;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

header a {
  color: white;
}

.logo-svg {
  fill: white;
  height: 4rem;

  transform-origin: top;
  animation-name: strobe;
  animation-delay: 2s;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes strobe {
  0% {
    fill: white;
    filter: drop-shadow(0px 0px 3px white);
    transform: translateX(1px) rotate(1deg);
  }
  1% {
    fill: yellow;
    filter: drop-shadow(0px 0px 3px yellow);
    transform: translateX(-1px) rotate(-3deg);
  }
  2% {
    fill: purple;
    filter: drop-shadow(0px 0px 3px purple);
    transform: translateX(1px) rotate(1deg);
  }
  3% {
    fill: lightcoral;
    filter: drop-shadow(0px 0px 3px lightcoral);
    transform: translateX(-1px) rotate(-3deg);
  }
  4% {
    fill: green;
    filter: drop-shadow(0px 0px 3px green);
    transform: translateX(1px) rotate(1deg);
  }
  5% {
    fill: indigo;
    filter: drop-shadow(0px 0px 3px indigo);
    transform: translateX(-1px) rotate(-3deg);
  }
  6% {
    fill: orange;
    filter: drop-shadow(0px 0px 3px orange);
    transform: translateX(1px) rotate(1deg);
  }
  7% {
    fill: brown;
    filter: drop-shadow(0px 0px 3px brown);
    transform: translateX(-1px) rotate(-3deg);
  }
  8% {
    fill: magenta;
    filter: drop-shadow(0px 0px 3px magenta);
    transform: translateX(1px) rotate(1deg);
  }
  9% {
    fill: lightblue;
    filter: drop-shadow(0px 0px 3px lightblue);
    transform: translateX(-1px) rotate(-3deg);
  }

  /* pause */
  10% {
    fill: white;
    filter: drop-shadow(0px 0px 3px white);
    transform: translateX(0) rotate(0);
  }
  100% {
    fill: white;
  }
}

.logo-font {
  font-family: "Poppins", sans-serif;
}
.logo-text {
  font-weight: 500;
}
.logo-slogan {
  color: gray;
}

.menu {
  list-style: none;
  padding: 0;
  text-align: center;
}

.menu a {
  color: white;
}

main {
  padding: 2rem;
}

footer {
  background-color: black;
  padding: 1rem 2rem;
  color: white;
  display: flex;
  justify-content: space-between;
}