body, html                {  border:0;  margin:0;  padding:0;  width:100%;  height:100%;  overflow:hidden;  background-color:black; display:flex; touch-action:none;/* touch-action avoids page dragging*/  } 
body                      {  background-position:center; background-repeat:no-repeat; background-image:url(bg?what=otter);  }
body, div { user-select: none; }

img                       {  transform:translateZ(0);
                             pointer-events:none;  position:absolute;  top:0;  margin:auto;
                             width:100%; height:100%;  object-fit:cover; object-position:center;
                             animation-duration: 18.0s;  animation-iteration-count:1;  animation-fill-mode:both;  }


@keyframes panfade0       {  0%   { opacity:0; }  5%  { opacity:1; }   95%  { opacity:1; }    100% { opacity:0.7; }  }       
img.pf0                   { animation-name:panfade0; animation-timing-function:steps(5,jump-both); }
@media only screen and (min-device-width: 800px) {
@keyframes panfade0     {  0%   { opacity:0; transform:scale( 1.01) rotate( 1.9deg)  translatex(-0.9%) translatey(-1.5%); }  
                         31%  { opacity:1; } 
                         59%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.13) rotate( 2.3deg) translatex(-3.0%) translatey(-0.2%); }  }
img.pf0                 { animation-name:panfade0; animation-timing-function:ease-in-out; }
}
          
@keyframes panfade1       {  0%   { opacity:0; }  5%  { opacity:1; }   95%  { opacity:1; }    100% { opacity:0.7; }  }       
img.pf1                   { animation-name:panfade1; animation-timing-function:steps(5,jump-both); }
@media only screen and (min-device-width: 800px) {
@keyframes panfade1     {  0%   { opacity:0; transform:scale( 1.11) rotate(-2.0deg)  translatex(-0.1%) translatey(-1.5%); }  
                         28%  { opacity:1; } 
                         68%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.12) rotate( 1.5deg) translatex( 1.8%) translatey( 0.9%); }  }
img.pf1                 { animation-name:panfade1; animation-timing-function:ease-in-out; }
}
          
@keyframes panfade2       {  0%   { opacity:0; }  5%  { opacity:1; }   95%  { opacity:1; }    100% { opacity:0.7; }  }       
img.pf2                   { animation-name:panfade2; animation-timing-function:steps(5,jump-both); }
@media only screen and (min-device-width: 800px) {
@keyframes panfade2     {  0%   { opacity:0; transform:scale( 1.02) rotate(-2.8deg)  translatex(-1.2%) translatey( 5.0%); }  
                         36%  { opacity:1; } 
                         71%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.08) rotate(-1.1deg) translatex(-3.9%) translatey(-4.9%); }  }
img.pf2                 { animation-name:panfade2; animation-timing-function:ease-in-out; }
}
          
@keyframes panfade3       {  0%   { opacity:0; }  5%  { opacity:1; }   95%  { opacity:1; }    100% { opacity:0.7; }  }       
img.pf3                   { animation-name:panfade3; animation-timing-function:steps(5,jump-both); }
@media only screen and (min-device-width: 800px) {
@keyframes panfade3     {  0%   { opacity:0; transform:scale( 1.02) rotate(-1.1deg)  translatex(-2.2%) translatey( 1.8%); }  
                         26%  { opacity:1; } 
                         63%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.13) rotate(-0.6deg) translatex( 1.0%) translatey( 5.0%); }  }
img.pf3                 { animation-name:panfade3; animation-timing-function:ease-in-out; }
}
          
@keyframes panfade4       {  0%   { opacity:0; }  5%  { opacity:1; }   95%  { opacity:1; }    100% { opacity:0.7; }  }       
img.pf4                   { animation-name:panfade4; animation-timing-function:steps(5,jump-both); }
@media only screen and (min-device-width: 800px) {
@keyframes panfade4     {  0%   { opacity:0; transform:scale( 1.14) rotate( 2.7deg)  translatex( 0.3%) translatey(-1.6%); }  
                         25%  { opacity:1; } 
                         68%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.16) rotate( 2.3deg) translatex( 0.4%) translatey( 1.6%); }  }
