popular.css

*{
    margin: 0%;
    padding: 0%;
  }
  #wow{
    color: yellow;
  }
  .heading{
    font-size: 40px;
    animation: rollIn;
    animation-duration: 10s;
    /* animation-iteration-count: infinite; */
    text-align: center;
    margin-top: 5%;
  }
  ul{
    margin:0;
    padding:0;
    display:flex;
  }
  ul li{
    list-style:none;
    /* margin:0 20px; */
    transition:0.5s;
    margin-left: 6%;
    margin-top: 5%;
  }
  ul li a{
    display: block;
    position:relative;
    text-decoration:none;
    padding:5px;
    font-size:16px;
    font-family: sans-serif;
    color:#110f0f;
    text-transform:uppercase;
    transition:0.5s;
    margin-top: 8%;
  }
  ul:hover li a{
    transform:scale(1.5);
    opacity:0.2;
    filter:blur(5px);
  }
  ul li a:hover{
    transform:scale(2);
    opacity:1;
    filter:blur(0);
    text-decoration:none;
    color:#fff;
  }
  ul li a:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#f8a50a;
    transition:0.5s;
    transform-origin:right;
    transform:scaleX(0);
    z-index:-1;
  }
  ul li a:hover:before{
    transition:transform 0.5s;
    transform-origin:left;
    transform:scaleX(1);
  }
  .imagephoto{
    display: grid;
    grid-template-columns: repeat(3,1fr);
  }
  .images img{
    height: 500px;
    justify-content: space-evenly;
    border-radius: 20px;
    margin-left: 10%;
    margin-bottom: 17%;
    animation: jackInTheBox;
    animation-duration: 10s; 
     animation-iteration-count: infinite;
     border: 3px solid #FFCA42;
    box-shadow: solid 50px #FFCA42;
  }
  .footer{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    list-style: none;
    margin-top: 5%;
    padding-top: 5%;
    padding-left: 10%;
    background-color: rgb(66, 64, 64);
    color: aliceblue;
   }
   .box h3{
    color: #FFCA42;
   }
   .box a{
    text-decoration: none;
    color: aliceblue;
   }
   .food{
    color: #FFCA42;
    text-decoration: none;
   }