:root {
  --maxsitewidth: calc(600px + 40vw);
  /* --bgcolor: #FBB917 */
  --bgcolor: #f0ede3;
  --txtcolor: #000000;
  --shadowcolor: #eee;
  --size: 18px;
  --fontsize: 18px;
  --lineheight: 1.3em;
  --fontsizeheader: 1.8em;
  --textwidth: 32em;
  --bread:
    "Brandon Grotesque", "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
    sans-serif;
  --bold:
    "Brandon Grotesque", "Helvetica Neue Bold", "Helvetica Neue", Helvetica,
    Arial, "Lucida Grande", sans-serif;
  --space4: 24px;
  --space: 1rem;
  --halfspace: 8px;
  --thirdspace: 4px;
  --sixthspace: 4px;
}

@media (max-width: 360px) {
  :root {
    --space4: 16px;
    --space: 12px;
    --halfspace: 6px;
    --thirdspace: 4px;
    --sixthspace: 4px;
  }
}

html {
  width: 100vw;
  padding: 0;
  margin: 0;
  font-family: var(--bread);
  color: var(--txtcolor);
  font-size: var(--size);
  line-height: var(--lineheight);
  -webkit-text-size-adjust: none;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

body {
  background-color: var(--bgcolor);
  width: 100vw;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  margin: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

html,
body {
  overscroll-behavior: contain;
  scroll-behavior: unset;
  text-size-adjust: 100%;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.home {
  position: relative;
  max-width: var(--maxsitewidth);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space4) var(--space4);
  margin-bottom: 80px;
}

.close-area {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

a {
  color: var(--txtcolor);
}

a:hover {
  color: #666;
}

.ratio-container {
  margin: --space;
  position: relative;
}

.ratio-content {
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #ffffff;
}

.pointer-none {
  pointer-events: none;
}