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=doggo);  }
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.11) rotate(-2.8deg)  translatex(-0.2%) translatey(-2.4%); }  
                         28%  { opacity:1; } 
                         63%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.11) rotate( 2.8deg) translatex( 2.6%) translatey( 1.1%); }  }
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(-1.3deg)  translatex( 0.9%) translatey( 3.0%); }  
                         20%  { opacity:1; } 
                         59%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.19) rotate(-1.7deg) translatex(-3.9%) translatey( 3.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.09) rotate(-1.6deg)  translatex( 0.5%) translatey( 5.5%); }  
                         35%  { opacity:1; } 
                         68%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.04) rotate( 2.2deg) translatex(-4.0%) translatey(-5.4%); }  }
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.18) rotate(-0.2deg)  translatex( 1.7%) translatey(-5.7%); }  
                         38%  { opacity:1; } 
                         74%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.03) rotate( 0.9deg) translatex(-3.4%) translatey( 2.2%); }  }
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.17) rotate(-1.2deg)  translatex(-2.0%) translatey(-0.4%); }  
                         30%  { opacity:1; } 
                         61%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.15) rotate( 1.5deg) translatex(-0.4%) translatey(-3.2%); }  }
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.04) rotate( 2.4deg)  translatex( 3.4%) translatey(-2.7%); }  
                         31%  { opacity:1; } 
                         58%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.14) rotate(-2.8deg) translatex( 2.3%) translatey(-1.9%); }  }
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.02) rotate( 2.5deg)  translatex( 0.9%) translatey(-5.9%); }  
                         23%  { opacity:1; } 
                         68%  { opacity:1; } 
                         100% { opacity:0.7; transform:scale( 1.09) rotate(-0.0deg) translatex(-1.9%) translatey(-4.3%); }  }
img.pf6                 { animation-name:panfade6; animation-timing-function:ease-in-out; }
}
          

#doggo, #notadoggo, #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;  }
#doggo, #notadoggo        {  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; }
#doggo                    {  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*/
#notadoggo                {  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%;
}