body {
     background-color: 	#29FFAD ;
     background-image: url(https://images.unsplash.com/photo-1759919440088-e720f15c078c?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
        color: 	#8F0000 ;
     font-family: "Dhurjati", sans-serif;
    font-size: 1em;
    }
    
    
    main {
        border: 3em inset green;
        background-color:#29FFADaa ;
        width: 80%;
        margin: auto;
    }
    
    h1 {
    font-family: "Rubik Glitch", system-ui;
    text-align: center;
        
    }
    
    a {
        color: #8F0000;
    }
    
    
    img {
        border: 3em groove #8F0000;
       
    }
    
    @keyframes glow {
         0%,
       7% {
          transform: rotateZ(0.8);
       }
       15% {
          transform: rotateZ(-15deg);
       }
       20% {
          transform: rotateZ(10deg);
       }
       25% {
          transform: rotateZ(-10deg);
       }
       30% {
          transform: rotateZ(6deg);
       }
       35% {
          transform: rotateZ(-4deg);
       }
       40%,
       100% {
          transform: rotateZ(0);
       }
    }
    
    .jeff {
       animation-duration: 2s;
       animation-name: glow;
       animation-iteration-count: infinite;
       animation-timing-function: linear;  
    }
    
    
    .container {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .box {
      /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES - DON'T GO OVER 45% */
      flex-basis: 25%;
      margin: .5em;
      padding: 1em;
    }
    
    /* SETTING THE IMAGE WIDTH HERE INSTEAD OF IN HTML. REMOVE WIDTH="XXX%" FROM THE HTML IMAGE TAGS */
    .box img {
      max-width: 70%;   
      display: block;
      margin: auto;
    }
    
    
    /* FORMATTING THE CITATIONS - DON'T COPY THIS IF YOU DON'T HAVE A "citation" CLASS */
    .citation {
      text-align: center;
    }
    /* STARS  */
    .star-rating {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-end;
    }
    .star-rating input {
      display: none;
    }
    .star-rating label {
      font-size: 2rem;
      color: #ccc;
      cursor: pointer;
    }
    .star-rating label:hover,
    .star-rating label:hover ~ label,
    .star-rating input:checked ~ label {
      color: #ffca08;
    }
    /* END STARS  */