:root {
  --primary-color: #960018;
  --text-color: #333333;
  --background-color: #F0F0F0;
  --border-radius: 4px;
  --gap: 35px;
  --spacing: 120px;
}

*{
  margin: 0; 
  padding: 0; 
}

*, *::before, *::after{
  box-sizing: border-box; 
}


@font-face {
  font-family: "Blackhawk";
  font-display: swap;
  src: url("/fonts/Blackhawk.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  font-display: swap;
  src: url("/fonts/Montserrat.ttf") format("truetype");
}

body {
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--text-color);
  background-color: var(--background-color);
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
  }
  h1 {
    font-size: 100px;
    margin: 0;
    font-family: 'Blackhawk', system-ui;
    font-weight: 100;
  }
  
  p {
    text-wrap: pretty;
  }

  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
  }
  &::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
  }
}



@media (max-width: 680px) {
  :root {
    --spacing: 10px;
  }

  .text-lg {
    display: none;
  }
}