@import url(xanh-mono/stylesheet.css);
html,body {
  height: 100%;
}
body {
  background: #000;
  transition: background 3s;
  font-family: "Xanh mono";
  --inset: min(7vw, 50px);
  display: grid;
  place-content: center;
}
.title {
  opacity: 0;
}
.waiting .title {
  opacity: 1;
  cursor: pointer;
}

.end .title {
  opacity: 0;
}
video {
  position: absolute;
  inset: var(--inset);
  width: calc(100vw - calc(var(--inset) * 2));
  height: calc(100vh - calc(var(--inset) * 2));
  object-fit: cover;
  transition: opacity 3s;
  mix-blend-mode: screen;
  image-rendering: crisp-edges ;
}
#subtitles-for-bruce {
  text-indent: 1em;
  padding: var(--inset);
  position: absolute;
  font-size: max(8vw, 1rem);
  color: whitesmoke;
  pointer-events: none;
  font-style: italic;
  text-wrap: balance;
  line-height: .9;
}
.end #subtitles-for-bruce{
  opacity: 0;
}
.end {
  background: #0b0c35;
}
.end video { opacity: 0;}

.title {
  font-size: max(2vw, 1rem);
  max-width: 20em;
  color: whitesmoke;
  text-wrap: balance;
  transition: opacity 1s;
  position: relative;
  z-index: 100;
  pointer-events: none;
}
.waiting .title {
  pointer-events: all;
}
.end .title {
  pointer-events: none;
}
.title a {
  color: currentColor;
}

iframe {
  opacity: 0;
  pointer-events: none;
}

.end iframe {
  opacity: 1;
  pointer-events: all;
}

#sean {
  position: fixed;
  z-index: 3;
  right: 2em;
  bottom: 2em;
  height:194px;
  width:144px;
  background: url(../Sean-ts-stance.webp) no-repeat 40% 100%;
  opacity: 0;
  pointer-events: none;
  transition: 250ms 1s;
  transform: scale(.6);
  cursor: pointer;
}
#sean.visible {
  pointer-events: all;
  opacity: 1;
}
#sean.visible:hover {
  background: url(../Sean_MP_Jump.webp) no-repeat 50% 100%;
}