#main {
    font-family: 'Poppins', sans-serif;
    font-family: 'Space Mono', monospace;
    background-image: url(../Project1/main_background.jpg);
    background-size: cover;
    text-align: center;
}
img {
    height: 400px;
    width: 200px;
    border-radius: 20px;
}
#intro {
    display: grid;
    grid-template-columns: 1fr 1fr ;
    background-color: #eec7cb84;
    border-radius: 20px;
    padding: 10px;

}

.kittens {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
}

figure {
    background-color: #eec7cb84;
    border-radius: 20px;
    padding: 20px;
}

#letter {
  font-size: 15px;
}

#walking {
    margin: auto;
    border-radius: 20px;
    width: 200px;
    height: 400px;
    background: url(../Project1/animation1/img/improvedanimation1.png);
    animation: play 0.8s steps(4) infinite;}

    @keyframes play {
        from { 
            background-position: 0px; 
        }
        to { 
            background-position: -800px; 
        }
    }

svg {

    border-radius: 20px;
}
      .cls-1 {
        fill: #f7acb7;
      }
    
      .cls-2 {
        fill: #eec7cb;
      }
    
      .cls-3 {
        fill: #bc777a;
      }
    
      .cls-4 {
        fill: #231f20;
      }
    
      .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13 {
        stroke: #231f20;
        stroke-miterlimit: 10;
      }
    
      .cls-5, .cls-6, .cls-7, .cls-8, .cls-12 {
        stroke-linecap: round;
      }
    
      .cls-5, .cls-8, .cls-12 {
        fill: none;
      }
    
      .cls-6, .cls-10, .cls-13 {
        fill: #c6c1c1;
      }
    
      .cls-7, .cls-9 {
        fill: #fff;
      }
    
      .cls-8 {
        stroke-width: .25px;
      }
    
      .cls-11 {
        fill: #b3afaf;
      }
    
      .cls-12, .cls-13 {
        stroke-width: .75px;
      }


#court {
        position: relative;
        overflow: hidden;
        margin: auto;
        width: 300px; height: 300px;
        background: #eec7cb;
        border-radius: 20px;
       
      }
#mouse {
        position: absolute;
      }
      
#mouseup {
        width: 100px;
        height: 200px;
      }
             

footer {
    text-align: center;
}




  @media only screen and (max-width: 840px) {
    .kittens {
      grid-template-columns: 1fr;
    }
    #intro {
      grid-template-columns: 1fr;
    }
    figure {
      margin: 0;
    }
  }