:root {
  --chrome-width: min(1080px, 100vw);
  --chrome-height: calc(var(--chrome-width) * 0.344);
  --chrome-inset: calc(var(--chrome-width) * 0.075);
  --chrome-toolbar: calc(var(--chrome-width) * 0.091);
}

header {
  background-image:
    var(--header-chrome-down),
    var(--header-chrome),
    var(--header-chrome-shape),
    linear-gradient(to top, #261802 10px, transparent 10px),
    linear-gradient(to bottom, var(--chrome-brown), #A4825A);
  background-position:
    center bottom -1px,
    center bottom -1px,
    center bottom -1px,
    center,
    center;
  background-size:
    var(--chrome-width) auto,
    var(--chrome-width) auto,
    var(--chrome-width) auto,
    auto,
    auto;
  background-repeat: no-repeat;

  padding: 4vh 0 var(--chrome-height);

  position: relative;
}

header .pillar {
  max-width: var(--chrome-width);
  margin: 0 auto;
}

header :is(h1, h2) {
  margin: 0 var(--chrome-inset);
  font-size: 1em;
  line-height: 1.5;
  color: #472B18;
  text-shadow: 1px 1px 1px #FFF4;
}

header h1 {
  font-weight: 600;
}

header h2 {
  font-weight: 400;
}


:root {
  --chrome-origin: calc(50% - var(--chrome-width) / 2);
}

.chrome-button {
  position: absolute;
  width: calc(var(--chrome-width) * 72 / 2000);
  bottom: calc(var(--chrome-height) * 520 / 688 - 1px);
  height: calc(var(--chrome-height) * 72 / 688);

  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.chrome-button:focus-visible {
  outline: 2px solid var(--chrome-brown);
  outline-offset: 3px;
}

.lighting-toggle {
  left: calc(var(--chrome-origin) + var(--chrome-width) * 1297 / 2000);
}

.mode-toggle {
  left: calc(var(--chrome-origin) + var(--chrome-width) * 1795 / 2000);
}


header .app-icon {
  float: right;
  margin: 0 var(--chrome-inset) 0 0.333em;
  width: 8vw;
  max-width: 80px;
  font-size: 80px;
  font-size: min(8vw, 80px);
  transform: translateY(-20%) scale(1.75);
}