:root {
  --spacing-xxxs: 0.25rem;
  --spacing-xxs: 0.5rem;
  --spacing-xs: 0.75rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 5rem;
  --spacing-4xl: 10rem;
  --spacing-5xl: 15rem;
  --color-primary: #3dcfb6;
  --color-text: whitesmoke;
  --color-bg: #1c1c1c;
  --color-error: #c56a6a;
  --fs-xxs: 15px;
  --fs-xs: 1rem;
  --fs-sm: 1.125rem;
  --fs-ssm: 1.125rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5rem;
  --fs-6xl: 7.5rem;
  --fs-7xl: 8.5rem;
  --fs-8xl: 9.5rem;
  --br-25: 25px;
  --br-35: 35px;
  --border: 2px solid #3dcfb6;
  --fira: "firacode", monospace;
  --karla: "karla", system-ui, sans-serif;
}

@font-face {
  font-family: "firacode";
  src: url("../assets/fonts/FiraCode-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "karla";
  src: url("../assets/fonts/Karla-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* outline: 1px solid red; */
}

html {
  background-color: black;
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  background: linear-gradient(to top right, #1c1c1c 0%, #1c1c1c 36%, #202c29 45%, #1c3632 52%, #16403a 62%, #104943 72%, #0b4d42 100%);
  cursor: default;
  position: relative;
  overflow-x: hidden;
}

h1,
h2,
h3,
p {
  color: var(--color-text);
}

a {
  color: var(--color-text);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-size: var(--fs-md);
  padding: var(--spacing-xs) var(--spacing-lg);
  border-radius: var(--br-35);
  border: 2px solid var(--color-text);
  color: var(--color-text);
  background-color: transparent;
  cursor: pointer;
}

.dNone {
  display: none;
}

::-webkit-scrollbar {
  width: 0;
}

@media (max-width: 969px) {
  .header__burger,
  .header__return {
    display: flex;
  }

  .burger-menu__content > a {
    width: 130px;
    text-align: left;
  }
}