/****************** Selima Font ***********************/
@font-face {
    font-family: "selimaregular";
    src: url('selima_-webfont.eot');
    src: url('selima_-webfont.eot?#iefix') format('embedded-opentype'),
         url('selima_-webfont.woff2') format('woff2'),
         url('/styles/selima_-webfont.woff') format('woff'),
         url('selima_-webfont.ttf') format('truetype'),
         url('selima_-webfont.svg#selimaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/****************** HEADINGS ***********************/

h1, h2, h3, h4, h5, h6 {
    font-family: "selimaregular", cursive;
    color: #666666;
}
h1 {font-size: 3rem;}
h2 {font-size: 2.5rem;}
h3 {font-size: 2rem;}
h4, h5, h6 {
    font-size: 1.75rem;
}

/****************** HEADER ***********************/

#fyLogo {
    width: 15%;
    margin: auto;
    display: block;
    margin-bottom: -33px;
}

/****************** NAV ***********************/

nav {
    background-color: #ffdfcf;
    text-align: center;
    clear: both;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-bottom: 10px;
}

nav ul {
    list-style-type: none;
    font-family: "selimaregular", cursive;
    font-size: 1.5rem;
}

nav li {
    display: inline;
    margin-right: 100px;
    text-align: center;
/*    border: 1px solid #ffdfcf;*/
}

 li a {
    margin: 10px;
}
/****************** LINKS ***********************/

a:link {
    color: #666666;
    text-decoration: none;
}

a:visited{
    color: #808080;
}

a:focus {
    color: #404040;
    text-decoration: underline;
} 

a:hover {
    color: #404040;
}
main a:hover {
    color: #000;
    font-weight: 500;
}
/****************** BODY ***********************/

body main p {
    margin-bottom: 10px;
}

body {
    font-family: "Raleway", sans-serif;
    color: #666666;
    margin: 0;
    margin-bottom: 0;
}

main{
    max-width: 60%;
    margin: 0 auto;
}

    /**** BLOGPOST ****/
.blogPostHome {
    margin-left: 10px;
    overflow: auto;
}

.blogPic {
    width: 25%;
    height: 25%;
    float: left;
    padding-right: 10px;
    object-fit: cover;
}

.blogPost {
    clear: both;
    margin-bottom: 45px;
    overflow: hidden;
}

.blogPost > li {
    display: inline-block;
}

.readMore {
    font-weight: bold;
    background-color: #ffdfcf;
    border-radius: 5px;
    padding: 5px 5px 5px 5px;
    margin-bottom: 10px;
}


.recipesLists li{
    display: block;
}

.largePic {
    max-width: 800px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.medPic {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
}
    /**** ABOUT ****/
.profilePic {
    width: 25%;
    float: right;
    padding-left: 10px;
}

.About {
    background-color: #ffdfcf;
    padding: 10px 10px 10px 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: auto;
}



    /**** GALLERY ****/
.gallery {
    padding: 5px 5px 5px 5px;
}
.galleryPic {
    width: 25%;
    padding-right: 5px;
    padding-left: 5px;
    position: relative;
    margin-right: -13%;
    margin-left: 13%;
}

.galleryPic:hover{
    background-color: rgba(0,0,0,0.4);
/*    z-index: 99;*/
}

.gallBox {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto;
}

.galleryGrid {
    width: 300px;
    height: 250px;
    object-fit: cover;
}

    /**** CONTACT ****/

#contactForm label{
    display: block;
    padding: 5px 5px 5px 5px;
}

#contactForm fieldset {
    margin-bottom: 10px;
}

input {
    padding-bottom: 10px;
}

form {
    margin-bottom: 20px;
}
/****************** FOOTER ***********************/

footer {
    background-color: #ffdfcf;
    margin: 0;
    text-align: center;
    margin-bottom: -20px;
}

footer p {
    padding-bottom: 10px;
}

/****************** INDEX PAGE ***********************/
.index {
    
}

.middleText {
    text-align: center;
}