/* #region || CSS RESET (Used for folding code) */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;

}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* #endregion || CSS Reset*/

:root{
    --dkgray: #0D0D0D;
    --gray: #F2F2F2;
    --teal: #7ABFBF;
    --redorange: #EB5428;

    --transparent-teal: rgba(122, 191, 191, .5);
}

/* #region || General Styles & Typography */
html {
    background-color: var(--transparent-teal);
    box-sizing: border-box;
}
body {
    background-color: var(--gray);
    width: 414px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 180px 1047px 1025px 620px 330px;
    grid-template-columns: 414px;
    grid-template-areas:
    "nav"
    "head"
    "main"
    "aside"
    "footer";
}
main h2 {
    text-align: center;
}
h1, h2, h3, footer {
    font-family: "BEBAS NEUE", sans-serif;
    font-weight: 400;
    font-style: normal;
}
h1 {
    font-size: 40px;
    text-align: center;
}
h2 {
    font-size: 30px;
}
h3 {
    font-size: 25px;
}
a { 
    text-decoration: none;
}
footer {
    font-size: 20px;
    grid-area: footer;
    background-color: var(--gray);
}
p, dd, li, nav, input {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
}
nav li, nav span, menu li, #social li, nav p {
    font-family: 'BEBAS NEUE', sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    color: var(--redorange);
    transition: all .8s ease-in-out;
}
menu { 
    color: var(--redorange);
    font-family: 'BEBAS NEUE', sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}
dt {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
}
a:visited {
    color: inherit;
}
.rating dl {
    font-weight: 700;
}
#copyright p {
    font-family: "BEBAS NEUE", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
}
/* #endregion || General Styles & Typography */

/* #region || For Mobile First */
nav {
    color: var(--redorange);
    width: 414px;
    height: 70px;
    position: absolute;
    background-color: var(--gray);
    box-shadow: 0 0px 10px 0px rgba(0,0,0,.5);
    grid-area: nav;
}
nav h2, footer h2 {
    visibility: hidden;
    height: 0px;
    margin: 0px;
}
nav li:not(:first-child) {
    padding: 10px 18px 18px;
}
nav li {
    background-color: var(--gray);
    transition: all .7s ease-in-out;
}
nav ul {
    display: grid;
    grid-template-rows: repeat(8, 1fr);
    width: 414px;
    text-align: center;
}
nav li:not(:last-child) {
    z-index: 1;
}
nav li:hover {
    background-color: var(--redorange);
    color: var(--gray);
}
nav li:last-child {
    width: 0;
    height: 0;
}
nav ul img {
    visibility: hidden;
    height: 0px;
    width: 0px;
}
#search {
    position: absolute;
    top: 90px;
    left: 40px;
    display: grid;
    grid-template-columns: 275px 50px;
}
#search button {
    background-color: var(--redorange);
    border-style:none;
}
#search button:hover {
    cursor: pointer;
}
#search svg {
    stroke: var(--gray);
}
#search input {
    padding: 10px;
    border: solid 3px var(--redorange);
}
header {
    grid-area: head;
    width: 414px;
    margin-bottom: 20px;
    background-color: var(--gray);
    display: grid;
    grid-template-rows: 60px 80px 920px;
}
main { 
    grid-area: main;
    width: 414px;
}
ol { 
    list-style:decimal;
    padding-left: 10px;
}
ol li {
    margin-bottom: 1rem;
}
#profile {
    position: absolute;
    top: -6px;
    left: 340px;
    width: 38px;
    height: 48px;
    color: var(--dkgray);
    transition: all .7s ease-in-out;
}
#profile li {
    transition: all .7s ease-in-out;
}
#profile svg {
    stroke: var(--redorange);
    transition: all .7s ease-in-out;
}
#profile a {
    width: 50px;
    color: var(--dkgray);
    display: block;
    transition: all .7s ease-in-out;
}
#profile:hover a {
    /*transition:all .7s ease-in-out;*/
    color: var(--gray);
}

/*
#profile:hover > p {
    color: var(-gray);
}
*/
#profile:hover svg {
    stroke: var(--gray);
}
#menutext {
    padding: 0;
    width: 65px;
    text-align: center;
    color: var(--dkgray);
}
#copyright {
    text-align: center;
    display: flex;
    flex-direction:column-reverse;
    padding: 10px;
    align-items: center;
}
#copyright img {    
    align-self: center;
}
#copyright p {
    padding: 10px;
    width: 125px;
}

