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

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
  background: linear-gradient(rgb(15, 12, 11) 0%, rgb(0, 0, 0) 99.4%);
}

button { 
  color:white;
  width: 100%;
  text-align: center;
}

h1 {
  font-family: var(--font-family);
  margin-bottom: 6px;
  font-weight: 100;
}

h2 {
  display: inline-block;
}

.centered {
  display: flex; /* Makes the div a flex container */
  justify-content: center; /* Centers its children horizontally */
}

ul {
  padding: 0;
  display: flex; /* Aligns li elements side-by-side */
  list-style: none; /* Removes default list styling */
}

li {
  margin-right: 10px; /* Spacing between buttons */
}

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

.secondaryButton {
  display: flex;
  align-items: center;
  font-weight: var(--font-weight-bold);
  /* background-color: var(--color-background-button-secondary); */
  background-color: hsla(0, 0%, 100%, 0.025);
  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);
}

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

/* Styles for the navbar */
.navbar {
    width: 100%; /* Ensures the navbar spans the full width of the viewport */
    background-color: #333; /* Dark background for the navbar */
    color: white; /* Light text color for contrast */
    padding: 10px 20px; /* Padding around the content in the navbar */
    box-sizing: border-box; /* Includes padding in width calculation */
    display: flex; /* Uses flexbox for layout */
    align-items: center; /* Vertically centers content in the navbar */
}

.logo {
    margin-right: auto; /* Pushes all other navbar content to the right */
    font-size: 24px; /* Larger text for the logo */
    font-weight: bold; /* Makes the logo text bold */
}

.error {
  font-size: 160px;
  font-weight: 900;
  text-align: center;
  width: 100%;
}

/* Optional: Styles for additional navbar items */
.navbar a {
    color: white;
    text-decoration: none;
    margin-left: 20px; /* Spacing between navbar items */
}

a {
  text-decoration: none;
}

@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;
  }
}


: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;
}