style.css

html, body {
    margin: 0;
    padding: 0;
}

h1 {
    font-family: 'Chelsea Market', Georgia, serif;
    font-weight: normal;
    text-align: center;
    font-size: 60px;
}

div.next-arrow { content: url("https://www.solodev.com/assets/anchor/arrow-down.png"); }
div.next-arrow-inverted { content: url("https://www.solodev.com/assets/anchor/arrow-down.png"); -webkit-filter: invert(1); filter: invert(1); }
div.beginning-arrow { content: url("https://www.solodev.com/assets/anchor/arrow-down.png"); transform: rotate(180deg); }
.section { margin: 0; height: 100%; width: 100%; padding: 0%; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
.opening { background: black; }
.opening h1 { color: white; }
.past { background: yellow; }
.past h1 { color: green; }
.angel { background: white; }
.angel h1 { color: black; }
.despair { background: black; }
.despair h1 { color: white; }
.love { background: pink; }
.love h1 { color: black; }
.birthday { background: black; cursor: crosshair; }
.birthday h1 { color: white; }

div.fire { content: url("fire.gif"); width: 100%; max-height: 50%; padding-bottom: 5% }

div.kiss{ content: url("kiss.gif"); width: fit-content; height: fit-content; }

.tumbleweed{
    position: relative;
    width: 70px;
    height: 70px;
    background: url('https://vignette4.wikia.nocookie.net/imaspeedrunner/images/3/3a/Orphan_tumbleweed.png/revision/latest?cb=20131006213006') no-repeat;
    background-size: 100%;
}

div.angel-image { content: URL('angel.png'); padding-bottom: 10%;}

.tumbleweed{
    animation: tumbleweed linear 5s;
    animation-iteration-count: infinite;
  
}
  
  @keyframes tumbleweed{
    0% {
      transform:  translate(-600px,45px)  rotate(0deg) ;
    }
    9% {
      transform:  translate(-400px,5px)  rotate(130deg) ;
    }
    17% {
      transform:  translate(-260px,45px)  rotate(250deg) ;
    }
    26% {
      transform:  translate(-80px,15px)  rotate(360deg) ;
    }
    34% {
      transform:  translate(100px,45px)  rotate(490deg) ;
    }
    42% {
      transform:  translate(280px,30px)  rotate(600deg) ;
    }
    50% {
      transform:  translate(420px,45px)  rotate(720deg) ;
    }
    100% {
      transform:  translate(420px,45px)  rotate(720deg) ;
    }
  }

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:3s;
  -moz-animation-duration:3s;
  animation-duration:3s;

  -webkit-animation-delay: .5s;
  -moz-animation-delay: .5s;
  animation-delay: .5s;

  animation-iteration-count: infinite;
}


canvas{ max-width: 100%; max-height: 70%; }