style.css

@font-face {
  font-family: 'Fira Code';
  src: url('./fonts/Google-sans-Font-Family/ProductSans-Black.ttf');
  font-weight: 700;
  font-style: normal;
}

html {
  font-size: 20px;
}

@media (max-width: 900px) {
  html { font-size: 16px; }
}

@media (max-width: 400px) {
  html { font-size: 12px; }
}

/* Type will scale with document */
h1 {
  font-size: 2.6rem;
}
html, body {
  height: 100%;
  width: 100%;
}
body {
  background-color: black;
  
  align-items: center;
  align-content: center;
}

h1 {
  font-family: 'Fira Code';
  color: #4ffd1e;
  animation: fade-in 1s linear;
  text-align: center;
}

ul {
  text-decoration: none;
  color: black;
  list-style: none;
  text-align: center;
  padding-left: 0;
}
li {
  opacity:0;
}
li:nth-child(1) {
  
  animation: fade-in 1s linear forwards;
  animation-delay: 1s; /* fade in immediately */
}

li:nth-child(2) {
  animation: fade-in 1s linear forwards;
  animation-delay: 2s; /* fade in after 1 second */
}

li:nth-child(3) {
  animation: fade-in 1s linear forwards;
  animation-delay: 3s; /* fade in after 2 seconds */
}

/* etc. */



a {
  text-decoration: none;
  font-family: 'Fira Code';
  font-size: 4em;
  box-shadow: inset 0 0 0 0 #f98952;
  color: #f98952;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;

}

p {
  color: white;
  position: absolute;
  bottom: 0;
  font-family: monospace;
}
/* Add a transition to hover effects on buttons */

a:hover {
  box-shadow: inset 500px 0 0 0 #f98952;
  color: white;
}



/* Add a subtle animation to the page header when the page loads */


@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}