/* Required for Hamburger Menu */
nav ul {
    overflow: hidden;
    max-height: 0; 
}
#dropdown {
        display: none;
}
#dropdown:checked ~ ul { 
        max-height: 335px;
}
/* End: Required for Hamburger Menu */

header h1 {
    padding-top: 10px;
    padding-bottom: 10px;
}
header h3, header svg {
    color: var(--redorange);
}
#details, #ingredients, #directions {
    padding-left: 15px;
    line-height: 1.75;
}
#details dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 220px;
}
#details dt  {
    padding-right: 10px;
}
#logo {
        position: absolute;
        top: 0;
        right: 70px;
        background-color: var(--redorange);
        width: 280px;
        height: 70px;
        text-align: center;
        padding: 0;
        cursor: pointer;
}
nav img {
   width: 60px;
}
label, span {
    cursor: pointer;
    padding-left: 5px;
    text-align: center;
}
menu {
    background-color: var(--gray);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    padding-top: 5px;
    height: 80px;
    list-style-type:none;
}
menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
    margin-left: 25px;
    color: var(--redorange);
}
menu:hover svg {
    cursor: pointer;
}
menu a:hover {
    background-color: var(--redorange);
    color: var(--gray);
}
menu li:hover #menutext {
    cursor: pointer;
    color: var(--gray);
}
#intro img {
    background-color: var(--gray);
    width:414px;
    top: 75px;
    left: 200px;
}
#intro p {
    padding-bottom: 20px;
    line-height: 1.2;
    padding-left: 5px;
    padding-top: 5px;
}
#details {
    background-color: var(--gray);
    color: var(--dkgray);
}
aside {
    background-color: var(--teal);
    padding: 10px;
    line-height: 1.5;
    grid-area: aside;
}
aside h2, aside h3 {
    text-transform: uppercase;
}
aside h2 {
    text-align: center;
    padding-bottom: 20px;
}
#side-dishes {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
}
.dish {
    display: grid;
    grid-template-columns: 110px 1.25fr;
    transition: all .5s ease-in-out;
}
.dish h3 {
    grid-column-start: 2;
    padding-bottom: 5px;
}
.dish img {
    width: 90px;
    grid-row: 1 / 4;
    justify-content: center;
}
.dish p {
    padding: 5px 0;
}
.dish:hover {
    cursor: pointer;
    background-color: rgba(235, 84, 40, .5);
}
#ingredients ul {
    list-style:inside;
}

/* #region || Ratings */
.rating {
    padding-bottom: 10px;
}

.rating dd {
    visibility: hidden;
    height: 0;
    width: 0;
}
/* #endregion || Ratings */

/* #region || Footer */
footer img {
    width: 175px;
    padding-bottom: 10px;
}
#social {
    padding-top: 20px;
    width: 420px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
#social h3, #copyright h3 {
    visibility: hidden;
    height: 0;
    width: 0;
}
#social ul {
    display: grid;
    grid-template-columns: repeat(4, 103.5px);
    text-align: center;
}
#social a {
    text-transform: uppercase;
    color: var(--redorange);
    display: flex;
    flex-direction:column-reverse;
}
#social svg {
    align-self: center;
}
#social a:hover {
    background-color: var(--redorange);
    color: var(--gray);
}
#social li a:hover svg {
    stroke: var(--gray);
}
#copyright {
    flex-wrap: wrap;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
/* #endregion || Footer */
/* #endregion || Mobile First */

