@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade_a{
  opacity: 0;
  animation: fade 0.8s ease-out forwards;
  animation-delay: calc(0.6s * var(--o));
}
@keyframes project{
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
.project{
  animation: project 2s infinite ease-in-out;
}
body{
      background-color: black;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 90vh;
      text-align: center;
      font-family: "Chiron GoRound TC", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
    }
.button{
  border-radius: 20px;
  background-color: cornflowerblue;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s ease
}
.button:hover{
  background-color: burlywood;
  transform: scale(1.05);
  border-radius: 15px;
}
.button:active{
  transform: scale(0.95);
  background-color: yellowgreen;
}
.button_x{
  border-radius: 20px;
  background-color: gray;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: not-allowed;
}
.email{
  color: yellowgreen;
  transition: transform 0.3s;
  text-decoration: none;
}
.email:hover{
  transform: scale(1.05);
  transition: transform 0.3s;
}
.email:active{
  transform: sclae(0.95);
  transition: transform 0.3s;
}