/* Toaster and toast base styles */
body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("texture_sky.avif");
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    background-repeat: repeat;

    
  margin: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.toaster {
  position: absolute;
  width: 64px;
  height: 64px;
  background-image: url("toaster-sprite.gif");
}



/* Toaster Animations */
.t1 {
  animation: flap .2s steps(4) infinite alternate, fly 16s linear infinite;
}
.t2 {
  animation: flap .2s steps(4) infinite alternate-reverse, fly 24s linear infinite;
}
.t3 {
  animation: flap .2s steps(4) infinite alternate, fly 32s linear infinite;
}
.t4 {
  animation: flap .2s steps(4) infinite alternate, fly 36s 5s linear infinite;
}
.t5 {
  animation: flap .2s steps(4) infinite alternate-reverse, fly 32s 4s linear infinite;
}
.t6 {
  animation: flap .2s steps(4) infinite alternate, fly 32s 8s linear infinite;
}
.t7 {
  animation: flap .2s steps(4) infinite alternate-reverse, fly 32s 12s linear infinite;
}
.t8 {
  animation: flap .2s steps(4) infinite alternate, fly 32s 16s linear infinite;
}
.t9 {
  animation: flap .2s steps(4) infinite alternate-reverse, fly 32s 20s linear infinite;
}

/* Toast Animations */
.tst1 {
  animation: fly 16s linear infinite;
}
.tst2 {
  animation: fly 24s linear infinite;
}
.tst3 {
  animation: fly 32s linear infinite;
}
.tst4 {
  animation: fly 32s 12s linear infinite;
}

/* Positioning */
.p6 { right: -2%; top: -17%; }
.p7 { right: 10%; top: -19%; }
.p8 { right: 20%; top: -18%; }
.p9 { right: 30%; top: -20%; }
.p10 { right: 40%; top: -21%; }
.p11 { right: 50%; top: -18%; }
.p12 { right: 60%; top: -20%; }
.p13 { right: -17%; top: 10%; }
.p14 { right: -19%; top: 20%; }
.p15 { right: -21%; top: 30%; }
.p16 { right: -23%; top: 50%; }
.p17 { right: -25%; top: 70%; }
.p18 { right: 0%; top: -26%; }
.p19 { right: 10%; top: -20%; }
.p20 { right: 20%; top: -36%; }
.p21 { right: 30%; top: -24%; }
.p22 { right: 40%; top: -33%; }
.p23 { right: 60%; top: -40%; }
.p24 { right: -26%; top: 80%; }
.p25 { right: -36%; top: 30%; }
.p26 { right: -29%; top: 50%; }
.p27 { right: 0; top: -46%; }
.p28 { right: 10%; top: -56%; }
.p29 { right: 20%; top: -49%; }
.p30 { right: 30%; top: -60%; }
.p31 { right: -46%; top: 10%; }
.p32 { right: -56%; top: 20%; }
.p33 { right: -49%; top: 30%; }

/* Flapping Animation */
@keyframes flap {
  from { background-position: 0px; }
  to { background-position: -256px; }
}

/* Gliding Animation */
@keyframes fly {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-2120px, 0);
  }
}