/* ===== RESET ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== FONTS ===== */
@font-face {
  font-family: 'MesloLGS Nerd';
  src: url('../assets/fonts/meslo/MesloLGSNerdFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MesloLGS Nerd';
  src: url('../assets/fonts/meslo/MesloLGSNerdFont-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* ===== GLOBAL ===== */
body {
  background-color: var(--drac-bg);
  color: var(--drac-fg);
  font-family: 'MesloLGS Nerd', monospace;
  padding: var(--drac-spacing-lg) var(--drac-spacing-lg);
}

.block {
  margin-bottom: var(--drac-spacing-md);
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}

.line {
  display: flex;
  gap: var(--drac-spacing-sm);
}

.prompt {
  color: var(--drac-yellow);
  font-weight: bold;
}

.command {
  color: var(--drac-fg);
}

.content {
  color: var(--drac-comment);
  margin-top: var(--drac-spacing-xs);
  line-height: 1.8;
  opacity: 0;
  animation: fadeIn 0.3s ease-in 0.15s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.bold {
  color: var(--drac-strong-color);
}

.heading {
  color: var(--drac-heading-color);
  line-height: 1.2;
  font-size: 24px;
}

.subheading {
  color: var(--drac-pink);
  line-height: 1.2;
  font-size: 20px;
}

.project-link {
  color: var(--drac-link-color);
  text-decoration: none;
  transition: color var(--drac-transition-duration) var(--drac-transition-timing);
}

.project-link:hover {
  color: var(--drac-link-hover-color);
}

.inline-code {
  color: var(--drac-code-color);
  font-family: 'MesloLGS Nerd', monospace;
  background-color: var(--drac-ui-bg-light);
  padding: 0em 0.2em;
  border-radius: 4px;
  border: 1px solid var(--drac-code-color);
}