/* source: https://www.youtube.com/watch?v=KD1Yo8a_Qis
 start: 9:15
  stop: 9:35
 20 min */

 body {
     background-image: url(/img/2c.jpg);
     text-align: center;
     color: rgb(41, 135, 151);
     ;
     margin-top: 15%;
     text-shadow: 1px 1px 0 white;
 }


 /* handles the overflow */
 .carousel {
     margin: 100px auto;
     width: 90%;
     color: rosybrown;
     border: 5px solid rgb(41, 135, 151);
     display: flex;
     /* add animation */
     /* removes view of the over flow */
     /* adds scroll bar */
     overflow-x: auto;
     /* add gap - fills in between groups */
     gap: 1em;
 }

 /* removes scroll bar */
 .carousel::-webkit-scrollbar {
     display: none;
 }

 /* handles the elements */
 .group {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1em;
     /* animation length rotations direction*/
     animation: spin 25s infinite linear;
 }

 .card {
     /* flex short hand: stop the shrink to fit */
     flex: 0 0 5em;
     height: 5em;
     padding: 1em;
     background-color: rgba(74, 224, 174, 0.62);
     font-size: 3rem;
     border-radius: .2rem;
     text-align: center;
     align-content: center;
 }

 /* add animation */
 @keyframes spin {
     from {
         translate: 0;
     }

     to {
         translate: -100%;
     }
 }