body {
  --headerHeight: calc(var(--navFontSize) + (var(--elementVerticalPadding) * 4));
}

body:has(> header #ipAndNav .ip) {
  --ipFontSize: clamp(.9rem, .3rem + .5vw, 4rem);
  --ipAndNavGap: 7px;
  --headerHeight: calc(var(--ipFontSize) + var(--ipAndNavGap) + var(--navFontSize) + (var(--elementVerticalPadding) * 3)) !important;
}

header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--elementBackgroundColorTransparent);
  width: 100%;
  height: var(--headerHeight);
  padding: var(--elementVerticalPadding) var(--elementHorizontalPadding);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  min-width: var(--websiteMinWidth);
}

h1 {
  height: 100%;
  width: auto;
}

#logoLink {
  cursor: pointer;
  display: flex;
  height: 100%;
}

#serverLogo {
  /*width: clamp(100px, 50px + 1vw, 1000px);
  height: auto;*/
  height: 100%;
  width: auto;
}

#ipAndNav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: var(--ipAndNavGap);
}

#hamburgerButton {
  all: unset;
  margin: 0;
  padding: 0;
  border: none;
  background-color: rgba(255, 255, 255, 0);
  display: none;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: auto;
  aspect-ratio: 1/1;
  position: relative;
  z-index: 99;
}

.hamburgerButtonOpen::before {
  transform: translateY(0px) rotate(-45deg) !important;
}

.hamburgerButtonOpen::after {
  transform: translateY(0px) rotate(45deg) !important;
}

#hamburgerButton::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 0 5px 5px 0;
  z-index: 4;
  transition: transform 0.2s;
  transform: translateY(5px);
  transform-origin: center;
  background-image:
  linear-gradient(
  to bottom,
  rgb(46, 46, 46) 0%,
  rgb(95, 95, 95) 20%,
  rgb(168, 168, 168) 45%,
  rgb(168, 168, 168) 55%,
  rgb(95, 95, 95) 80%,
  rgb(46, 46, 46) 100%
  ),
  linear-gradient(
  to bottom,
  rgba(5, 108, 149, 0.64) 0%,
  rgb(7, 74, 218) 20%,
  rgb(255, 255, 255) 45%,
  rgb(255, 255, 255) 55%,
  rgb(7, 74, 218) 80%,
  rgba(5, 108, 149, 0.64) 100%
  );
  background-size:
  25% 100%,
  75% 100%;
  background-position:
  left top,
  right top;
  background-repeat: no-repeat;
}

#hamburgerButton::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 5px 0 0 5px;
  z-index: 3;
  transition: transform 0.2s;
  transform-origin: center;
  transform: translateY(-5px);
  background-image:
  linear-gradient(
  to bottom,
  rgba(205, 11, 11, 0.64) 0%,
  rgb(244, 11, 11) 20%,
  rgb(255, 255, 255) 45%,
  rgb(255, 255, 255) 55%,
  rgb(244, 11, 11) 80%,
  rgba(205, 11, 11, 0.64) 100%
  ),
  linear-gradient(
  to bottom,
  rgb(46, 46, 46) 0%,
  rgb(95, 95, 95) 20%,
  rgb(168, 168, 168) 45%,
  rgb(168, 168, 168) 55%,
  rgb(95, 95, 95) 80%,
  rgb(46, 46, 46) 100%
  );
  background-size:
  75% 100%,
  25% 100%;
  background-position:
  left top,
  right top;
  background-repeat: no-repeat;
}

  @media (max-width: 950px) {
    :root {
      --logoHeight: clamp(30px, 25px + 3vw, 500px);
      --headerVerticalPadding: 5px; 
      --mobileHeaderHeight: calc(var(--logoHeight) + (var(--headerVerticalPadding) * 2));
    }

    header {
      flex-direction: row;
      height: fit-content;
      padding: var(--headerVerticalPadding) 10px;
    }

    h1 {
      height: var(--logoHeight);
      width: auto;
      z-index: 99;
    }

    #ipAndNav .ip {
      display: none;
    }

    #hamburgerButton {
      display: flex;
      height: var(--logoHeight);
    }

  }