@font-face{
    font-family: Hashtag;
    src: url('./hashtag.ttf');
}

:root{
  --bg: #fff;
  --image-left-offset: 19vw;
  --image-max-width: 9vw;
  --ov-noise-alpha: 0.24;
  --caption-color: #636363;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);overflow:hidden}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, cursive;color:#fff}

#noise-ov{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  display:block;
  z-index:4;
  mix-blend-mode: normal;
  opacity: var(--ov-noise-alpha);
  background: transparent;
}

#sceneImage { z-index:1; position:fixed; top:0; left:var(--image-left-offset); }
#sceneImage{
  min-width: var(--image-max-width);
  max-width: var(--image-max-width);
  max-height: 96vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:auto;
  transition: filter 220ms ease, opacity 320ms ease;
}

#NowEveryoneCanBeHappy {
    width: 100%;
    height:100%;
    position: absolute;
    inset: 0;
    z-index: 10;
    opacity: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#NowEveryoneCanBeHappy h2 {
    font-size: clamp(1.6rem, 5vw, 2.6em);
    font-family: Hashtag, cursive;
    font-weight: lighter;
    color: var(--caption-color);
    text-align: center;
    padding: 0 1rem;
	transform: translate(17vw,1vh);
}
#NowEveryoneCanBeHappy.show {
  opacity: 1;
  transition: opacity 800ms ease;
}

@media (prefers-reduced-motion: reduce) {
  #sceneImage { transition: none !important; will-change: auto !important; }
}
@media (max-width:480px){
  :root {
    --image-left-offset: 4.5vw;
    --image-max-width: 10vw;
  }
}