* {
     margin: 0;
     padding: 0;
 }

 :root {
     --first: #e85151;
     --second: #8c5d5a;
     --third: #51e883;
     --fourth: #7951e8;
     --fifth: #e85156;
     --sixth: #e8ca51;
     --seventh: #51e6e8;
     --eighth: #bf1b1b;
     --ninth: #8b8787;
 }

 body {
     background: rgba(252, 249, 245);
     font-family: sans-serif;
 }

 .grid {
     display: grid;
     grid-template-columns: repeat(3, 200px);
     grid-template-rows: repeat(3, 200px);
     grid-gap: 20px;
     justify-content: center;
     padding: 50px;
 }

 .item {
     display: flex;
     border-radius: 50%;
     justify-content: center;
     align-items: center;
     font-size: 24px;
     box-shadow: 0 0 5px black;
     color: white;
     text-shadow: 0 0 2px black;
     animation: flipInY;
     animation-duration: 1s;
 }


 .item1 {
     background: var(--first);
 }

 .item2 {
     background: var(--second);
     animation: flipInX;
     animation-duration: 1s;
 }

 .item3 {
     background: var(--third);
 }

 .item4 {
     background: var(--fourth);
     animation: flipInX;
     animation-duration: 1s;
 }

 .item5 {
     background: var(--fifth);
 }

 .item6 {
     background: var(--sixth);
     animation: flipInX;
     animation-duration: 1s;
 }

 .item7 {
     background: var(--seventh);
 }

 .item8 {
     background: var(--eighth);
     animation: flipInX;
     animation-duration: 1s;
 }

 .item9 {
     background: var(--ninth);
 }