:root {
  --accent-black: #000000;
  --accent-black-half: #00000080;
  --accent-black-halfer: #00000040;
  --accent-white: #ffffff;
  --accent-crimson: #b20042;
  --accent-scarlet: #ff1f3e;
  --accent-orange: #ff6f00;
  --accent-yellow: #ffc000;
  --accent-pink: #ff6379;
  --accent-flesh: #ffe6c8;
  --accent-peach: #ffcdb9;
  --accent-flesh-half: #ffe6c880;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  overflow: hidden;
}

body {
  margin: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  font-family: "Comfortaa", sans-serif;
  z-index: 1;
  width: 100vw;
  display: flex;
  background-color: var(--accent-scarlet);
  box-shadow: 0 0 1em var(--accent-black-half);
}

header {
  position: relative;
  flex-wrap: wrap;
  flex-direction: column;
  animation: show-header 1s;
}

main {
  position: relative;
  width: 100%;
  height: calc(100vh - 106px);
  overflow: hidden auto;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(var(--accent-white), var(--accent-flesh-half), var(--accent-white));
  animation: show-main 1s;
}

main hr {
  margin: 2em 0;
  border: .05em solid var(--accent-yellow);
}

header > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header > div > .button {
  margin: 0 1em;
}

header > div > div > a {
  flex-direction: row-reverse;
  align-items: center;
}

header > div > div {
  justify-content: space-between;
}

header > div > div {
  padding: .5em;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  transition: color .2s, background-color .2s;
}

header > div > div > a > svg {
  margin: 0 .5em;
}

header div svg {
  height: 3em;
  fill: var(--accent-white);
  cursor: pointer;
}

header div > a {
  text-decoration: none;
  color: var(--accent-white);
  display: flex;
}

header div > a + div {
  display: flex;
  flex-direction: column;
}

header > div > div > a > span {
  font-size: 1.5em;
}

main > .button {
  margin: 1em auto;
}

main blockquote {
  font-size: 1.2em;
  font-family: "Comfortaa", sans-serif;
  font-style: italic;
  text-align: center;
  margin: 1em 0;
  border-top: .1em solid var(--accent-yellow);
  border-bottom: .1em solid var(--accent-yellow);
  padding: 1em;
}

.nav-toggle {
  display: none;
}

#space {
  margin: 3em 0;
}

#videos {
  margin: 2em auto;
  display: flex;
  align-items: center;
}

#videos > svg {
  margin: 0 .5em;
  border-radius: 50%;
  padding: .5em .1em .5em .9em;
  height: 2em;
  cursor: pointer;
  scale: 1;
  transition: background-color .2s, scale .2s;
}

#videos > svg:hover {
  background-color: var(--accent-black-halfer);
  scale: 1.1;
}

#videos > video {
  border-radius: .5em;
  width: 50vmin;
  box-shadow: 0 0 1em var(--accent-black-half);
}

#footer {
  margin-top: 3em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#footer > a {
  font-size: .8em;
}

#footer > img {
  height: 1.5em;
}

#nav {
  width: 100vw;
  display: flex;
  background-color: var(--accent-scarlet);
}

#nav > div {
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  flex-direction: column;
}

#nav > div:first-child {
  display: none;
}

#nav > div a {
  padding: 1em;
  display: flex;
  align-items: center;
  transition: color .2s, background-color .2s;
}

#nav > div > a {
  padding: .2em 0;
  justify-content: center;
}

#nav > div a.active {
  z-index: 2;
}

#nav > div a.active,
#nav > div a.active + div > a {
  color: var(--accent-black);
  background-color: var(--accent-white);
}

#nav > div a.active > svg {
  fill: var(--accent-black);
  transition: fill .2s;
}

#nav > div a:hover,
#nav > div a + div > a:hover {
  color: var(--accent-white);
  background-color: var(--accent-crimson);
}

#nav > div a:hover > svg {
  fill: var(--accent-white);
}

header > div > div svg {
  flex-shrink: 0;
}

#nav > div a > svg {
  margin-right: .5em;
  height: 1.5em;
}

#nav > div > div {
  width: calc(100vw / 6);
  position: absolute;
  top: 106px;
  display: none;
  flex-direction: column;
  background-color: var(--accent-scarlet);
}

#nav > div > a.active + div {
  z-index: 1;
  box-shadow: 0 0 1em var(--accent-black-half);
}

#nav > div:hover > div {
  display: flex;
}

main > h1 {
  margin: 1em 0;
  text-align: center;
}

main a {
  color: var(--accent-crimson);
}

main > table {
  border-collapse: collapse;
  margin: 0 auto;
  width: 40em;
}

main > table tr {
  border-bottom: .1em solid var(--accent-yellow);
}

