html {
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(135deg, var(--d) 0%, var(--d) 3%, var(--l) 3%, var(--l) 6%, var(--d) 6%, var(--d) 8%, var(--l) 8%, var(--l) 9%, var(--d) 9%, var(--d) 13%, var(--l) 13%, var(--l) 15%, var(--d) 15%, var(--d) 18%, var(--l) 18%, var(--l) 20%, var(--d) 20%, var(--d) 23%, var(--l) 23%, var(--l) 24%, var(--d) 24%, var(--d) 25%, var(--l) 25%);
  background-size: 100vmin 100vmin;
  --d: #222;
  --l: #333;
  --blue: #333f95;
  --yellow: #ffc307;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  font-size: 1.6rem;
  font-family: Exo2, sans-serif;
}

#feature {
  --url: "";
}

#feature, #feature::before, #feature::after {
  position: relative;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

#feature::before, #feature::after {
  position: absolute;
  display: block;
  content: "";

  background: var(--url) no-repeat;
  background-size: contain;
  background-position: center;
}

#feature::before {
  filter: contrast(0) brightness(10) blur(2vmin);
  opacity: .3;
  animation-name: shadow_reveal;
  animation-duration: 8s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

#feature::after {
  /*filter: contrast(0) brightness(0);*/
  animation-name: reveal;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}


@keyframes reveal {
  0% {filter: brightness(0);}
  75% {filter: brightness(0);}
  100% {filter: brightness(1);}
}

@keyframes shadow_reveal {
  0% {filter: contrast(0) brightness(10) blur(2vmin); opacity: .5;}
  2% {filter: contrast(0) brightness(10) blur(3vmin); opacity: .7;}
  38% {filter: contrast(0) brightness(10) blur(5vmin); opacity: 1;}
  48% {filter: contrast(0) brightness(10) blur(9vmin); opacity: .8;}
  60% {filter: contrast(0) brightness(10) blur(8vmin); opacity: .3;}
  100% {filter: contrast(0) brightness(10) blur(2vmin); opacity: .2;}
}


#page {
  display: flow-root;
  max-width: 55rem;
  min-height: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  background: rgba(70,70,70,.8);
  color: #fff;
  padding-bottom: 4.5rem;
}

header {
  position: relative;
}

.logo {
  position: relative;
  width: 100%;
  /* h/w ratio: 0.2185  */
  padding-bottom: 21.85%;
  margin-bottom: -4%;
}

.logo::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;

  background: url("/img/logo.png") no-repeat;
  background-size: contain;
  background-position: center;
}

.logo .edition {
  position: absolute;
  top: 80%;
  bottom: 8%;
  left: 16%;
  right: 19%;
}
.logo .edition, .logo .edition::before, .logo .edition::after, .editions .edition, .editions .edition::before, .editions .edition::after {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
.logo .edition::before, .logo .edition::after, .editions .edition::before, .editions .edition::after {
  width: 100%;
  height: 100%;
}

.edition::before, .edition::after {
  position: absolute;
  content: "";
  background: var(--edition-url);
}
.edition::before {
  filter: brightness(0) blur(.5rem);
}
.edition::after {
  opacity: .8;
}

.editions .edition {
  position: relative;
  margin-left: 16%;
  margin-right: 19%;
  margin-bottom: 1.4%;
  padding-bottom: 2.6%;
}

.tagline {
  font-size: 1rem;
  text-align: center;
  margin: 0;
  margin-bottom: .5rem;
}

.congrats {
  text-align: center;
}
.congrats.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0, 0.8);
  z-index: 9;
  padding: 9vh 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.congrats.fullscreen p {
  font-size: 10vmin;
}
.congrats span {
  color: #f88;
  font-size: 1.5em;
  font-weight: bold;
}
.congrats.fullscreen button {
  font-size: 1.5em;
  padding: .1em .5em;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 2.2rem;
  background: rgba(0,0,0,.75);
}
footer p {
  color: #999;
  font-size: .8rem;
  text-align: center;
}
footer a {
  color: #bbb;
  /*text-decoration: none;*/
}
footer a:hover {
  color: #ddd;
}
@media (min-width: 350px) {
  footer span {
    white-space: pre;
  }
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 1rem 0;
}
nav button {
  background: rgba(255,255,255,.2);
  padding: .5rem 1rem;
  border: 0;
  border-radius: .2rem;
  color: #ddd;
  font-size: 1rem;
  cursor: pointer;
}
nav button.hidden {
  visibility: hidden;
}
nav button:hover {
  background: rgba(255,255,255,.3);
  color: #fff;
}
nav .prev {
  padding-right: max(calc(40% - 5rem), 1rem);
}
nav .next {
  padding-left: max(calc(40% - 5rem), 1rem);
}
nav .prev::after {
  content: " ◀";
}
nav .next::before {
  content: "▶ ";
}

.overview {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.overview > div {
  width: 20%;
  min-width: 9rem;
  margin: 1.5%;
  cursor: pointer;
}

.overview > div p {
  margin: 0;
}

.overview .info {
  padding: 0 3%;
}
.info .id {
  color: #888;
  font-size: .5em;
}
.info .name {
  text-align: center;
}
.preview .info .name {
  color: #bbb;
}
.detail .info p {
  margin: 0;
}
.detail .info .name {
  font-size: 10vmin;
}

.detail .sprite {
  cursor: grab;
}
.overview .preview, .detail.preview .sprite {
  cursor: help;
}

.overview .box {
  padding: 3%;
  background: rgba(255,255,255,.1);
  border-radius: 0.4rem;
}
.overview .preview .box {
  background: none;
}
.overview > :hover .box {
  background: rgba(255,255,255,.15);
}
.overview > .preview:hover .box {
  background: rgba(255,255,255,.1);
}

.overview .sprite,
.detail .sprite {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

.sprite::before, .sprite::after {
  background: var(--url) no-repeat;
  background-size: contain;
  background-position: center;
  image-rendering: pixelated;
}

.sprite::before, .sprite::after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
}

.overview .preview .sprite::before,
.overview .new .sprite::before,
.detail .preview .sprite::before,
.detail.new .sprite::before {
  filter: contrast(0) brightness(10) blur(.5rem);
  opacity: .3;
}

.detail .preview .sprite::before {
  filter: contrast(0) brightness(10) blur(1rem);
}

.detail.new .sprite::before {
  animation-name: shadow_reveal;
  animation-duration: 8s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.detail.new .sprite::after {
  /*filter: contrast(0) brightness(0);*/
  animation-name: reveal;
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.detail .name {
  position: relative;
  font-family: PocketMonk, sans-serif;
  --text: "";
}
.detail .name::before, .detail .name::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: var(--text);
}
.detail .name::before {
  text-stroke: var(--yellow) 2vmin;
  -webkit-text-stroke: var(--yellow) 2vmin;
}
.detail .name::after {
  color: var(--blue);
  /*text-shadow: -2vmin 2vmin 1.4vmin #000, -2.2vmin 0 1.4vmin #000, 0 2.2vmin 1.4vmin #000;*/
}


@font-face {
  font-family: PocketMonk;
  src: url(/font/PocketMonk-15ze.ttf);
}

@font-face {
  font-family: Exo2;
  src: url(/font/Exo2-Regular.ttf);
}

@font-face {
  font-family: Exo2;
  src: url(/font/Exo2-Bold.ttf);
  font-weight: bold;
}