/* CSS styling for the recipe */

body {
	font-family: Arial, sans-serif;
	padding: 0;
	margin: 0;
}

header {
    position: relative;
    width: 100;
    height: 50vh;
    background-image: url("Jessica-Enchilada-Lasagna.jpg");
    background-size: cover;
}

header h1 {
    position: absolute;
    bottom: 1em;
    right: 1em;
    padding: 0;
    margin: 0;
    font-size: 7rem;
    color: red;
}

header aside {
    background-color: red;
    padding: 1em;
    position: absolute;
    bottom: 1em;
    right: 1em;
}

header aside p {
    padding: 0 0 0.5em 0;
    margin: 0;
}

header aside p: last child {
    padding-bottom: 0;
}
main {
    position: relative;
    width: 100%;
    height: auto;
    background-color: #32a88f;
    overflow: auto;
    padding: 2em;
}


section {
    float: left;
}

section#ingredients {
    width: calc(33% - 2em);
}

section#directions {
    width: calc(67% - 2em);
}

h1, h2 {
    text-transform: uppercase;
    font-family: 'Dela Gothic One';
}

/***********************************nav *******/

    nav {
            position: relative;
            top: 0;
            left: 0;
            width: 100vw;
            height: 3rem;
            z-index: 1;
            background-color: #989989;
            overflow: hidden;
            transition: height 0.5s;
        }
        
        nav ul {
            position: relative;
            list-style: none;
            color: #fff23;
            margin: 0;
            padding: 0;
        }
    
    @media screen and (orientation: portrait) {
    
    
        #mobileNav {
            display: block;
            padding: 0.4em;
            font-size: 1.5rem;
            color: #fff;
        }
        
        nav:hover {
            height: 90vh;
        }
        
        
        nav a {
            font-family: Arial, sans-serif;
            color: #fff;
            text-decoration: none;
            padding: 0.5em;
        }
        
        nav li {
            padding: 0.5em 0.5em 0.5em 1em;
        }
        
        nav > ul > li:hover {
            background-color: #900;
        }
        
         nav > ul > li:hover > ul > li {
            background-color: #500;
        }
        
     
    
    } /* end @media orientation: portrait */
    
    
    @media screen and (orientation: landscape) {
        #mobileNav {
            display: none;
        }
        nav li {
            float: left;
        }
    }