body, header, nav, main, footer, img, h1, h2, h3, ul, table, td, th, p, section, article {
  padding: 0;
  border: 0;
  margin: 0;
}

/* Basic Reset for body and margin */
html, body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  background: linear-gradient(rgb(15, 12, 11) 0%, rgb(0, 0, 0) 99.4%);
  color: white;
  font-family: Arial, sans-serif;
  display: flex; /* Enables flexbox layout */
  justify-content: center; /* Centers children horizontally */
  align-items: center; /* Centers children vertically */
}

/* Container for main content */
.main-content {
  display: flex; /* Enables flexbox inside main content */
  justify-content: center; /* Centers content horizontally inside the main content */
  align-items: center; /* Centers content vertically inside the main content */
  flex-direction: column; /* Stacks any child elements vertically */
  height: 100%;
  width: 50%;
  flex-direction: column; /* Adjust based on your layout needs */
  padding-top: 60px; /* Add padding to avoid overlap with the fixed navbar */
  margin-top: 60px;
  max-height: calc(100% - 120px);
  z-index: 800;
  /* overflow: hidden; */
}

.main-content p { 
  justify-content: left;
  align-items: left;

}

.secondaryButton {
  /* display: flex;
  align-items: center; */
  font-weight: var(--font-weight-bold);
  background-color: var(--color-background-button-secondary);
  border: var(--border-width-default) solid var(--color-border-button-secondary);
  border-radius: var(--border-radius-small);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.1rem;
  outline: none;
  /* padding: var(--space-1) var(--space-2); */
  cursor: pointer;
  transition: background-color var(--timing-long);
  padding: 10px 20px;
  color: white;
  font-family: var(--font-family);
  margin-left: 10px; /* Space between buttons */
}

a {
  text-decoration: none;
}

p {
  /* text-transform: uppercase; */
  font-family: var(--font-family);
  letter-spacing: 0.1rem;
}

.tertiaryButton {
  display: flex;
  align-items: center;
  font-weight: var(--font-weight-bold);
  background-color: hsla(0, 0%, 100%, 0.00);
  border: none;
  border: var(--border-width-default) solid hsla(0, 0%, 100%, 0.00);
  border-radius: var(--border-radius-small);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.1rem;
  outline: none;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  transition: background-color var(--timing-long);
  color: white;
  justify-content: center;
}

.tertiaryButton:hover {
  background-color: var(--color-background-button-secondary-hover);
  border: var(--border-width-default) solid var(--color-border-button-secondary);
}

.secondaryButton:hover {
  background-color: var(--color-background-button-secondary-hover);
}

/* Styles for the navbar */
.navbar {
  width: 100%;
  background-color: rgba(15, 15, 15, 0);
  backdrop-filter: blur(5px); /* Blur effect */
  -webkit-backdrop-filter: blur(5px); /* For Safari */
  position: fixed;
  top: 0;
  left: 0;
  color: white;
  padding: 10px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  z-index: 1000;
}

h2 {
  width: 100%;
  margin-bottom: 5px;
  font-weight: 100;
  font-family: var(--font-family);
}

h3 {
  width: 100%;
  text-decoration: underline;
  margin-bottom: 5px;
  font-weight: 100;
  font-family: var(--font-family);
}

a {
  text-decoration: none;
  color: white;
  z-index: 1000;
}

.navbar a {
  margin-left: 10px;
}

.logo {
  font-size: 28px;
  font-weight: 100;
  font-family: var(--font-family);
  margin-right: 20px; /* Ensures space between logo and buttons */
  z-index: 1000;
}

/* Assuming you have a container for buttons, if not, you might need to add one */
.nav-buttons {
  display: flex;
  align-items: center; /* This ensures vertical alignment if needed */
}

.hamburger-menu {
  display: none; /* Hidden by default */
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  z-index: 1000;
}

