:root {
  --minWebsiteSize: 300px;

  /*Fonts*/
  --defaultFontSize: clamp(16px, calc(1px + 1vw), 64px);
  --fontColor: #e2d9d9;

  /*Background*/
  --elementBackgroundColor: #242323;
  --elementBorderColor: #3c3c3c;
  --elementBackgroundColorTransparent: #2423237f;
  --websiteBackgroundColor: #000000;

  /*Scrollbars*/
  --scrollbarThumbColor: #535353;
  --scrollbarTrackColor: #141414;

  /*Accessibility*/
  --focusColor: rgb(0, 132, 255);
  --focusSize: 3px;

  /*Spacing*/
  --generalVerticalPadding: 7px;
  --generalHorizontalPadding: 20px;
  --mainPadding: 100px;

  /*Layers*/
  --skiplinkLayer: 300;
  --headerLayer: 200;
  --navLayer: 100;
  --defaultLayer: 0;
}

html {
  min-width: var(--minWebsiteSize);
  background-color: var(--websiteBackgroundColor);
  height: 100%;
  width: 100%;
  font-size: var(--defaultFontSize);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbarThumbColor) var(--scrollbarTrackColor);
}

html::-webkit-scrollbar-thumb {
  background: var(--scrollbarThumbColor);
}

html::-webkit-scrollbar-track {
  background: var(--scrollbarTrackColor);
}

body {
  position: relative;
  height: fit-content;
  width: 100%;
  color: var(--fontColor);
  overflow-y: scroll;
  overflow-x: auto;
}

a:visited,
a:active,
a:hover,
a {
  color: var(--fontColor);
  text-decoration: none;
}

.noScroll {
  overflow-y: auto;
}

@media (max-width: 950px) {
  :root {
    --mainPadding: 50px;
  }

  .noScroll {
    overflow-y: hidden;
  }
}