main > table tr:last-child {
  border-bottom: none;
}

main > table tr > th {
  text-align: start;
  padding: 1em 0;
}

main > table tr > th + th,
main > table tr > td + td {
  padding-left: 1em;
}

main > table tr > td {
  vertical-align: initial;
  padding: 1em 0;
}

main > table tr > td > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

main > table tr > td > ul > li::before {
  content: "—";
  margin-right: 1em;
}

main > table tbody > tr > th {
  text-align: center;
}

main > table caption {
  caption-side: bottom;
  margin-top: 2em;
}

#cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  flex-grow: 1;
}

#cards > a {
  text-decoration: none;
  color: inherit;
  margin: 1em;
  border-radius: .5em;
  padding: 1em;
  width: 20em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  background-color: var(--accent-white);
  box-shadow: 0 0 1em var(--accent-black-half);
  scale: 1;
  transition: scale .2s;
}

#cards > a:hover {
  scale: 1.1;
}

#cards > a > img {
  border-radius: .5em;
  width: 20em;
  height: 20em;
  object-fit: cover;
}

#col-row {
  margin: 0 auto;
  width: 60em;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#col-row > div {
  border-top: .1em solid var(--accent-yellow);
  padding: 5em 0;
  display: flex;
  gap: 2em;
}

#col-row > div > span {
  font-size: 1.5em;
  text-align: justify;
}

#col-row > div:nth-child(2n) {
  flex-direction: row-reverse;
}

#col-row > div > img {
  width: 50%;
  height: fit-content;
  flex-shrink: 0;
}

#col-row img {
  border-radius: .5em;
  box-shadow: .5em -.5em 1em var(--accent-yellow);
}

#col-row > div:nth-child(2n) > img {
  box-shadow: -.5em -.5em 1em var(--accent-yellow);
}

#row-col {
  margin: 0 auto;
  width: 60em;
  display: flex;
  justify-content: space-evenly;
  flex-grow: 1;
}

#row-col > div {
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#row-col > div > svg {
  margin-bottom: 1em;
  width: 10em;
}

#row-col > div > div {
  text-align: initial;
  display: flex;
  flex-direction: column;
}

#row-col h2 {
  margin: 1em 0;
}

#row-col span.mini {
  font-size: .8em;
}

#sml-row {
  margin: 0 auto;
  width: 30em;
  display: flex;
  flex-direction: column;
  gap: 2em;
  flex-grow: 1;
}

#sml-row > span,
#sml-row > ul > li {
  font-size: 1.5em;
  text-align: justify;
}

#sml-row > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#sml-row > ul > li::before {
  content: "—";
  margin-right: 1em;
}

#sml-row > svg {
  margin: 0 auto;
  width: 50vmin;
}

#home {
  border-radius: .5em;
  width: 40em;
  margin: 2em auto;
  display: block;
  box-shadow: 0 0 1em var(--accent-black-half);
}

#about {
  text-align: justify;
  margin: 0 auto;
  width: 40em;
  flex-grow: 1;
}

#about > img {
  float: right;
  margin: 0 0 1em 1em;
  border-radius: .5em;
  width: 15em;
}

#reviews {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#reviews > div {
  margin: 2em;
  border-radius: .5em;
  padding: 1em;
  width: 20em;
  background-color: var(--accent-white);
  box-shadow: 0 0 1em var(--accent-black-half);
}

#reviews > div > img {
  float: right;
  margin: 0 0 1em 1em;
  border-radius: 1em;
  width: 8em;
  height: 12em;
  object-fit: cover;
}

#reviews > div > span {
  font-size: 1.2em;
  margin-bottom: 1em;
  display: block;
}

#reviews > div > em {
  font-size: .9em;
}

#doc {
  text-align: justify;
  margin: 0 auto;
  width: 40em;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#doc h1 {
  font-size: 1.5em;
  text-align: center;
  margin: 1em 0 0 0;
}

#doc h2 {
  font-size: 1em;
  display: inline;
  margin: 0;
}

#doc > h2 {
  margin: 2em 0 0 2em;
}

#about p,
#doc p {
  text-indent: 2em;
  margin: .5em 0 0 0;
}

#doc ol,
#doc ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#doc ol {
  counter-reset: index;
}

#doc ol > li {
  list-style-position: inside;
}

#doc ol > li::before {
  counter-increment: index;
  content: counters(index, ".") ".";
  margin: 0 1em 0 2em;
}

#doc ol > li:has(> h2) {
  margin-top: 2em;
}

#doc ol > li > ol {
  margin-top: .5em;
}

#doc ol > li:has(> h2)::before {
  font-weight: bold;
}

#doc ol > li ol > li::before {
  content: counters(index, ".");
}

