:root {
  --christmas-red: #7B1128;
}
/* Caveat Variable Font */
@font-face {
  font-family: 'Caveat';
  src: url('webfonts/Caveat/Caveat-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
}

/* Quicksand Variable Font */
@font-face {
  font-family: 'Quicksand';
  src: url('webfonts/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
}

/* --- CAVEAT STATIC FONTS --- */
@font-face {
  font-family: 'Caveat';
  src: url('webfonts/Caveat/static/Caveat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Caveat';
  src: url('webfonts/Caveat/static/Caveat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Caveat';
  src: url('webfonts/Caveat/static/Caveat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Caveat';
  src: url('webfonts/Caveat/static/Caveat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* --- QUICKSAND STATIC FONTS --- */
@font-face {
  font-family: 'Quicksand';
  src: url('webfonts/Quicksand/static/Quicksand-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Quicksand';
  src: url('webfonts/Quicksand/static/Quicksand-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Quicksand';
  src: url('webfonts/Quicksand/static/Quicksand-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Quicksand';
  src: url('webfonts/Quicksand/static/Quicksand-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Quicksand';
  src: url('webfonts/Quicksand/static/Quicksand-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}


body {
  font-family: 'Quicksand', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1 {
  font-family: 'Caveat', cursive;
  font-size: 3rem;
  color: var(--bs-red);
  margin-bottom: 0.5rem;
}

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