.hamburger-menu span {
  display: block; /* Ensures the spans are treated as block elements */
  height: 2px;
  width: 30px; /* Sets a specific width for each bar */
  background-color: white; /* Ensures the color stands out, adjust as needed */
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

.hamburger-menu span:last-child {
  margin-bottom: 0;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* semi-transparent black background */
  display: none; /* Hidden by default */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  z-index: 900; /* Below the nav buttons but above other content */
}

@media (max-width: 600px) {
  ul {
      flex-direction: column; /* Stacks the li elements vertically */
  }

  li {
      margin-right: 0; /* No horizontal margin needed */
      margin-bottom: 10px; /* Vertical spacing between buttons */
  }

  li:last-child {
      margin-bottom: 0; /* Removes bottom margin from the last button */
  }

  .secondaryButton { 
    /* padding: var(--space-1) 0; */
    justify-content: center;
  }
}

/* Styles for the navbar */
@media (max-width: 768px) {
  .hamburger-menu {
      display: flex; /* Show hamburger menu */
  }

  .navbar {
    justify-content: space-between;
  }

  .nav-buttons {
      display: none; /* Hide the buttons */
      flex-direction: column;
      width: 100%; /* Full width */
      position: absolute;
      top: 57px; /* Below the navbar */
      left: 0;
      background-color: rgba(6,5,5, .5); /* Slightly transparent */
      transition: opacity 0.5s ease; /* Smooth transition for opacity */
  }

  .nav-buttons.show,
  .menu-overlay.show {
      display: block; /* Show when hamburger menu is clicked */
  }

  .hamburger-menu.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger-menu.open span:nth-child(2) {
      opacity: 0;
  }

  .hamburger-menu.open span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
  }
}


