/*Reset Code*/
*{
    margin:0;
    padding:0;
    box-sizing: border-box;

}

body {
    overflow-x: hidden;
  }
  
  main {
    height: 100vh;
    width: 100vw;
  }

  /*Setting the Stage*/
.sky,
.grass,
.road,
.stripes {
    width: 100%;
}

.sky {
    height: 30%;
    background-color: rgb(45, 191, 248);
}

.sky p {
  font-size: 3rem;
  position: absolute;
}

.cat {
    top: 40%;
    animation-name: drive;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }


.grass {
    height: 30%;
    background-color: greenyellow;
}

.road {
    height: 40%;
    background-color: gray;
    position:relative;
}

.stripes {
    height: 10px;
    border-top: 8px dashed black;
    position: absolute;
    top: 45%;
}

.road p {
    font-size: 5rem;
    position: absolute;
  }
  
  
  .bus {
    top: -10%;
    animation-name: drive;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  .car {
    top: 40%;
    animation-name: drive;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  /* Animations*/
  @keyframes drive {
    from{
        transform: translateX(-2Vw) scale(-1,1);

    }
    to{
        transform: translateX(105vw) scale(-1,1);

    }
  }