:root {
  --skiplinksMarginVertical: 10px;
  --skiplinksMarginHorizontal: 6px;
  --contentGap: 30px;
  --socialIconSize: clamp(calc(var(--defaultFontSize) * 1.5), calc(15px + .7vw), 100px);
  --inputBackgroundColor: rgb(233, 233, 233);
}

.skiplink {
  position: fixed;
  transform: translateY(calc(-100% - (var(--skiplinksMarginVertical) * 2))) translateX(var(--mainNavASize));
  top: 0;
  left: 0;
  z-index: var(--skiplinkLayer);
  background-color: var(--elementBackgroundColor);
  box-sizing: border-box;
  margin: var(--skiplinksMarginVertical) var(--skiplinksMarginHorizontal);
  padding: 10px;
  border: var(--elementBorderColor) solid 2px;
  border-radius: 3px;
  filter: brightness(1);
  transition: filter 0.2s, transform 0.2s;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.skiplink:focus-visible {
  outline: var(--focusColor) solid var(--focusSize);
  outline-offset: calc(var(--focusSize) * -1);
  filter: brightness(1.2);
  transform: translateY(100%) translateX(var(--mainNavASize));
}

.skiplink:hover {
  filter: brightness(1.2);
}

#wrapper {
  margin: 0 0 0 var(--mainNavASize);
  min-height: calc(100dvh - var(--mainHeaderHeight));
  width: calc(100% - var(--mainNavASize));
  min-width: var(--minWebsiteSize);
  display: flex;
  flex-direction: column;
}

#mainContent {
  flex: 1;
  padding: var(--mainHeaderHeight) var(--mainPadding) var(--mainPadding) var(--mainPadding);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--contentGap);
  width: 100%;
  scroll-margin-top: var(--mainHeaderHeight);
}

h2 {
  display: flex;
  font-size: clamp(var(--defaultFontSize), calc(25px + 1vw), 100px);
  font-weight: 500;
  text-transform: uppercase;
  font-family: "BebasNeue", Arial, Helvetica, sans-serif;
  letter-spacing: .075em;
  line-height: 1;
  white-space: normal;
  word-break: break-word;
  padding: 0px var(--contentGap);
  box-sizing: border-box;
  z-index: 3;
}

/*h3 {
  display: flex;
  font-size: clamp(var(--defaultFontSize), calc(15px + .5vw), 100px);
  font-weight: 500;
  text-transform: uppercase;
  font-family: "BebasNeue", Arial, Helvetica, sans-serif;
  letter-spacing: .05em;
  line-height: 1;
  white-space: normal;
  word-break: break-word;
  padding: 0px var(--contentGap);
  box-sizing: border-box;
}*/

legend {
  display: flex;
  font-size: clamp(var(--defaultFontSize), calc(12px + .5vw), 100px);
  font-weight: 500;
  text-transform: uppercase;
  font-family: "BebasNeue", Arial, Helvetica, sans-serif;
  letter-spacing: .05em;
  line-height: 1;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
}

input, textarea {
  background-color: var(--inputBackgroundColor);
}

  @media (max-width: 950px) {
    :root {
      --socialIconSize: clamp(calc(var(--defaultFontSize) * 2), calc(15px + .7vw), 100px);
      --skiplinksMarginHorizontal: 10px;
    }

    .skiplink {
      transform: translateY(calc(-100% - (var(--skiplinksMarginVertical) * 2))) translateX(0%);
    }

    .skiplink:focus-visible {
      transform: translateY(100%) translateX(0%);
    }

    #wrapper {
      margin: 0;
      width: 100%;
    }

    #mainContent {
      padding: var(--mainHeaderHeight) var(--contentGap) var(--mainPadding) var(--contentGap);
    }
  }

  @media (max-width: 300px) {
    .skiplink {
      transform: translateY(-100%) translateX(0%);
      margin: 0;
    }

    .skiplink:focus-visible {
      transform: translateY(0%) translateX(0%) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .skiplink {
      transform: translateY(100%) translateX(var(--mainNavASize));
      transition: opacity 0.2s;
      opacity: 0;
      pointer-events: none;
    }

    .skiplink:focus-visible {
      opacity: 1;
      pointer-events: all;
    }
  }