body{
  margin:0;
  font-family:'andale mono',monospace;
  font-size:2.6vmax;
  background:#535455;
  color:Lavender;
  text-align:center;
}

a{
  color:rgb(139,139,249);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

.menu{
  cursor:pointer;
  transition:color .15s ease;
}

.menu:hover{
  color:rgb(139,139,249);
}

.menu.active{
  color:rgb(139,139,249);
  text-decoration:underline;
}

.letter{
  display:inline-block;
  will-change:transform;
  pointer-events:none;
}

#bg{
  position:fixed;
  inset:0;
  z-index:30;
  pointer-events:none;
}

.event{
  margin:2.2rem 0;
}

.event .text{
  display:block;
}

/* -------------------------------- */
/* COMMON PLAYER */
/* -------------------------------- */

#video-shell,
#photo-shell{
  width:100vw;
  display:flex;
  justify-content:center;
  position:relative;
}

#video-root{
  width:100%;
  display:flex;
  justify-content:center;
  position:relative;
}

#video-player,
#photo-player{
  width:min(46vw,520px);
  position:relative;
  z-index:20;
  overflow:hidden;
}

#video,
#photo{
  width:100%;
  display:block;
  background:rgb(139,139,249);
  object-fit:cover;
  /* vertical-align:top; */


}

/* -------------------------------- */
/* CLICK ZONES */
/* -------------------------------- */

.click-zone{
  position:absolute;
  top:8px;
  bottom:56px;
  z-index:50;
  cursor:pointer;
  touch-action:pan-y;
}

.left-zone{
  left:0;
  width:calc((100vw - min(46vw,520px))/2);
}

.right-zone{
  right:0;
  width:calc((100vw - min(46vw,520px))/2);
}

/* -------------------------------- */
/* ARROWS */
/* -------------------------------- */

.click-zone::after{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:6rem;
  line-height:1;
  color:white;
  opacity:.9;
  transition:opacity .2s ease;
  pointer-events:none;
}

.left-zone::after{
  content:"←";
  right:18px;
}

.right-zone::after{
  content:"→";
  left:18px;
}

.click-zone:hover::after{
  opacity:1;
  color:rgb(139,139,249);
}

/* -------------------------------- */
/* LOADER */
/* -------------------------------- */

#loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}

#loader.visible{
  opacity:1;
}

#loader::after{
  content:"◌";
  font-size:2rem;
  color:white;
  opacity:.5;
  animation:spin 1.6s linear infinite;
}

@keyframes spin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

/* -------------------------------- */
/* PROGRESS */
/* -------------------------------- */

#progress-container{
  width:100%;
  height:8px;
  position:relative;
  margin-top:10px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  cursor:pointer;
}

#progress-left,
#progress-right{
  position:absolute;
  top:0;
  height:100%;
  width:0%;
  background:rgb(139,139,249);
}

#progress-left{
  right:50%;
}

#progress-right{
  left:50%;
}

/* -------------------------------- */
/* TITLES */
/* -------------------------------- */

#video-title{
  margin-top:10px;
  font-size:1rem;
  opacity:.7;
  letter-spacing:.08em;
}

#photo-title{
  display:block;
  width:100%;
  text-align:center;
  margin-top:10px;
  font-size:1rem;
  opacity:.7;
  letter-spacing:.08em;
}

/* -------------------------------- */
/* MUTE */
/* -------------------------------- */

#mute-btn{
  position:absolute;
  top:12px;
  right:12px;
  width:28px;
  height:28px;
  border:none;
  background:none;
  cursor:pointer;
  z-index:60;
  opacity:.85;
}

#mute-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid white;
  border-radius:50%;
}

#mute-btn::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:50%;
  height:1px;
  background:white;
  transform:
    translateY(-50%)
    rotate(-180deg);
  transition:transform .8s ease;
}

#mute-btn.active::after{
  height:1px;
  background:rgb(139,139,249);
  transform:
    translateY(-50%)
    rotate(90deg);
}

/* -------------------------------- */
/* MOBILE */
/* -------------------------------- */

@media (max-width:888px){

  #video-player,
  #photo-player{
    width:66vw;
  }

  .left-zone{
    width:calc((100vw - 66vw)/2);
  }

  .right-zone{
    width:calc((100vw - 66vw)/2);
  }

  .click-zone::after{
    font-size:4rem;
  }

}