/*
CSS for Codex Lucida Scenes
*/

/* setup */

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

html {  
  flex-direction: column;
}

body {
  flex-direction: row;
  overflow: hidden;
  background-color: black;
  touch-action: none;
  cursor: move;
}

* {
  box-sizing: border-box;
  -webkit-touch-callout: none;
}

/* typography */

@font-face {
  /* font source: https://www.jetbrains.com/lp/mono/ */
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: fallback;
  src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
}

p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6em;
  white-space: nowrap;
  position: fixed;
  color: rgb(255, 255, 255);
  /* overlay or screen */
  mix-blend-mode: screen;
}

#bg-coordinates {
  transform-origin: left center;
  transform: rotate(-90deg);
  left: 10%;
  bottom: 5%;
}

#fg-coordinates {
  transform-origin: right center;
  transform: rotate(90deg) translate(100%);
  right: 10%;
  top: 5%;
}

/* scene and layers with perspective */

#scene {
  position: fixed;
  width: 100%;
  height: 100%;
  margin: auto;
  display: block;
  overflow: hidden;
  /* prevent selection of page content, which interferes with interaction */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#layers {
  width: inherit;
  height: inherit;
  perspective: 720px;
  perspective-origin: 50% 50%;
  transition: perspective-origin 480ms ease-out 0s;
  /* prevent pointer events on page content, which interferes with interaction */
  pointer-events: none;
}

img {
  position: absolute;
  width: inherit;
  height: inherit;
  object-fit: cover;
}

.background {
  transform: scale(1.12, 1.12) translateZ(-40px);
  opacity: 0.5;
}

.foreground {
  transform: translateZ(40px);
  mix-blend-mode: lighten;
}

/* responsive text */

@media (min-height: 640px) {
  p {font-size: 0.8em;}
}

@media (min-height: 960px) {
  p {font-size: 1em;}
}

@media (min-height: 1280px) {
  p {font-size: 1.2em;}
}

@media (min-height: 1600px) {
  p {font-size: 1.4em;}
}

@media (min-height: 1920px) {
  p {font-size: 1.6em;}
}

@media (min-height: 2240px) {
  p {font-size: 1.8em;}
}

@media (min-height: 2560px) {
  p {font-size: 2.0em;}
}

@media (min-height: 2880px) {
  p {font-size: 2.2em;}
}

@media (min-height: 3200px) {
  p {font-size: 2.4em;}
}