/* Fonts */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}

/* Colors */
/* Catppuccin Mocha Palette */
:root {
  --mocha-rosewater: #f5e0dc;
  --mocha-flamingo: #f2cdcd;
  --mocha-pink: #f5c2e7;
  --mocha-mauve: #cba6f7;
  --mocha-red: #f38ba8;
  --mocha-maroon: #eba0ac;
  --mocha-peach: #fab387;
  --mocha-yellow: #f9e2af;
  --mocha-green: #a6e3a1;
  --mocha-teal: #94e2d5;
  --mocha-sky: #89dceb;
  --mocha-sapphire: #74c7ec;
  --mocha-blue: #89b4fa;
  --mocha-lavender: #b4befe;
  --mocha-text: #cdd6f4;
  --mocha-subtext1: #bac2de;
  --mocha-subtext0: #a6adc8;
  --mocha-overlay2: #9399b2;
  --mocha-overlay1: #7f849c;
  --mocha-overlay0: #6c7086;
  --mocha-surface2: #585b70;
  --mocha-surface1: #45475a;
  --mocha-surface0: #313244;
  --mocha-base: #1e1e2e;
  --mocha-mantle: #181825;
  --mocha-crust: #11111b;
}

.mocha-mantle {
  background-color: var(--mocha-mantle);
  color: var(--mocha-text);
}

/* Global styles */
html,
body {
  background-color: var(--mocha-base);
  color: var(--mocha-text);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  min-height: 100vh; /* Ensure minimum height of viewport */
}

hr {
  border: 0;
  border-top: 1px solid var(--mocha-surface0);
  /* margin: 2rem 0; */
}

a {
  color: var(--mocha-blue);
}

.underline {
  text-decoration: underline;
}

/* Container styles */
.container {
  margin: 0 auto;
  max-width: 800px;
  margin-inline: auto;
}

.push-down-footer {
  .container {
    min-height: 100vh; /* Full viewport height */
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack children vertically */
  }

  .content {
    flex: 1; /* Make content area grow and push footer down */
  }
}

/* Border styles */
.border {
  border: 1px solid var(--mocha-surface1);
}

/* Footer styles */
.footer {
  text-align: center;
  margin: 1.2rem 0 1.5rem 0;
  padding: 0.7rem 0 0.7rem 0;
  background-color: var(--mocha-mantle);
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.footer p {
  margin: 0;
}