/* style_chamber.css */

#frame10{
    visibility: visible;
}

#frame11{
    visibility: hidden;
}

#frame12{
    visibility: hidden;
}

#frame13{
    visibility: hidden;
}

#frame14{
    visibility: hidden;
}

#frame15{
    visibility: hidden;
}

#frame16{
    visibility: hidden;
}

#frame18{
    visibility: hidden;
}

#chamberbg{
    background-image: url('../assets/img/chamber/chamberbg.png');
    background-size: 100vw;
    filter: brightness(0.9)
}

#desk{
    position: absolute;
    width: 25vw;
    left: 18vw;
    top: 10vw;
    filter: brightness(0.8);
}

#glow{
    position: absolute;
    width: 20vw;
    height: 20vw;
    left: 26vw;
    top: 4vw;
    background-color: #40eb1a4e;
    box-shadow: 0px 0px 150px 10px #40eb1a9c;
    border-radius: 180%;
    animation: pulseglow 5s infinite;
}

@keyframes pulseglow{
    0%{width: 20vw;
        height: 20vw;}
    50%{width: 19.8vw;
        height: 19.8vw;}
    100%{width: 20vw;
        height: 20vw;}
}

@keyframes pulseglowlight{
    0%{opacity: 1;}
    50%{opacity: 0.8;}
    100%{opacity: 1;}
}

#loading{
    font-family: 'computerpixel';
    color: #40EB1A;
    font-size: 1.5vw;;
    position: absolute;
    left: 32vw;
    top: 11.2vw;
}


/* adapted from https://css-loaders.com/progress/ battery one */
.loader {
  width: 100%;
  height: 1.6vw;
  border: 2px dotted currentColor;
  box-sizing: border-box;
  padding: 3px;
  color: #40EB1A;
  background: 
    repeating-linear-gradient(90deg,currentColor 0 0.7vw,#0000 0 0.9vw) no-repeat content-box content-box;
  position: relative;
  animation: l5 0.9s infinite steps(7);
}

@keyframes l5 {
    0% {background-size:87%}
    1% {background-size:87%}
    99% {background-size:100%}
    100% {background-size:100%}
}

#mousef10{
    position: absolute;
    width: 19vw;
    left: 30vw;
    top: 3vw;
    rotate: 7deg;
    animation: mousef10anim 1s infinite;
}

@keyframes mousef10anim{
    0%{
        transform: rotate(1deg);
        transform-origin: bottom;
    }
    50%{
        transform: rotate(0deg);
        transform-origin: bottom;
    }
    100%{
        transform: rotate(1deg);
        transform-origin: bottom;
    }
}

#dia10{
    position: absolute;
    left: 60vw;
    top: 10vw;
    width: 20vw;
}

#mousef11{
    position: absolute;
    width: 22vw;
    left: 32vw;
    top: 1.5vw;
    rotate: 7deg;
}

#dia11{
    position: absolute;
    left: 65vw;
    top: 13vw;
    width: 17vw;
}

#mousef11gif{
    position: absolute;
    width: 23vw;
    left: 32vw;
    top: 1.5vw;
}

#mousef12{
    visibility: hidden;
    position: absolute;
    width: 23vw;
    left: 32vw;
    top: 1.5vw;
}

#dia12{
    position: absolute;
    left: 61vw;
    top: 15vw;
    width: 16vw;
}

#mousef13{
    position: absolute;
    width: 21vw;
    left: 36vw;
    top: 1.5vw;
}

#dia13{
    position: absolute;
    left: 60vw;
    top: 18vw;
    width: 24vw;
}

#mousef14{
    position: absolute;
    width: 34vw;
    left: 38vw;
    top: 3vw;
}

#dia14{
    position: absolute;
    left: 60vw;
    top: 27vw;
    width: 20vw;
}

#mousef15{
    position: absolute;
    width: 37vw;
    left: 36vw;
    top: -3vw;
}

#dia15{
    position: absolute;
    left: 28vw;
    top: 33vw;
    width: 21vw;
}

#mousef16{
    position: absolute;
    width: 64vw;
    left: 32vw;
    top: 1vw;
}

#dia16{
    position: absolute;
    left: 12vw;
    top: 36vw;
    width: 38vw;
}

#reply5{
    width:18vw;
}
#reply6{
    width:19vw;
}

#mousef17{
    position: absolute;
    width: 65vw;
    left: 32vw;
    top: 1vw;
}

#dia17{
    position: absolute;
    left: 13vw;
    top: 40vw;
    width: 32vw;
}

#mousef18{
    position: absolute;
    width: 75vw;
    left: 31vw;
    top: 0vw;
}

#dia18{
    position: absolute;
    left: 12vw;
    top: 40vw;
    width: 25vw;
}

#fadetoblack{
    pointer-events: none;
    z-index:99;
    background-color: black;
    animation: fadeanim 5s linear 1;
    animation-play-state: paused;
}

@keyframes fadeanim{
    0%{opacity: 0;}
    100%{opacity: 1;}
}