/*** 彡★ IZZY WAS HERE — MADE BY IZZY 彡★  ***/

@import url('https://dopestar.neocities.org/css/constants.css');

/* ----------------- page ----------------- */

body {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqCDunFRpnS8XRWBWk6Ug2PZZvJb610hLNG8KEIxyexcimUZFsMH8jNu0hkpwIwKRBJ4y_1u0uLbxbG1-zXLF2A6tYtIEH1SJ8G2YfdGoWq08-fz2IU_s4lcJLVrwA_5ECe0k4qkDb5g/s1600/orange_striped_background_pattern.jpg);
  animation: backslide 2s infinite steps(15);
  font-family: var(--cursive, "Comic Sans MS", "Comic Sans", cursive);
}

header {
  margin: 20px auto;
  width: 65%;
  background: url(https://64.media.tumblr.com/461c090833700c2ea6ea37e627a8ee25/tumblr_n7fpmkTgCf1qfewmfo2_400.pnj);
  border: 5px #aa4800 dashed;
  font-family: var(--quotenote);
  text-align: center;
  padding: 20px 0;
  font-size: 50px;
  color: #eaedec;
  -webkit-text-stroke: 1px;
  text-shadow: 5px 5px #000;
  box-shadow: 9px 12px 15px lightgoldenrodyellow;
  animation: headslide 70s infinite linear;
}

.corner {
  height: 198px;
  width: auto;
  position: absolute;
  image-rendering: pixelated;
  top: 0;
}

.tail {
  position: absolute;
  bottom: -8px;
  animation: tailhide 3s infinite cubic-bezier(0, 0.5, 0.5, 1.0);
}

@keyframes backslide {
  from { background-position: 0px 0px; }
  to { background-position: 256px 256px; }
}

@keyframes headslide {
  from { background-position: 0px 0px; }
  to { background-position: 700px 700px; }
}

@keyframes tailhide {
  50% {
    transform: translateY(100px);  
  }
}

/* ----------------- imgs ----------------- */
#cardboard {
  height: 32vh;
  width: auto;
  bottom: 10%;
  left: 37%;
  position: absolute;
}

#fox-other {
  height: 45vh;
  width: auto;
  filter: brightness(1.2);
  position: absolute;
  left: 22%;
  bottom: 13%;
  animation: foxes1 3s steps(2) infinite;
  z-index: 1;
}

#fox-mr {
  height: 55vh;
  width: auto;
  position: absolute;
  right: 48%;
  bottom: 15%;
  animation: foxes2 1.5s steps(3) infinite;
  z-index: 1;
}

#fox-hood {
  height: 70vh;
  width: auto;
  position: absolute;
  right: 22%;
  bottom: 6%;
  animation: foxes3 2s steps(2) infinite, move2 1s steps(2) infinite;;
  z-index: 1;
}

#fox-tod {
  height: 45vh;
  width: auto;
  filter: brightness(1.2);
  position: absolute;
  left: 47%;
  bottom: 22%;
  transform: rotate(15deg);
  animation: foxes1 1s .5s steps(2) infinite, move1 2s 1s steps(2) infinite;
  z-index: 1;
}

#fox-tails {
  height: 55vh;
  width: auto;
  position: absolute;
  right: 21%;
  bottom: 4%;
  animation: foxes1 1s steps(2) infinite, move1 2s steps(2) infinite;
  z-index: 2;
}

#fox-gregg {
  height: 55vh;
  width: auto;
  filter: brightness(1.2);
  position: absolute;
  left: 26%;
  bottom: 5%;
  animation: flip 1s steps(1) infinite;
  z-index: 2;
}

#fox-eevee {
  height: auto;
  width: 55vh;
  position: absolute;
  bottom: 3%;
  animation: foxes1 1.5s 1s steps(1) infinite reverse;
  z-index: 3;
}

#fox-prince {
  height: 40vh;
  width: auto;
  display: block;
  margin: 25vh auto 0;
  position: relative;
  animation: foxes1 1.5s steps(1) infinite;
  z-index: 3;
}

@keyframes foxes1 {
  50% {
    rotate: 2.5deg;
  }
}

@keyframes foxes2 {
  0% { rotate: -1deg;}
  50% { rotate: 5deg; }
}

@keyframes foxes3 {
  50% { rotate: -10deg; }
}

@keyframes flip {
  50% {
    transform: rotateY(180deg);
  }
}

@keyframes move1 {
  30% { transform: translate(-20px, -5px); }
  50% { transform: translate(-30px, -2px); }
  70% { transform: translate(-20px, -5px); }
}

@keyframes move2 {
  50% { transform: translateY(10px); }
}