*{
    margin: 0%;
    padding: 0%;
    width: auto;
    height: auto;
}
@font-face {
    font-family: "PoppinsRegular";
    src: url("fonts/Poppins-Regular.ttf");
  }
  @font-face {
    font-family: "PoppinsLight";
    src: url("fonts/Poppins-Light.ttf");
  }
  @font-face {
    font-family: "PoppinsBold";
    src: url("fonts/Poppins-Bold.ttf");
  }
  
i{
font-size: 30px;
color: rgb(22, 22, 135);
font-weight: bold;
}
nav{
    margin-top: 1vw;
    padding: 20px 10% ;
    display: flex;

}


.nav-links{font-size: 24px;
    color: rgb(11, 11, 69);
    font-weight: lighter;
    letter-spacing: 2px;
    word-spacing: 30px;
    margin-left: 10%;
    margin-right: 10%;

}

.nav-links > a:hover{
    color: rgb(22, 22, 135);
    cursor:pointer;
text-decoration: underline;
}
.icon-catogory{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    justify-items: start;
    color: rgb(11, 11, 69);
    font-weight: lighter;
    letter-spacing: 2px;
    word-spacing: 30px;
    padding-right: 26px;
}

.cat-box{height: 100px;
width: 150px;
align-items: center;
margin: 40px;

padding-top: 50px ;
/* background-color: antiquewhite; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items:baseline;
    overflow: hidden;
    flex-wrap: wrap;
}
.cat-box:hover{
    border-radius: 8px;
border: 4px solid blue;
color: blue;

}

.main-grid{
    background-color: rgb(219, 222, 231);
height: 100vh;
width: 100vw;
padding: 48px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
justify-self: center;


}



.grid-box{
    background-color: white;
    height: 80px;
width: 125px;
align-items: center;
margin: 10px;
border-radius: 8px;
padding-top: 50px ;
/* background-color: antiquewhite; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items:baseline;
   
}

.grid-box:hover{
background-color: rgb(253, 226, 54);
}