:root {
  --width-scroll-bar: 13px;
  --border-radius-extra-extra-large: 1.6rem;
  --border-radius-extra-large: 1rem;
  --border-radius-large: 0.6rem;
  --border-radius-medium: 0.4rem;
  --border-radius-none: 0;
  --border-radius-rounded: 9000px;
  --border-radius-small: 0.2rem;
  --border-width-default: 1px;
  --border-width-input: 2px;
  --color-accent: #518afe;
  --color-black: #000;
  --color-white: #fff;
  --color-hinted-grey-1: #0e0e10;
  --color-hinted-grey-2: #18181b;
  --color-hinted-grey-3: #1f1f23;
  --color-hinted-grey-4: #26262c;
  --color-hinted-grey-5: #323239;
  --color-hinted-grey-6: #3b3b44;
  --color-hinted-grey-7: #53535f;
  --color-hinted-grey-8: #848494;
  --color-hinted-grey-9: #adadb8;
  --color-hinted-grey-10: #c8c8d0;
  --color-hinted-grey-11: #d3d3d9;
  --color-hinted-grey-12: #dedee3;
  --color-hinted-grey-13: #e6e6ea;
  --color-hinted-grey-14: #efeff1;
  --color-hinted-grey-15: #f7f7f8;
  --color-background-balloon: #08122e;
  --color-background-body: #040c23;
  --color-background-button-primary: var(--color-accent);
  --color-background-button-primary-hover: #266cff;
  --color-background-button-primary-small: var(--color-transparent);
  --color-background-button-primary-small-hover: var(--color-accent);
  --color-background-button-secondary: var(--color-opacity-white-1);
  --color-background-button-secondary-hover: var(--color-opacity-white-3);
  --color-background-button-tertiary: var(--color-white);
  --color-background-button-tertiary-hover: var(--color-hinted-grey-13);
  --color-background-header: #060f2b;
  --color-background-input-select: var(--color-opacity-white-3);
  --color-background-input-checkbox: var(--color-opacity-white-3);
  --color-background-interactable-hover: var(--color-opacity-white-3);
  --color-background-interactable-active: var(--color-opacity-white-2);
  --color-background-interactable-selected: var(--color-accent);
  --color-background-scroll: var(--color-background-body);
  --color-background-scroll-bar: var(--color-text-accent);
  --color-background-product-username: #07122f;
  --color-background-modal-checkout: #060f2b;
  --color-background-card: #060f2b;
  --color-background-card-alt: var(--color-opacity-white-1);
  --color-background-toggle: var(--color-opacity-white-3);
  --color-background-toggle-handle: var(--color-white);
  --color-background-toggle-handle-overlay: var(--color-white);
  --color-background-toggle-hover: var(--color-opacity-white-5);
  --color-background-toggle-focus: var(--color-opacity-white-5);
  --color-background-toggle-checked: var(--color-accent);
  --color-background-block-footer: var(--color-accent);
  --color-background-stat: var(--color-opacity-white-1);
  --color-background-category: #07122f;
  --color-background-category-social-telegram-hover: var(--color-social-telegram);
  --color-background-category-social-soundcloud-hover: var(--color-social-soundcloud);
  --color-background-category-social-steam-hover: var(--color-social-steam);
  --color-border-button-primary: var(--color-background-button-primary);
  --color-border-button-primary-small: var(--color-accent);
  --color-border-button-secondary: var(--color-opacity-white-2);
  --color-border-button-tertiary: var(--color-white);
  --color-border-input: var(--color-opacity-white-4);
  --color-border-input-hover: var(--color-opacity-white-6);
  --color-border-input-focus: var(--color-accent);
  --color-border-toggle: var(--color-opacity-white-4);
  --color-border-toggle-hover: var(--color-opacity-white-6);
  --color-border-toggle-focus: var(--color-accent);
  --color-border-toggle-checked: var(--color-accent);
  --color-border-toggle-overlay: var(--color-opacity-white-10);
  --color-border-toggle-overlay-hover: var(--color-white);
  --color-border-toggle-overlay-focus: var(--color-white);
  --color-border-toggle-overlay-checked: var(--color-white);
  --color-border-product-username: var(--color-opacity-white-2);
  --color-border-modal-checkout: #060f2b;
  --color-border-card: var(--color-opacity-white-2);
  --color-border-stat: var(--color-opacity-white-2);
  --color-border-category: var(--color-opacity-white-2);
  --color-text: var(--color-white);
  --color-text-accent: #518afe;
  --color-text-alt: var(--color-hinted-grey-12);
  --color-text-alt-1: var(--color-hinted-grey-9);
  --color-text-button-primary: var(--color-white);
  --color-text-button-primary-small: var(--color-text-accent);
  --color-text-button-primary-small-hover: var(--color-background-body);
  --color-text-button-secondary: var(--color-white);
  --color-text-button-tertiary: var(--color-black);
  --color-text-important: #518afe;
  --color-text-input-select: var(--color-hinted-grey-14);
  --color-text-link: #518afe;
  --color-text-stat: #518afe;
  --color-text-category-logo: var(--color-white);
  --color-text-category-logo-hover: var(--color-background-body);
  --color-text-toggle-checked-icon: var(--color-accent);
  --color-text-toggle-checked-icon-overlay: var(--color-white);
  --color-social-telegram: #518afe;
  --color-social-soundcloud: #f26f23;
  --color-social-steam: #c5c3c0;
  --color-opacity-black-1: rgba(0, 0, 0, 0.05);
  --color-opacity-black-2: rgba(0, 0, 0, 0.1);
  --color-opacity-black-3: rgba(0, 0, 0, 0.15);
  --color-opacity-black-4: rgba(0, 0, 0, 0.2);
  --color-opacity-black-5: rgba(0, 0, 0, 0.25);
  --color-opacity-black-6: rgba(0, 0, 0, 0.3);
  --color-opacity-black-7: rgba(0, 0, 0, 0.4);
  --color-opacity-black-8: rgba(0, 0, 0, 0.5);
  --color-opacity-black-9: rgba(0, 0, 0, 0.6);
  --color-opacity-black-10: rgba(0, 0, 0, 0.7);
  --color-opacity-black-11: rgba(0, 0, 0, 0.75);
  --color-opacity-black-12: rgba(0, 0, 0, 0.8);
  --color-opacity-black-13: rgba(0, 0, 0, 0.85);
  --color-opacity-black-14: rgba(0, 0, 0, 0.9);
  --color-opacity-black-15: rgba(0, 0, 0, 0.95);
  --color-opacity-blue-1: rgba(81, 138, 254, 0.05);
  --color-opacity-blue-2: rgba(81, 138, 254, 0.1);
  --color-opacity-blue-3: rgba(81, 138, 254, 0.15);
  --color-opacity-blue-4: rgba(81, 138, 254, 0.2);
  --color-opacity-blue-5: rgba(81, 138, 254, 0.25);
  --color-opacity-blue-6: rgba(81, 138, 254, 0.3);
  --color-opacity-blue-7: rgba(81, 138, 254, 0.4);
  --color-opacity-blue-8: rgba(81, 138, 254, 0.5);
  --color-opacity-blue-9: rgba(81, 138, 254, 0.6);
  --color-opacity-blue-10: rgba(81, 138, 254, 0.7);
  --color-opacity-blue-11: rgba(81, 138, 254, 0.75);
  --color-opacity-blue-12: rgba(81, 138, 254, 0.8);
  --color-opacity-blue-13: rgba(81, 138, 254, 0.85);
  --color-opacity-blue-14: rgba(81, 138, 254, 0.9);
  --color-opacity-blue-15: rgba(81, 138, 254, 0.95);
  --color-opacity-grey-1: rgba(197, 195, 192, 0.05);
  --color-opacity-grey-2: rgba(197, 195, 192, 0.1);
  --color-opacity-grey-3: rgba(197, 195, 192, 0.15);
  --color-opacity-grey-4: rgba(197, 195, 192, 0.2);
  --color-opacity-grey-5: rgba(197, 195, 192, 0.25);
  --color-opacity-grey-6: rgba(197, 195, 192, 0.3);
  --color-opacity-grey-7: rgba(197, 195, 192, 0.4);
  --color-opacity-grey-8: rgba(197, 195, 192, 0.5);
  --color-opacity-grey-9: rgba(197, 195, 192, 0.6);
  --color-opacity-grey-10: rgba(197, 195, 192, 0.7);
  --color-opacity-grey-11: rgba(197, 195, 192, 0.75);
  --color-opacity-grey-12: rgba(197, 195, 192, 0.8);
  --color-opacity-grey-13: rgba(197, 195, 192, 0.85);
  --color-opacity-grey-14: rgba(197, 195, 192, 0.9);
  --color-opacity-grey-15: rgba(197, 195, 192, 0.95);
  --color-opacity-orange-1: rgba(242, 111, 35, 0.05);
  --color-opacity-orange-2: rgba(242, 111, 35, 0.1);
  --color-opacity-orange-3: rgba(242, 111, 35, 0.15);
  --color-opacity-orange-4: rgba(242, 111, 35, 0.2);
  --color-opacity-orange-5: rgba(242, 111, 35, 0.25);
  --color-opacity-orange-6: rgba(242, 111, 35, 0.3);
  --color-opacity-orange-7: rgba(242, 111, 35, 0.4);
  --color-opacity-orange-8: rgba(242, 111, 35, 0.5);
  --color-opacity-orange-9: rgba(242, 111, 35, 0.6);
  --color-opacity-orange-10: rgba(242, 111, 35, 0.7);
  --color-opacity-orange-11: rgba(242, 111, 35, 0.75);
  --color-opacity-orange-12: rgba(242, 111, 35, 0.8);
  --color-opacity-orange-13: rgba(242, 111, 35, 0.85);
  --color-opacity-orange-14: rgba(242, 111, 35, 0.9);
  --color-opacity-orange-15: rgba(242, 111, 35, 0.95);
  --color-opacity-white-1: hsla(0, 0%, 100%, 0.05);
  --color-opacity-white-2: hsla(0, 0%, 100%, 0.1);
  --color-opacity-white-3: hsla(0, 0%, 100%, 0.15);
  --color-opacity-white-4: hsla(0, 0%, 100%, 0.2);
  --color-opacity-white-5: hsla(0, 0%, 100%, 0.25);
  --color-opacity-white-6: hsla(0, 0%, 100%, 0.3);
  --color-opacity-white-7: hsla(0, 0%, 100%, 0.4);
  --color-opacity-white-8: hsla(0, 0%, 100%, 0.5);
  --color-opacity-white-9: hsla(0, 0%, 100%, 0.6);
  --color-opacity-white-10: hsla(0, 0%, 100%, 0.7);
  --color-opacity-white-11: hsla(0, 0%, 100%, 0.75);
  --color-opacity-white-12: hsla(0, 0%, 100%, 0.8);
  --color-opacity-white-13: hsla(0, 0%, 100%, 0.85);
  --color-opacity-white-14: hsla(0, 0%, 100%, 0.9);
  --color-opacity-white-15: hsla(0, 0%, 100%, 0.95);
  --color-transparent: transparent;
  --font-family: 'Poppins', 'Inter', Helvetica, Arial, sans-serif;
  --font-size-1: 5.4rem;
  --font-size-2: 3.6rem;
  --font-size-3: 2.4rem;
  --font-size-4: 1.8rem;
  --font-size-5: 1.4rem;
  --font-size-6: 1.3rem;
  --font-size-7: 1.2rem;
  --font-size-8: 1.1rem;
  --font-size-9: 1rem;
  --font-size-10: 0.9rem;
  --font-size-11: 0.8rem;
  --font-size-12: 0.7rem;
  --font-size-13: 0.6rem;
  --font-size-14: 0.5rem;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --opacity-1: 0;
  --opacity-2: 0.05;
  --opacity-3: 0.1;
  --opacity-4: 0.15;
  --opacity-5: 0.2;
  --opacity-6: 0.25;
  --opacity-7: 0.3;
  --opacity-8: 0.4;
  --opacity-9: 0.5;
  --opacity-10: 0.6;
  --opacity-11: 0.7;
  --opacity-12: 0.75;
  --opacity-13: 0.8;
  --opacity-14: 0.85;
  --opacity-15: 0.9;
  --opacity-16: 0.95;
  --opacity-17: 1;
  --shadow-elevation-1: 0 1px 2px var(--color-opacity-black-14), 0 0 2px var(--color-opacity-black-14);
  --shadow-elevation-2: 0 4px 8px var(--color-opacity-black-7), 0 0 4px var(--color-opacity-black-7);
  --shadow-elevation-3: 0 6px 16px var(--color-opacity-black-8), 0 0 4px var(--color-opacity-black-7);
  --shadow-elevation-4: 0 12px 32px var(--color-opacity-black-8), 0 0 8px var(--color-opacity-black-7);
  --shadow-elevation-5: 0 32px 64px var(--color-opacity-black-9), 0 0 16px var(--color-opacity-black-7);
  --shadow-category-social-telegram: 0 0 64px rgba(81, 138, 254, var(--opacity-8));
  --shadow-category-social-soundcloud: 0 0 64px rgba(242, 111, 35, var(--opacity-8));
  --shadow-category-social-steam: 0 0 64px rgba(197, 195, 192, var(--opacity-8));
  --space-0: 0;
  --space-0-25: 0.25rem;
  --space-0-5: 0.5rem;
  --space-0-75: 0.75rem;
  --space-1: 1rem;
  --space-1-25: 1.25rem;
  --space-1-5: 1.5rem;
  --space-1-75: 1.75rem;
  --space-2: 2rem;
  --space-3: 3rem;
  --space-4: 4rem;
  --space-5: 5rem;
  --space-6: 6rem;
  --space-7: 7rem;
  --space-8: 8rem;
  --space-9: 9rem;
  --space-10: 10rem;
  --space-auto: auto;
  --space-negative-0-25: -0.25rem;
  --space-negative-0-5: -0.5rem;
  --space-negative-0-75: -0.75rem;
  --space-negative-1: -1rem;
  --space-negative-1-25: -1.25rem;
  --space-negative-1-5: -1.5rem;
  --space-negative-1-75: -1.75rem;
  --space-negative-2: -2rem;
  --space-negative-3: -3rem;
  --space-negative-4: -4rem;
  --space-negative-5: -5rem;
  --space-negative-6: -6rem;
  --space-negative-7: -7rem;
  --space-negative-8: -8rem;
  --space-negative-9: -9rem;
  --space-negative-10: -10rem;
  --timing-long: 300ms;
  --timing-medium: 250ms;
  --timing-short: 100ms;
  --z-index-above: 10;
  --z-index-below: -1;
  --z-index-default: 1;
  --z-index-sticky: 1000;
  --z-index-balloon: 2000;
  --z-index-modal: 3000;
  --z-index-loader: 9999;
}