/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html, body {
  background: #020203;
  color: #F0F0F0;
  font-family: "Montserrat", sans-serif; }

#regl {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

@media (max-width: 600px) {
  .hide-mobile {
    display: none; } }

.splash__title {
  font-family: "Ovo", serif;
  font-size: 2rem;
  position: fixed;
  bottom: calc(50vh + 1em);
  left: 10vw; }

.splash__logo {
  transition: fill 500ms;
  fill: #F0F0F0;
  position: fixed;
  top: calc(50vh + 1.5em);
  right: 10vw; }
  .splash__logo > svg {
    height: 2em; }
  .splash__logo:hover {
    fill: #4dd2ff; }

.mobile-warning {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  text-align: center;
  background: linear-gradient(135deg, #fc4e4e, #fede7c);
  overflow-y: auto; }
  .mobile-warning > * {
    margin: 1em;
    flex-shrink: 0; }

.mw__button {
  background: none;
  border: 3px solid #F0F0F0;
  border-radius: 5px;
  color: #F0F0F0;
  padding: 0.75em 1em;
  font-size: 1rem;
  cursor: pointer;
  transition: all 300ms; }
  .mw__button:hover {
    background: #F0F0F0;
    color: #fc4e4e; }

@media (min-width: 1080px) {
  .mobile-warning {
    display: none; } }

@media (max-width: 600px) {
  .splash__title {
    font-size: 1.25rem;
    left: 1rem; }
  .splash__logo {
    right: 1rem; }
    .splash__logo > svg {
      height: 1em; } }

.fade-enter-active, .fade-leave-active {
  transition: opacity 500ms; }

.fade-enter, .fade-leave-to {
  opacity: 0; }

.loader__container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center; }
  .loader__container > div {
    width: 0.5em;
    height: 0.5em;
    background: #F0F0F0;
    margin: 0.25em;
    animation: loader 0.75s linear infinite alternate; }
    .loader__container > div:nth-of-type(2) {
      animation-delay: 0.25s; }
    .loader__container > div:last-of-type {
      animation-delay: 0.5s; }

@keyframes loader {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

button:focus,
a:focus {
  outline: none;
  box-shadow: 0 0 1px 2px #4dd2ff; }

button:active {
  animation: click 0.2s;
  box-shadow: none; }

.round-button {
  outline: none;
  transition: border 300ms, background 300ms, color 300ms;
  cursor: pointer;
  background: rgba(2, 2, 3, 0.85);
  border: 3px solid #F0F0F0;
  border-radius: 50%;
  width: 5em;
  height: 5em; }
  .round-button:hover {
    background: #242424; }
  .round-button:disabled, .round-button:disabled:hover, .round-button:disabled:active {
    opacity: 0.5;
    cursor: default;
    background: none; }
  .round-button svg {
    height: 2em;
    fill: #F0F0F0; }

.round-button--left svg {
  margin-right: 0.25em; }

.round-button--right svg {
  margin-left: 0.25em; }

.round-button--inverted,
.round-button--inverted:hover,
.round-button--inverted:active {
  background: none; }
  .round-button--inverted svg,
  .round-button--inverted:hover svg,
  .round-button--inverted:active svg {
    fill: #020203; }

.button-shake {
  animation: shake 0.8s 4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both 2; }

@keyframes shake {
  10%, 90% {
    transform: translateX(-2px); }
  20%, 80% {
    transform: translateX(2px); }
  30%, 50%, 70% {
    transform: translateX(-4px); }
  40%, 60% {
    transform: translateX(4px); } }

@keyframes click {
  50% {
    transform: translateY(2px); } }

.navigation {
  position: fixed;
  right: 2vw;
  bottom: 3vh;
  left: 2vw;
  display: flex;
  justify-content: space-between; }

.nav__button-container {
  display: flex;
  align-items: flex-end; }

.nav__text-container {
  text-align: center; }
  .nav__text-container p {
    text-align: center;
    border: 3px solid #F0F0F0;
    border-radius: 8px;
    padding: 1em;
    margin: 0 1em;
    background: rgba(2, 2, 3, 0.85); }
  .nav__text-container a {
    color: #F0F0F0; }

@media (max-width: 600px) {
  .navigation {
    flex-wrap: wrap; }
  .nav__text-container {
    flex: 0 0 100%; }
    .nav__text-container P {
      margin: 0 0 0.5em 0; }
  .nav__button-container {
    order: 2; }
    .nav__button-container:last-of-type {
      margin-left: auto; } }

.filters {
  padding: 1em;
  position: fixed;
  top: 0;
  left: 0; }

.filters__category {
  margin-bottom: 1em; }

.filters__button {
  display: block;
  font-weight: 400;
  font-size: 0.9rem;
  margin: 0.25em;
  padding: 0.25em 0.5em;
  color: #F0F0F0;
  outline: none;
  transition: border 300ms, background 300ms, color 300ms;
  cursor: pointer;
  background: rgba(2, 2, 3, 0.85);
  border-radius: 5px;
  border: 1px solid #F0F0F0; }
  .filters__button.active {
    border-color: #23ff85;
    color: #23ff85; }
  .filters__button.primary {
    border-color: #4dd2ff;
    color: #4dd2ff; }
  .filters__button.secondary {
    border-color: #fede7c;
    color: #fede7c; }
  .filters__button:hover {
    background: #242424; }
  .filters__button:disabled, .filters__button:disabled:hover, .filters__button:disabled:active {
    opacity: 0.5;
    cursor: default;
    background: none; }

@media (max-width: 1000px) {
  .filters__button {
    font-size: 0.75rem; } }

@media (max-width: 1000px) and (orientation: landscape) {
  .filters__button {
    display: inline-block; } }

.subscribe {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  min-width: 20em; }

.subscribe__head {
  text-align: center;
  font-family: "Ovo", serif;
  font-size: 2em;
  margin-bottom: 1em; }

.subscribe__form > fieldset {
  margin-bottom: 1em; }

.subscribe__form > .submit__container {
  text-align: right; }

.subscribe__form label {
  font-size: 0.75em;
  display: block;
  margin-bottom: 0.5em; }

.subscribe__form input {
  transition: border 200ms;
  outline: none;
  display: block;
  width: 100%;
  background: none;
  color: #F0F0F0;
  font-size: 1rem;
  padding: 0.5em 0.75em;
  border: 2px solid #F0F0F0;
  border-radius: 5px;
  box-sizing: border-box; }
  .subscribe__form input.required {
    border: 2px solid #fc4e4e; }
  .subscribe__form input:focus {
    border: 2px solid #4dd2ff; }

.subscribe__form button {
  margin-top: 0.25em;
  transition: background 500ms;
  outline: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.75em 1em;
  background: #F0F0F0;
  color: #020203;
  border: none;
  border-radius: 5px; }
  .subscribe__form button.success, .subscribe__form button:hover.success {
    background: #23ff85;
    cursor: default; }
  .subscribe__form button.error {
    background: #fc4e4e; }
  .subscribe__form button:hover, .subscribe__form button.fetch {
    background: #4dd2ff; }

@media (max-width: 600px) {
  .subscribe {
    min-width: auto;
    left: 1rem;
    right: 1rem;
    transform: translateY(-50%); } }

.credits {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #F0F0F0;
  color: #020203;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto; }

.credits__logo {
  margin: 2em 0;
  display: block;
  text-align: center;
  height: 2em;
  fill: #020203;
  transition: all 500ms; }
  .credits__logo:hover {
    fill: #0086b3; }
  .credits__logo > svg {
    height: 100%; }

.credits__section {
  margin: 4em 1em;
  text-align: center;
  font-family: "Ovo", serif; }
  .credits__section > h3 {
    font-size: 1.1em;
    margin-bottom: 0.75em; }
  .credits__section > p {
    font-size: 1.1em; }
  .credits__section a {
    transition: color 500ms;
    font-family: "Ovo", serif;
    text-decoration: underline;
    color: #020203; }
    .credits__section a:hover {
      color: #0086b3; }

.credits__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .credits__social a {
    margin: 0 0.75em 0.75em;
    border-radius: 3px; }
  .credits__social svg {
    display: block;
    width: 2em; }

.credits__button-container {
  z-index: 8000;
  position: fixed;
  top: 3vh;
  right: 2vw; }

/*# sourceMappingURL=main.css.map*/