/* sRGB color. */
:root {
  --retrica-orange: rgb(255, 129, 0);
}
/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --retrica-orange: color(display-p3 1 0.5059 0);
  }
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "SF Pro", "Roboto", "Avenir Next", "HelveticaNeue", Helvetica, Arial, sans-serif;
  font-size: 1em;
}

body {
  background-color: var(--retrica-orange);
}

* {
  margin: 0;
  padding: 0;
}

h1 {
  display: none;
}

/* a and a.nodecor */

a {
  color: black;
  text-decoration: underline;
}
a:link, a:visited, a:hover, a:active { text-decoration: underline; }

a.nodecor:link, a.nodecor:visited, a.nodecor:hover, a.nodecor:active { text-decoration: none; }

/* outter, inner */

.outter {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inner {
  height: auto;
  display: flex;
  flex-flow: column;
}

/* row */

.row {
  display: flex;
  flex-flow: row;
  margin: 0 auto;
  padding: 0.5em 0;
}

/* main: logo and text */

.main {
  padding: 1.5em 0;
}

.logo {
  align-items: flex-end;
  padding: 0.5em 0;
  margin: 0 1em;
}

.logo img {
  width: 12em;
}

.text {
  display: flex;
  align-items: flex-end;
  margin: 0 0.3em;

  font-size: 6em;
  font-weight: 700;
  line-break: auto;
  line-height: 1em;;
}

/* download */

.download a {
  display: inline-block;
  margin: 0 1em;
}

.download img {
  width: 10em;
}

/* links */

.links a {
  display: inline-block;
  margin: 0 1em;
  font-size: 1.3em;
}

/* footer */

.footer {
  position: fixed;
  bottom: 0;
  display: flex;
  width: 90%;
  padding: 1em 0;
  margin: 0 5%;
  font-size: 1.1em;
}

.footer a, .footer span {
  display: inline-block;
  margin: 0 0.5em;
}

.space {
  flex: auto;
}

/* responsive */

@media (min-width: 900px) {
  /* html, body {
    font-size: 1.25em;
  }
  #logo { width: 600px; height: 600px; }
  #logo video, #logo img { width: 600px; } */
}

@media (max-width: 900px) {
  /* #logo { width: 500px; height: 500px; }
  #logo video, #logo img { width: 500px; }
  .footer a {
    margin: 14px;
  } */
  body {
    font-size: 0.85em;
  }
}

@media (max-width: 800px) {
  body {
    font-size: 0.8em;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 0.75em;
  }
}

@media (max-width: 600px) {
  /* vertical */
  body {
    font-size: 1em;
  }
  .inner {
    margin: 0 1em;
    padding: 4em 0;
  }
  .row {
    margin: 0;
  }
  .main {
    flex-direction: column;
    width: 100%;
    padding: 0;
  }
  .text {
    font-size: 3.5em;
    padding: 0.5em 0;
  }
  .row.links {
    font-size: 0.8em;
    margin: 0 0.7em;
  }
  .row.links a {
    margin: 0 0.5em;
  }
  .footer .copy {
    display: none;
  }
}

@media (max-width: 400px) {
  body {
    font-size: 0.8em;
  }
}

@media (max-width: 330px) {
  body {
    font-size: 0.7em;
  }
}

@media (max-width: 280px) {
  body {
    font-size: 0.6em;
  }
}

@media (max-width: 260px) {
  body {
    font-size: 0.5em;
  }
}

@media (max-width: 220px) {
  body {
    font-size: 0.4em;
  }
}

@media (max-width: 170px) {
  body {
    font-size: 0.3em;
  }
}

@media (max-width: 800px) and (max-height: 800px) {
  /* scrollable */
  .outter {
    display: block;
  }
  .footer {
    position: relative;
  }
}