@import url("https://fonts.googleapis.com/css2?family=Nata+Sans:wght@100..900&display=swap");

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

:root {
  /* Backgrounds */
  --bg-main: #000000;
  --bg-glass: rgba(255, 255, 255, 0.05);
  --bg-glass-blur: blur(16px);

  /* Text */
  --text-main: #f5f5f7;
  --text-muted: rgba(255, 255, 255, 0.6);

  /* Accent Colors */
  --blue: #0a84ff;
  --green: #30d158;
  --yellow: #ffd60a;
  --orange: #ff9f0a;
  --red: #ff453a;
  --pink: #ff375f;
  --purple: #bf5af2;
  --teal: #64d2ff;

  /* Measurements */
  --padding: 20px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg-main);
  color: var(--text-main);
  font-family: "Nata Sans", Arial, sans-serif;
}

.glass {
  background: var(--bg-glass);
  backdrop-filter: var(--bg-glass-blur);
  -webkit-backdrop-filter: var(--bg-glass-blur);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Base Button Style */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  color: var(--text-main);
  background: var(--bg-glass);
  backdrop-filter: var(--bg-glass-blur);
  -webkit-backdrop-filter: var(--bg-glass-blur);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Button Variants */
.btn-blue {
  background-color: var(--blue);
}

.btn-green {
  background-color: var(--green);
}

.btn-yellow {
  background-color: var(--yellow);
}

.btn-orange {
  background-color: var(--orange);
}

.btn-red {
  background-color: var(--red);
}

.btn-purple {
  background-color: var(--purple);
}

.btn-teal {
  background-color: var(--teal);
}

.btn-outline {
  border: 2px solid var(--text-muted);
  background: transparent;
}

span.red {
    color: var(--red);
    font-weight: bold;
}

span.blue {
    color: var(--blue);
    font-weight: bold;
}

.parent {
  padding: 0 20px;
  margin: 0 auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* Responsive widths */
@media (min-width: 768px) {
  .parent {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .parent {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .parent {
    width: 1170px;
  }
}

@media (min-width: 1400px) {
  .parent {
    width: 1370px;
  }
}