@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
  }
  
  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff8df;
    font-family: sans-serif;
    position: relative;
  }
  
  .background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
  }
  
  .content {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 20vh;
    padding: 1em;
    /* background-color: rgba(255, 251, 223, 0.8);  */
    background-color: #ffffffc6;
  }

  .content img {
    max-width: 90%;
  }
  
  .flying-cat {
    position: absolute;
    animation-name: flyAndRotate;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    pointer-events: none;
  } 
  
  @keyframes flyAndRotate {
    0% {
      transform: translate(0, 0) rotate(0deg);
    }
    100% {
      transform: translate(var(--dx), var(--dy)) rotate(var(--rotation));
    }
  }