wheat.css

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: wheat;
}

.headingcontainer{
    background-image: url(/images/wheatgrain.png);
    width: 96%;
    height: 100px;
    margin-top: 20px;
    margin-left: 2%;
    text-align: center;
    color: rgb(101, 0, 0);
    font-size: 27px;
    font-family: 'Baloo Bhaina 2', cursive;  word-spacing: 5px;
    border-radius: 10px;
    padding-top: 30px;

 } 
 .container{
    background-color: wheat;
    border-radius: 5px;
    border-color: gray;
    border-style: outset;
    width: 70%;
    height: 3200px;
    margin-left: 15%;
    margin-top: 5%;

}

.container h2{
    margin-top: 10px;
    text-align: center;
}
.container li{
    list-style: none;
    text-decoration: none;
 }
 .container li a img:hover{
     width: 19%;
 }
 .container li a{
     text-decoration: none;
    color: black;
    margin-left: 100px;
   }
 .container li a img{
     border-radius: 10px;
     margin-top: 80px;
     margin-left: 320px;
 }
 
 .container p{
     margin-bottom: -70px;
     /* margin-left: 90px; */
     margin-top: 10px;
     font-size: 22px;

 }
 .container #land{
     margin-top: 50px;
     text-align: center;
 }
 .container #soil{
     margin-top: 50px;
    text-align: center;

}
.container #weather{
     margin-top: 50px;
    text-align: center;


}
.container #variety{
      margin-top: 50px;
     text-align: center;

}
.container #seeding{
      margin-top: 50px;
     text-align: center;

}
.container #planting{
     margin-top: 50px;
    text-align: center;

}
.container #caring{
     margin-top: 50px;
    text-align: center;


}
.container #pest{
     margin-top: 50px;
    text-align: center;


}
.container #harvest{
     margin-top: 50px;
    text-align: center;


}
 .container #down-arrow{
     margin-left: 490px;
      margin-top: 40px;

 }
 
 

.navbar{
    display: inline-block;
   /* text-align: center; */
   position: relative; 
   margin-top: 10px;
   width: 100%;
   top: 0%;
   left: 0%;
   flex-direction:column;
    /* transform: translate(-50%,-50%); */
    }
  
  
 .navbar li a{
   text-decoration: none;
   color:white;
 }
 .navbar li a.active{
   text-decoration: underline;
 }
 
 .navbar li:hover{
   color: rgb(255, 171, 45);
   /* background-color: greenyellow; */
  }
 /* .navbar ul{
    position:relative;z-index:99
 } */
 .navbar > ul{
 
   list-style: none ;
   padding: 5px;
   margin: 0;
   display: inline-block;
   background-color: green;
   width: 100%;
   border-radius: 0px;
   
 }
 .navbar >ul>li{
   position: relative;
   cursor: pointer;
   padding: 5px;
   font-size: 20px;
   font-family: 'Baloo Bhaina 2', cursive;  word-spacing: 5px;
   float: left;
   width: 200px;
   height: 40px;
   z-index: 9999;
   line-height: 45px;
   text-align: center;
  
 
  
  
 
 }
 .dropdown{
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   padding: 0;
   z-index: 9999;
   }
 .dropdown li {
   background-color: green;
   display: none;
   font-size: large;
   z-index: 9999;
     
  }
 .dropdown a{
   text-decoration: none;
   color:white;
   z-index: 9999;
  
 }
 
 .dropdown li a:hover{
   color: rgb(255, 171, 45);
    z-index: 9999;
 
  }
 
 .navbar li:hover> .dropdown{
   perspective: 1000px;
   z-index: 9999;
 
 
 }
 
 .navbar li:hover > .dropdown li{
   transform-origin: top center;
    display: block;
   z-index: 9999;
  }
  
  .dropdown2{
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   padding: 0;
  }
 .dropdown2 li{
   background-color: green;
   display: none;
   font-size: large;
   }
 
 .dropdown2 a{
   text-decoration: none;
   color: white;
 }
 .dropdown2 li a:hover{
   color: rgb(255, 171, 45);
  
 }
 
 .navbar li:hover> .dropdown2{
   perspective: 1000px;
 
 }
 
 .navbar li:hover > .dropdown2 li{
   transform-origin: top center;
   opacity: 100%;
   display: block;
  }
    
 
  .dropdown3{
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   padding: 0;
  }
 .dropdown3 li{
   background-color:green;
     display: none;
   font-size: medium;
   line-height: 40px;
   }
   .dropdown3 a{
     text-decoration: none;
     color: white;
   }
 
 .dropdown3 li a:hover{
   color: rgb(255, 171, 45);
  
 }
 
 .navbar li:hover> .dropdown3{
   perspective: 1000px;
 
 }
 
 .navbar li:hover > .dropdown3 li{
   transform-origin: top center;
   opacity: 100%;
   display: block;
  }
 
 
 
 
 .navbar ul{
   list-style: none;
   text-decoration: none;
   color: white;
 }