/* Color theme:
--------------------------
  background color: #1D1F2A
  text color: #f0f0f0
  highlight: #a7b0d1

 */

* {
  background: #1D1F2A;
  font-family: 'Ubuntu Mono', monospace;
  color: #f0f0f0;
  max-width: 800px;
}

header h1 {
  margin-bottom: 0px;
  font-weight: 400;
}

header p {
  margin-top: 0px;
  margin-bottom: 2px;
  font-weight: 400;
  max-width: 800px;
}

body {
  margin-left:20px;
  font-size: 18px;
  max-width: 800px;
}

h3 a {
  text-decoration: none;
}

h3 a:hover {
  color: #f67280;
}

.subheader h2 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 400;
}

.subheader p {
  margin-top: 0px;
  margin-bottom: 2px;
  font-weight: 400;
}

.contained_list {
  max-width: 800px;
}

.project {
  max-width: 800px;
}

.project h1,h2,h3 {
  margin-bottom: 0px;
}

.project p {
  margin-top: 0px;
  margin-bottom: 2px;
}

dl {
  margin-left: 10px;
}

dl a {
  text-decoration: none; 
  color: inherit;        
}

dl a:hover {
  color: #f67280;
}

dd {
  margin-left: 16px;
  margin-bottom: 12px;
}

/* 1. Define the "Drop and Fade" movement */
@keyframes dropDown {
  0% {
    opacity: 0;
    transform: translateY(-20px); /* Starts 20px higher */
  }
  100% {
    opacity: 1;
    transform: translateY(0);    /* Ends at its natural position */
  }
}

/* 2. Basic styling for the list */
.drop-down {
  list-style: none;
  margin-top: 12px;
  padding: 0;
}

.item {
  margin-left: 18px;
  padding: 1px;
  border-radius: 4px;
  background-color: transparent;
  font-weight: 700;

  /* Apply the animation */
  animation: dropDown 0.5s ease-out forwards;
  
  /* Initially hide items so they don't "flash" before animating */
  opacity: 0; 
}

.item a {
  text-decoration: none; /* Removes the underline */
  color: inherit;        /* Forces the link to use the <li>'s text color */
}

.item a:hover {
  color: #f67280;
}

/* 3. Stagger the appearance using delays */
.item:nth-child(1) { animation-delay: 0.3s; }
.item:nth-child(2) { animation-delay: 0.5s; }
.item:nth-child(3) { animation-delay: 0.7s; }
.item:nth-child(4) { animation-delay: 0.9s; }
.item:nth-child(5) { animation-delay: 1.1s; }