/* #region || 768px */
@media screen and (min-width: 768px) {
body {
        background-color: var(--gray);
        width: 768px;
        margin: 0 auto;
        display: grid;
        grid-template-rows: 200px 1400px 640px 330px 250px;
        grid-template-columns: 768px;
        grid-template-areas:
        "nav"
        "head"
        "main"
        "aside"
        "footer";
}
header {
    width: 768px;
    margin-bottom: 20px;
    background-color: var(--gray);
    display: grid;
    grid-template-rows: 60px 0px 1000px;
}
header h1 {
    text-align: left;
    padding-left: 10px;
}
menu {
    padding: 0;
    height: 100px;
    background: rgba(242,242,242, .8);
    position: relative;
    z-index: 1;
    align-content: space-evenly;
}
menu a {
    width: 50px;
    margin-left: 72px;
}
menu li a svg {
    position: relative;
}
.dropdown, #menutext {
    display: none;
}
.hamburger {
    display: none;
}
nav { 
    width: 768px;
    height: 187px;
    grid-area: nav;
    transition: all .5s ease-in-out;
}
nav ul {
    overflow: visible;
    position: absolute;
    top: 75px;
    display: grid;
    grid-template-columns: 110px 109.5px 109.5px 110px 109.5px 109.5px 110px;
    grid-template-rows: none;
    width: 768px;
    transition: all .5s ease-in-out;
}
nav ul img {
    visibility: visible;
    height: 60px;
    width: 60px;
}
nav li:last-child {
    width: 0;
    height: 0;
    padding: 0;
}
nav li:not(#profile):hover {
    background-color: var(--redorange);
    color: var(--gray);
}
#search {
    position: absolute;
    display: grid;
    grid-template-columns: 275px 50px;
    top: -65px;
    left: 350px;
}
#search svg {
    stroke: var(--gray);
}
#search input {
    padding: 10px;
    border: solid 3px var(--redorange);
}
#side-dishes {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
}
.side-dishes:hover {
    cursor: pointer;
    background-color: rgba(235, 84, 40, .5);
}
.dish {
    display: grid;
    grid-template-columns: 110px 1.25fr;
}
.dish h3 {
    grid-column-start: 2;
    padding-bottom: 5px;
}
.dish img {
    width: 90px;
    grid-row: 1 / 4;
    justify-content: center;
}
#logo {
    top: -75px;
    left: 0px;
    width: 80px;
    height: 80px;
}
#logo svg {
    padding-top: 5px;
}
#profile {
    top: -83px;
    left: 694px;
    height: 54px;
    transition:none;
    transition: all .7s ease-in-out;
}
#profile svg {
    width: 50px;
    height: auto;
}
main {
    width: 768px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3,1fr);
}
#intro img {
    width:768px;
}
#intro p {
    padding-left: 15px;
    padding-right: 15px;
}
#details {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
#details dl {
    justify-content: center;
}
#ingredients {
    grid-row: 2 / 4;
    grid-column: 1 / 2;
}
#directions {
    grid-row: 2 / 4;
    grid-column: 2 / 4;
    padding-right: 10px;
}
.rating {
    display: flex;
    flex-direction: row;
}
.stars {
    padding-left: 10px;
}

/* #region || Footer 768px */
footer {
    display: grid;
    grid-template-columns: 1fr 2fr;
    justify-items: end;
}
#social a {
    text-transform: uppercase;
    color: var(--redorange);
    display: flex;
    flex-direction:column-reverse;
}
#social ul {
    justify-content: end;
}
#copyright {
    width: 200px;
    align-content: flex-start;
}
/* #endregion || Footer 768px */
}
/* #endregion || 768px */

/* #region || 1280px */
@media screen and (min-width: 1280px) {
    body {
        background-color: var(--gray);
        width: 1280px;
        margin: 0 auto;
        display: grid;
        grid-template-rows: 200px 885px 480px 500px 220px;
        grid-template-columns: 1280px;
        grid-template-areas:
        "nav"
        "head"
        "main"
        "aside"
        "footer";
}
nav { 
    width: 1280px;
    grid-area: nav;
    height: 112px;
}
#intro {
    display: grid;
    grid-template-columns: 120px 550px auto;
    grid-template-rows: 100px;
}
#intro p {
    grid-column: 3 / 4;
    padding-left: 15px;
    padding-right: 15px;
}
#intro img {
    width:550px;
    grid-column: 2 / 3;
}
header {
    width: 1280px;
    margin-bottom: 0px;
    background-color: var(--gray);
    display: grid;
    grid-template-rows: 60px 0px 824px;
}
header h1 {
    text-align: center;
}
#menu { 
    height: 820px;
    width: 120px;
    background-color: var(--gray);
    z-index: 1;
    border: 3px solid var(--redorange);
}
menu {
    background-color: var(--gray);
    position: relative;
    z-index: 1;
    align-content: space-evenly;
    grid-template-columns: 120px;
    grid-template-rows: repeat(4, 80px);
    height: 350px;
    gap: 20px;
    padding-top: 20px;
}
menu a {
    width: 50px;
    margin-left: 37px;
}
menu li a svg {
    position: relative;
    padding-top: 20px;
}
nav ul {
    overflow: visible;
    position: absolute;
    top: 0px;
    left: 275px;
    display: grid;
    grid-template-columns: 110px 109.5px 109.5px 110px 109.5px 109.5px 110px;
    grid-template-rows: none;
}
#search {
    position: absolute;
    top: 140px;
    left: 230px;
    display: grid;
    grid-template-columns: 275px 50px;
}
#search svg {
    stroke: var(--gray);
}
#search input {
    padding: 10px;
    border: solid 3px var(--redorange);
}
#side-dishes {
    grid-template-rows: 375px;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 58px;
    margin-left: 10px;
    height: 415px;
    transition: all .6s ease-in-out;
}
.dish {
    display: grid;
    grid-template-columns: 250px;
    grid-template-rows: 275px 40px 40px 40px;
    height: 415px;
}
.dish h3 {
    grid-row: 2 / 3;
    padding-bottom: 5px;
    grid-column: 1 / 2;
}
.dish img {
    width: 265px;
    grid-row: 1 / 2;
}
.dish p {
    grid-row: 3 / 4;
}
.rating {
    grid-row: 4 / 5;
}
.dish p, .rating, .dish h3 {
    padding: 10px 10px 20px 15px;
}
#logo {
    top: -8px;
    left: -275px;
    width: 80px;
    height: 100px;
    padding: 20px 20px 0px 10px;
}
#logo svg {
    padding-top: 10px;
}
#profile {
    top: -1px;
    left: 905px;
    transition: all .7s ease-in-out;
    padding: 20px 37px 18px 25px;
    height: 75px;
}
main {
    width: 1280px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 120px 200px;
}
#details {
    grid-row: 1 / 2;
    grid-column: 1 / 5;
    background-color: var(--dkgray);
    color: var(--teal);
}
#details dl {
    align-items: center;
    width: 1280px;
    height: 80px;
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    justify-content:start;
}
#details dt {
    padding: 0;
}
#ingredients {
    grid-row: 2 / 4;
    grid-column: 1 / 2;
}
#directions {
    grid-row: 2 / 4;
    grid-column: 2 / 5;
    padding-right: 10px;
}
.rating {
margin-top: 10px;
}

