/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
.glow-button {
  position: relative;
  width: 200px;
  height: 60px;
  background-color: #111;
  color: #ffd700;
  border: 2px solid #ffd700;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0px #ffd700;
}

.diamond {
  width: 10px;
  height: 10px;
  background-color: #ffd700;
  transform: rotate(45deg);
  transition: transform 0.6s ease;
}

.glow-button:hover {
  background-color: #222;
  box-shadow: 0 0 15px #ffd700, inset 0 0 10px #ffd700;
  text-shadow: 0 0 5px #ffd700;
}

.glow-button:hover .diamond {
  transform: rotate(405deg);
}

body {
  color: #FFFFFF;
}
body {
  background-color: black;
}

.container {
  display: flex;
  flex-direction: column; /* This forces boxes to go down vertically */
}
ul {
  padding-left: 40px;  /* Pushes the entire list and its bullets rightward */
}

li {
  list-style-position: outside; /* Keeps bullets outside the box */
  margin-bottom: 10px;
}

 <style>
/* 1. Define the safe structural slide-up animation */
@keyframes structuralFadeUp {
  0% {
    opacity: 0;
    /* Uses a relative percentage shift so it scales seamlessly on all screens */
    margin-top: 2vh; 
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}

/* 2. Apply it smoothly to the main page wrapper */
body {
  /* Pre-load state */
  opacity: 0;
  
  /* Triggers instantly on load: name | speed | ease-curve | stay-visible */
  animation: structuralFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}


</style>