/*Fonts*/
@font-face {
  font-family: belleza;
  src: url('../fonts/Belleza-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: ramabhadra;
  src: url('../fonts/Ramabhadra-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
    .slicknav_nav > li > a,
    .slicknav_nav > li > .slicknav_item {
    font-family: 'Rahmadan', sans-serif;
    }
    .slicknav_nav ul li a,
    .slicknav_nav .slicknav_parent-link a {
    font-family: 'Belleves', sans-serif;
    }

/*Document Styles*/
html {
    background-color: #F3EDE2;
    font-size: 100%;
} 

/*Element Styles*/
body {
    padding: 0px;
    margin: 0px;
}
/*Header*/
header {
    background-color: #264B42;
    display: none;
    grid-template: 1fr/ 15% 60% auto;
    grid-template-areas: "lLeft lMiddle rRight"; 
    text-align: center;
    max-height: 130px;
}
/*Header Image*/
#headerLogo {
    display: flex;
    grid-area: lLeft;
    justify-content: left;
}
#headerLogo img {
    max-height: 130px;
}
#altTitle {
    display: none;
}
#lMiddle {
    display: flex;
    align-items: center;
    justify-content: left;
    font-size: 180%;
    font-style: oblique;
}
#rMiddle {
    display: flex;
    align-items: center;
    justify-content: center;
}
/*Header Nav*/
#headerContactResume {
    grid-area: rRight;
    display: flex;
    align-items: center;   
}
#headerNav {
    list-style-type: none;
    display: flex;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
    justify-content: end;
}
#headerNav li {
    margin-right: 5%; 
}
#headerNav li a{ 
    text-decoration: none;
    background-color: #2E1A15;
    color: #FF8A65;
    padding: 15px 7.5px;
    border-radius: 30%;
    transition: transform 0.2s ease-in-out, background-color 0.3s, color 0.3s;
    display: inline-block;
}
#headerNav li a:hover{
    background-color: #FF8A65;
    color: #2E1A15;
    transform: scale(1.1);
    font-style: italic;
    cursor: pointer;
}


/*Main Body*/
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
 /*Main Nav*/
#mobileMenu {
    display: block; 
    position: -webkit-sticky;
    position: sticky;
    top: 0%;
    width: 100%;    
}
#navMenu {
    display: none;
    position: -webkit-sticky;
    position: sticky;
    top: 0%;
    width: 100%; 
}
#navMenu ul{
    display: flex;
    list-style-type: none;
    margin: 0;
	padding: 0;
}
#navMenu ul li {
    flex: 1;
    position: relative;
    transition: flex-grow 0.3s ease-in-out;
}
#navMenu ul li a {
    min-height: 5px;
    max-height: 40px;
    font-size: 1.5rem;
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: #2E1A15;
    color: #FF8A65;
    padding: 10px 0px;
    font-weight: bold;
    transition: all 0.3s ease-in;
    border: 2px solid #2E1A15;
    box-shadow: 0 6px 8px rgba(0,0,0,0.1);
}
#navMenu ul ul {
    padding: 0;
    margin: 0;
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    flex-direction: column;  
}
#navMenu ul ul li {
    justify-content: stretch; 
}
#navMenu ul ul li a {
    display: block;
    color: #FF8A65;
    text-decoration: none;
    white-space: nowrap;
}
#navMenu ul li a:hover {
    background-color:#FF8A65;
    color: #2E1A15;
    font-style: italic;
}
#navMenu ul li:hover {
    flex-grow: 1.1;
    z-index: 2;
}
#navMenu ul li:hover > ul {
	  display: block;  
}
h1, h2, h3 {
    font-family: ramabhadra;
    transition: all 0.3s ease-in;
}
p, a {
    font-family: belleza;
    transition: all 0.3s ease-in;
}
.text {
    color: #FFE0B2;
}
.textAlt {
    color: #2E1A15;
}
/*Footer styles*/
footer {
    margin: 0;
    color:#FF8A65; 
    background-color: #2E1A15;
    padding-bottom: 10px;
    display: flex;
}
#bottomFooter {
    margin-left: 1vw;
}

/*MEdia Queries*/
@media only screen and (min-width: 690px) {
    header{
        display: grid;
    }
    #mobileMenu {
        display: none;
    }
    #navMenu{
        display: block;
    }
}