/* #region || footer 1280px */
footer {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
#social {
    width: 600px;
}
#social ul {
    grid-template-columns: repeat(4, 150px);
}
#copyright {
    justify-self:left;
    display: grid;
    grid-template-columns: 175px 50px;
    grid-template-rows: 200px;
}
#copyright p {
    grid-column: 2 / 3;
    grid-row: 1/ 2;
    align-self:flex-start;
    padding-top: 30px;
    padding-left: 0;
}
#copyright img {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
/* #endregion || footer 1280 */
}
/* #endregion || 1280px */

/* #region || Print Media Query */
/*
50 POINTS EXTRA CREDIT (optional)
Add a media query for print.

Watch LinkedIn Learning's CSS:Print Style SheetsLinks to an external site.
Add @media print styles to your CSS

0.5 inch margins
serif font(s)
Images set not to display OR at grayscale
Do not display the nav
Replace hyperlinks with their full URL (when applicable)
Limit print to 1 page
*/
@media print {
    nav, menu, img, svg {
        display: none;
    }
    #search {
        display: none;
    }
    html {
        background-color: #ffffff;
        width: fit-content;
    }
    body {
        font-family: Georgia, 'Times New Roman', Times, serif;
        color: #000000;
        display: block;
        width: auto;
    } 
    body, aside, header, main {
        background-color: #ffffff;
        width: auto;
    }
    .rating dd {
        visibility: visible;
        height: auto;
        width: auto;
    }
    header, footer  {
        display: block;
        background-color: #ffffff;
    }
    #copyright, #ingredients, #directions, #social, #details {
        display: block;
    }
    .rating, .dish {
        display: block;
    }
    #social ul {
        grid-template-columns: repeat(4, 1fr);
    }
    #details dl {
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(5, 1fr);
        width: auto;
        grid-auto-flow: column;
    }
    #ingredients ul {
        columns: 2;
    }
    a[href]::after {
        content: " (" attr(href) ") ";
        font-size: 12px;
    }
    #social a {
        flex-direction: column;
    }
    h1 {
        margin-top: auto;
    }
    #side-dishes {
        grid-template-rows: none;
        grid-template-columns: repeat(4, 1fr);
    }
    /* Typography */
    h1, h2, h3 {
        font-size: 14px;
    }
    
    footer, p, dd, li, nav, input, dt, a {
        font-size: 12px;
    }
    #social li, #social a {
        font-size: 12px;
        color: #000000;
    }
    #copyright p {
        font-size: 12px;
        width: auto;
    }
    @page {
        margin: 0.5in;
    }
    #copyright {
        float: left;
    }
}
/* #endregion || Print Media Query */