/* HOME and CATEGORY PAGE */
#heather {
   position: fixed;
   top: 0;
   right: 0;
   z-index: 100; /*para di nalusot yung mga elements sa header kapag nagsscroll si user*/
   background-color: #F5F5EF;
   width: 100%;
}

a {
   font-family: "Roboto Slab", serif;
   font-optical-sizing: auto;
   font-weight: 900;
   font-style: normal;
   transition: all 300ms ease;
   text-decoration: none;
   color: white;
   display: block;
   padding: 15px;
   font-size: 1rem;
   color: #304254;
}

nav, #navLinks {
   display: flex;
}

nav {
   align-items: center;
}

#navLinks {
   list-style: none;
   font-size: 1rem; /*1 rem =16px*/
   justify-content: flex-end;
}

#navLinks a:hover {
   color: red;
   background-color: #ecd8d8;
   transition: color .2s ease;
   transition-delay: 0s;   
}

#home {
   padding-top: 100px;
   background-image: url("/Pictures/HomePic.png");
   background-attachment: initial;
   background-repeat: no-repeat;
   background-size: 1550px 750px;
} 

#name {
   font: normal 400 6rem "Hammersmith One", serif;
   display: flex;
   color: white;
   margin-left: 160px;
   letter-spacing: 3px;
   margin-top: 10px;
}

#name:hover {
   cursor: default;
}

#mabuhay {
   font: normal 400 5.8rem "DM Serif Display", serif;
   color: white;
   margin-top: 50px;
   margin-left: 210px;
}

.mabuhay p {
   font: normal 400 5.8rem "DM Serif Display", serif;
   color: white;
   margin-top: 0;
   margin-left: 210px;
}

/*CATEGORY*/

#category {
   margin-top: 380px;
}

.category h2 {
  font: normal 600 5rem "Dancing Script", cursive;
  color: #505316;
  margin-left: 180px;
  margin-top: 380px;
}

.category h4 {
   font: normal 500 1.7rem "Solway", serif;
   text-align: right;
   margin-right: 90px;
   letter-spacing: 5px;
   color: #493535;
   font-weight: bold;
}

#dishes {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   left: 60px;
   margin: 0 50px;
}

/* image sa category itu */
#dishes img {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: start;
   width: 260px;
   height: 390px;
   border-radius: 20px;
   margin-top: 20px;
}

/* neym for category */
#dishes .neym {
   font: normal 400 1.2rem "Sour Gummy", serif;
   background-color: #FF5757;
   width: 150px;
   height: 50px;
   flex-wrap: wrap;
   justify-content: space-evenly;
   align-content: center;
   position: absolute;
   border-radius: 5px;
   transform: translateX(50%);
   text-align: center;
   top: 400px;
}

/* neym for each category */
#md .neym, #des .neym, #sf .neym, #bev .neym {
   font: normal 400 1.2rem "Sour Gummy", serif;
   background-color: #FF5757;
   width: 150px;
   height: 30px;
   justify-content: space-evenly;
   position: absolute;
   border-radius: 20px;
   margin: 50px 9px;
}