img.pf4                 { animation-name:panfade4; animation-timing-function:ease-in-out; }
}
          
@keyframes panfade5       {  0%   { opacity:0; }  5%  { opacity:1; }   95%  { opacity:1; }    100% { opacity:0.7; }  }       
img.pf5                   { animation-name:panfade5; animation-timing-function:steps(5,jump-both); }
@media only screen and (min-device-width: 800px) {
@keyframes panfade5     {  0%   { opacity:0; transform:scale( 1.13) rotate(-1.3deg)  translatex( 0.4%) translatey(-3.2%); }  
                         38%  { opacity:1; } 
                         74%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.07) rotate(-1.7deg) translatex(-1.0%) translatey(-0.5%); }  }
img.pf5                 { animation-name:panfade5; animation-timing-function:ease-in-out; }
}
          
@keyframes panfade6       {  0%   { opacity:0; }  5%  { opacity:1; }   95%  { opacity:1; }    100% { opacity:0.7; }  }       
img.pf6                   { animation-name:panfade6; animation-timing-function:steps(5,jump-both); }
@media only screen and (min-device-width: 800px) {
@keyframes panfade6     {  0%   { opacity:0; transform:scale( 1.08) rotate( 2.3deg)  translatex( 1.6%) translatey(-5.5%); }  
                         25%  { opacity:1; } 
                         73%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.09) rotate(-0.3deg) translatex(-3.6%) translatey(-5.2%); }  }
img.pf6                 { animation-name:panfade6; animation-timing-function:ease-in-out; }
}
          

#otter, #notaotter, #skip {  align-self: center; display:flex;  align-items:center;  justify-content:center;  font-size:160%;  color:white;  font-family:sans-serif;  font-variant:small-caps; text-shadow: 0px 0px 60px #000,0px 0px #666,0px 0px 2px #555,0px 0px 5px #444,0px 0px 10px #333,0px 0px 55px #fff, 0px 0px 155px #415;  }
#otter, #notaotter        {  width:2.2em;  height:50%;  z-index:1000; margin:auto 0%;  text-orientation:upright; writing-mode:vertical-lr; border: .15em outset rgba(0,0,0,0.3); border-radius:1.05em; opacity:0.65;  outline:1px solid #222; }
#otter                    {  position:absolute;  right:0;    background:radial-gradient(ellipse at 100% 50%, rgba(0,100,80,0.6), transparent 75%);    } /* not sure it's entirely valid to mix flexbox and absolute like that*/
#notaotter                {  position:absolute;   left:0;    background:radial-gradient(ellipse at   0% 50%, rgba(100,0,70,0.6), transparent 75%);    }

#skip                     {  position:absolute; font-size:100%;  bottom:0; height:1em; width:100%; z-index:999; /* background:radial-gradient(ellipse at 50% 100%, rgba(200,200,0,0.4), transparent 70%); */ }

a       { text-decoration: none;      }
a:hover { text-decoration: underline; }

#idiv                     {
  font-variant:small-caps;
  position: fixed;
  display: grid;
  transform: translateY(-200%);
  transition: transform 0.2s;
  top:    0;
  left:   0;
  right:  0;
  bottom: 0;
  z-index: 99;
  font-family: 'Trebuchet MS', sans-serif;
  font-size:5vh;
  background: black;
  color: white;
  padding: 0.6em 15vw;
  opacity:0.8;
}
#idiv div {
  vertical-align:middle;
}
#idiv.show               {  
  transform: translateY(0);
}

#i:hover  + #idiv         {  display:block;       }
#i:active + #idiv         {  display:block;       }
.fbc                      {  display:flex; width:80%; border-radius:10px; opacity:0.3; font-size:77% }
.fbyes, .fbno, .fbdunno   {  padding:2px 1em;     }
.fbyes                    {  background:#006440;  }
.fbno                     {  background:#640040;  }
.fbdunno                  {  text-align:center;   }

.hamburger {
  cursor:pointer;
  color:white;
  z-index:200;
  position:fixed;right:0; top:0; 
  font-size: 3em !important;
  margin:.2em .4em;
  width:1.1em; height:0.9em;
}
.hamburger img {
  width:100%; height:100%;
}