html { font-family: Georgia, serif; }

#intercepted h2 {
  text-align: center;
  color: white;
  font-size: clamp(15px, 7vh, 40px);
}

p, a, li {
  font-size:clamp(13px, 2.23vw, 16px);
  line-height:clamp(17px, 3.12vw, 27px);
}

#get {
  animation-name: alldone;
  animation-delay:5.2s;
  animation-duration:.5s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
position:absolute;
}

#bug {
  width: 30vw;
  height: 20vw;
  max-width:223px;
  max-height:149px;
  position:relative;
  animation-name: flying;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 10s;
  background-size:contain;
  background-repeat:no-repeat;
  z-index:1;
  cursor:pointer;
}

#bug, #collectable {
  left:0;
  top:0;
  position:relative;
}

#collectable {
  z-index:3;
  display:none;
   animation-name: scatter;
   animation-duration: 0.7s;
   animation-timing-function: cubic-bezier( 0.24, 0.78, 0.09, 0.98 );
   animation-iteration-count: 1;
   animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: paused;
  width:6.5vw;
  height:6.5vw;
  max-width:90px;
  max-height:90px;
}

#collectable:hover {
  filter: drop-shadow(0.1vw 0.1vw 0.23vw lightgray);
}

#collectable, #specimen {
  background-size:contain;
  background-repeat: no-repeat;
  background-position-x: center;
}

#specimen {
  position:relative;
  width: 75vw;
  height: 75vw;
  max-width: 278px;
  max-height: 278px;
  margin: 0 auto;
  top: -50vh;
  animation-duration:5s;
  animation-fill-mode: forwards;
  filter: drop-shadow(3px 3px 2px rgba(57, 0, 23, 0.5));
  filter: drop-shadow(0.1vw 0.1vw 0.23vw black);
}

#drawer {
  background-image: url('../images/drawerclosed.png');
  max-width:278px;
  max-height:278px;
  position:fixed;
  background-size:contain;
  background-repeat:no-repeat;
  background-position-y:bottom;
  background-position-x: center;
  left:0;
  bottom:0;
  z-index:3;
  display:block;
}

#drawer, #full { 
  width:37vw;
  height:37vw;
  animation-duration:4s;
  animation-fill-mode: forwards;
}

#full {
  position:fixed;
  bottom:0;
  left:0;
  z-index:3;
  display:none;
  justify-content: center;
  opacity:100%;
}

#drawer2 {
  background-image: url('../images/draweropen.png');
  height:100%;
  background-size:contain;
  background-repeat:no-repeat;
  background-position-y:bottom;
  background-position-x: center;
  animation-duration:4s;
  animation-fill-mode: forwards;
  width:80vw;
  max-width:600px;
}

#intercepted, #interceptedbg {
  display:none;
  opacity:0%;
  transition:1s;
  position:fixed;
  top:0;
  left:0;
  animation-name: fade;
  animation-duration:2s;
  animation-fill-mode: forwards;
}

#intercepted {
  z-index:5;
  margin:0 auto;
  height:65vh;
  width:100vw;
}

#interceptedbg {
  background-color:black;
  width:100vw;
  height:100vh;
  z-index:2;
}

#intercepted details {
  border: 0px solid #aaa;
  padding: 0.5em 0.5em 0;
  overflow:clip;
}
#intercepted summary {
  font-weight: bold;
  color: gray;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
  text-align: center;
  position:sticky;
  top:-8px;
  background-color:black;
}
#intercepted details[open] {
  padding: 0.5em;
  max-height: 30vh;
  overflow-y:auto;
  background-color:#0000008a;
  animation-fill-mode: forwards;
  border: 1px solid black;
  color: white;
  border-radius: clamp(1px, 1vw, 20px);
}
#intercepted details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
  background-color:black;
  z-index: 9999;
}
#intercepted summary:hover { 
  color:crimson;
  border-color:crimson;
  transition:1s; 
}

#intercepted video, #intercepted summary, #intercepted details {
  max-width: 600px;
  margin:0 auto;
  animation-delay:3s;
  animation-name:fade;
  animation-duration:2s;
  animation-fill-mode: backwards;
}

#intercepted video { 
  height: unset;
  width: 36vw;
  display:block;
  border-radius:1vw;
  padding: unset;
}

#tube {
  width: 98.5vw;
  height: 100vh;
  display:none;
  z-index: 6;
  position: fixed;
  top: 0;
}

@keyframes scatter {
  from {
    top:0;
  }
  to {
    top: clamp(1px, 15vw, 100px);
  }
}

@keyframes fade {
  from {
    opacity:0%;
  }
  to {
    opacity:100%;
  }
}

@keyframes containerzoomin {
  0% {
  width:37vw;
  height:37vw;
  }
  100% {  
  width:100vw;
  height:35vh;
  max-width:unset;
  max-height:unset;
  margin:0 auto;
}
}
@keyframes drawerzoomin {
  from {  
  width: 37vw;
  }
  to {
    width:80vw;
  }
}

@keyframes specimenget {
  0%   { 
  top: -50vh;
  opacity:100%;
}
  50%   { 
  top: 7vw;
}
65% {
  top: 6.7vw;
}
  90%   { 
  top: 6.7vw;
}
  99.9%   { 
  top: 110vh; 
  opacity:100%;
  display:inherit;
}
  100%   { 
  opacity:0; 
  display:none; }
}

@keyframes shut {
  0%   { 
  background-image: url('../images/draweropen.png');
}
64% {
  background-image: url('../images/draweropen.png');
}
  65%   { 
  background-image: url('../images/drawerclosed.png');
}  
  100%   { 
  background-image: url('../images/drawerclosed.png');
}

}
@keyframes alldone {
  0%   { 
  opacity:100%;
  display:block;
}
  99.9%   { 
  display:block;
  opacity:0%; 
}
  100%   { 
  display:none; 
  opacity:0%; 
  width:1px;
  height:1px;
  overflow:hidden;
  z-index:0;
}
}

@media (min-width: 752px) {
@keyframes containerzoomin {
  0% {
  width:278px;
  height:278px;
  }
  100% {  
  width:100vw;
  height:35vh;
  max-width:unset;
  max-height:unset;
  margin:0 auto;
}
}
@keyframes drawerzoomin {
  from {  
  width: 37vw;
  }
  to {
  width:80vw;
  max-width:600px;
  }
}
}


@media (max-height: 700px) {
#intercepted video { 
width:unset;
   height: 35vh;
}
}
@media (max-width: 1100px) {
#intercepted video { 
width:unset;
   height: 35vh;
}
}