html, body {
  --art-width: min(100vw, 186.52dvh);
  --art-left: calc((100vw - var(--art-width)) / 2);
  --wordmark-left: calc(var(--art-left) + var(--art-width) * 0.02);
  margin: 0;
  height: 100%;
  background-color: #575757;
}
/* The wordmark's size, position and timing. Change the values here; nothing needs rebuilding. */

.loki-wordmark {
  /* Where the background art is drawn: it fills the window one way and is centred the other. Its picture is 2048 by 1098. */
  
  --art-height: min(100dvh, 53.61vw);
  
  --art-top: calc((100dvh - var(--art-height)) / 2);

  /* How wide it is drawn, as a share of the art; its height follows. */
  --wordmark-width: max(110px, calc(var(--art-width) * 0.105));
  /* Its left edge, and the line its bottom edge sits on. Both follow the art, so it stays in the
     empty patch at the art's top left, above the first of the rays, at any window shape. */
  
  --wordmark-bottom: calc(var(--art-top) + var(--art-height) * 0.085);
  /* How long each word holds, and how long each morph takes. */
  --wordmark-hold: 1.2s;
  --wordmark-morph: 1.1s;

  color: #888888;
  /* The light catching the lower edge of the cut, as it does on the art's lines. Remove for a flat colour. */
  filter: drop-shadow(1px 1px 0 rgb(255 255 255 / 0.4));

  position: fixed;
  left: var(--wordmark-left);
  /* 2.481 is the wordmark's width to its height. */
  top: max(4px, calc(var(--wordmark-bottom) - var(--wordmark-width) / 2.481));
  width: var(--wordmark-width);
  margin: 13px 0;
  font: inherit;
}

.loki-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-image: url("/assets/loki-bg1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: #888888;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
} 
#wrapper {
  position: fixed;
  top: 0;
  left: var(--art-left);
  width: var(--art-width);
  height: 100vh;
  display: flex;
}
#content {
  position: relative;
  padding: 21px;
  background-color: rgba(5, 5, 5, 0.2);
  color: #cccccc;
  top:59%;
  left:22%;
  border:1px solid #575757;
  display: flex;
  width: 640px;
  height: 120px;
  border-radius: 21px;
  backdrop-filter: blur(3px);
  filter: drop-shadow(1px 1px 0 rgb(255 255 255 / 0.4));
}
#content p {
  margin: 0;
  padding: 0;
  font-size: 1.7rem;
}
footer {
  position: fixed;
  left: 70px;
  bottom: 0;
  width: 100%;
  text-align: center;
}