#doc ul > li::before {
  content: "—";
  margin: 0 1em 0 2em;
}

#doc ol.parentheses {
  counter-reset: index-parentheses;
}

#doc ol.parentheses > li::before {
  counter-increment: index-parentheses;
  content: counters(index-parentheses, ".") ")";
}

#qr {
  float: right;
  width: 12em;
  height: 12em;
}

.button {
  text-decoration: none;
  color: var(--accent-black);
  margin: 2em auto 0 auto;
  border-radius: .5em;
  padding: .5em;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5em;
  background-color: var(--accent-yellow);
  box-shadow: 0 0 1em var(--accent-black-half);
  cursor: pointer;
  scale: 1;
  transition: color .2s, scale .2s, background-color .2s;
}

.button:hover {
  color: var(--accent-white);
  background-color: var(--accent-crimson);
  scale: 1.2;
}

.button > svg {
  width: 1em;
  height: 1em;
  fill: var(--accent-black);
  transition: fill .2s;
}

.button:hover > svg {
  fill: var(--accent-white);
}

.center {
  text-align: center;
}

@media (max-width: 1080px) {
  header > div > div {
    width: 100%;
    justify-content: space-around;
  }

  header > div > div > a > span {
    font-size: 1.2em;
  }

  header > div > div > a {
    flex-direction: row;
  }

  header > div {
    flex-direction: column;
  }

  header div > a {
    text-align: center;
  }

  header > div > .button {
    margin: 0 2em 1em 2em;
  }

  #row-col.left > div {
    align-items: start;
  }

  main {
    height: calc(100vh - 146px);
  }

  .nav-toggle {
    display: initial;
  }

  #nav {
    z-index: 2;
    overflow: hidden auto;
    position: fixed;
    left: -100vw;
    height: 100vh;
    flex-direction: column;
    transition: left .5s;
  }

  #nav.active {
    left: 0;
  }

  #nav > div {
    flex-grow: initial;
  }

  #nav > div:first-child {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-items: center;
  }

  #nav > div > a {
    padding: 1em;
    justify-content: initial;
  }

  #nav > div > div,
  #nav > div:hover > div {
    display: none;
  }

  #row-col {
    margin: 0 auto;
    width: calc(100vw - 2em);
    flex-direction: column;
  }

  #row-col > div > svg {
    width: 5em;
  }

  #row-col > div > h2.qr + svg {
    width: 50vmin;
  }

  #col-row {
    margin: 1em;
    width: initial;
  }

  #col-row > div,
  #col-row > div:nth-child(2n) {
    padding: 3em 0;
    flex-direction: column;
  }

  #col-row > div > span {
    font-size: 1.2em;
  }

  #col-row > div > img {
    margin: 1em 0 0 0;
    width: 100%;
  }
}

@media (max-width: 720px) {
  main > table {
    width: calc(100vw - 2em);
  }

  main > table thead > tr {
    display: none;
  }

  main > table,
  main > table tr {
    display: flex;
    flex-direction: column;
  }

  main > table tr > td + td {
    padding: 1em 0;
  }

  #home {
    width: calc(100vw - 2em);
  }

  #about,
  #doc {
    margin: 1em auto;
    width: calc(100vw - 2em);
  }

  #reviews > div {
    margin: 1em 0;
    width: calc(100vw - 4em);
  }

  #doc #qr {
    float: none;
    width: calc(100vw - 2em);
    height: calc(100vw - 2em);
  }

  #about > img {
    float: none;
    margin: 1em auto;
    display: block;
  }
}

@media (max-width: 540px) {
  :root {
    font-size: 16px;
  }

  main {
    height: calc(100vh - 114px);
  }

  main > h1 {
    font-size: 1.5em;
  }

  main h2 {
    font-size: 1.2em;
  }

  #videos > svg {
    height: 1em;
  }

  #videos > video {
    width: 70vmin;
  }

  #sml-row {
    margin: 1em;
    width: initial;
  }

  #row-col > div > h2.qr + svg,
  #sml-row > svg {
    width: 80vmin;
  }
}

@media (max-width: 432px) {
  #cards > a {
    margin: 1em 0;
    width: 100%;
  }

  #reviews > div > img {
    float: none;
    margin: 1em auto;
    display: block;
  }

  #cards > a > img {
    width: calc(100vw - 2em);
    height: calc(100vw - 2em);
  }

  #about > img {
    width: calc(100vw - 2em);
  }
}

@keyframes show-main {
  from {
    opacity: 0;
    top: 15em;
  }

  to {
    opacity: 1;
    top: 0;
  }
}

@keyframes show-header {
  from {
    opacity: 0;
    top: -10em;
  }

  to {
    opacity: 1;
    top: 0;
  }
}