/*
We don't use nesting for the landing page in order to support older browsers.
*/

* {
  font-family: var(--kn-brand-font-family);
}

body {
  margin: auto;
  max-width: 575px;
  text-align: center;
  padding-inline: 8px;
}

#language-picker {
  position: relative;
  width: 100%;
  display: flex;
  top: 20px;
}
#language-picker button {
  display: flex;
  width: fit-content;
  margin-left: auto;
}

#language-picker button span {
  color: var(--kn-color-on-surface-variant);
}

#language-picker button svg {
  color: var(--kn-color-on-surface-variant);
  position: relative;
  top: 1px;
  height: 1em;
  width: 1em;
  margin-inline-end: 3px;
}

#chevron-down-icon-container {
  width: 1em;
  height: 1em;
}

#language-options {
  position: absolute;
  right: 0;
  top: 1.2em;
  padding: 4px;
  list-style-type: none;
}

#language-options a {
  color: var(--kn-color-on-surface-variant);
}

#language-options.hidden {
  display: none;
}

#koinon-logo {
  margin-block-start: 9%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
}

#koinon-logo img {
  height: 1.3rem;
}

#koinon-logo span {
  font-size: 1.63rem;
  letter-spacing: 0.25rem;
}

#title {
  margin-block-start: 9%;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: 0.375rem;
  line-height: 3.4rem;
}

p,
#email {
  font-size: 1.2rem;
  letter-spacing: 0.125rem;
  line-height: 2.9rem;
}

#text {
  margin-block-start: 11%;
}

#text2 {
  margin-block-start: 33px;
}

#text3 {
  margin-block-start: 33px;
}

#contact-text {
  margin-block-start: 94px;
}

#email {
  color: var(--kn-color-on-surface-variant);
}