:root {
  --fg: #918a6f;
  --fg-hl: #897e55;
  --bg: #fff;
  --gray: #444;
}

#ee-banner {
  position: absolute;
  z-index: 10;

  height: 100vh;
  width: 100vw;
  padding: 10vh 10vw;

  background-color: var(--bg);
  color: var(--fg);

  font-family: "Hanata", serif;
  text-align: justify;
}

@media (pointer:none), (pointer:coarse), screen and (min-width: 640px) {
  #ee-banner {
    padding: 3vh 3vw;
  }

  #ee-banner img {
    display: none;
  }
}

#ee-banner > .banner-content {
  margin: auto;
}

#ee-banner > .banner-content > * {
  padding: 1em;
  line-height: 100%;
}

#ee-banner .xl {
  font-size: min(3.5rem, 10vw) !important;
  line-height: calc(min(3.5rem, 10vw) + 0.25em) !important;
  text-align: center;
}

#ee-banner .l {
  font-size: min(3rem, 8vw) !important;
  line-height: calc(min(3rem, 8vw) + 0.25em) !important;
  text-align: center;

  padding-left: 5vw;
  padding-right: 5vw;

  background-color: var(--fg);
  color: var(--bg);
}

#ee-banner .m {
  font-size: min(2rem, 5vw) !important;
  line-height: calc(min(2rem, 5vw) + 0.25em) !important;
}

#ee-banner .banner-buttons {
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

#ee-banner .banner-buttons > * :hover {
  /* background-color: var(--fg);
  color: var(--bg); */
  color: var(--fg-hl);
}

#ee-banner .banner-buttons > * {
  padding: 1rem 1rem;
}

#ee-banner a {
  font-weight: bold;
  text-decoration: underline solid var(--fg);
}

#ee-banner a,
#ee-banner a:link {
  color: var(--fg);
}

#ee-banner a:visited,
#ee-banner a:hover,
#ee-banner a:active {
  color: var(--fg-hl);
}

.flex-row {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-col div {
  margin: 1em 0;
}

.flex-row img {
  max-height: calc(80vh - 12em);
  max-width: calc(40vw);
  padding: 1em;
}