/* 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;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
/* 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;
}

*, *::before, *::after {
    box-sizing: border-box;
}
/*---------- End Reset ---[--------------*/
/*--- Start mobile Layout -----*/

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    height: auto;
    background-color: rgba(0,0,0,.1);
    background-image:url(../images/bg400.png)
}


/*---  Typography Start -----*/

h1, h2, h3 {
    font-family: 'Vollkorn', Arial, Verdana, serif;
    font-size: 1.25rem;
}

footer li , h1 ~ p, aside h2 + p, figcaption, dl {
     font-size: 1rem;
}

nav h2, div h2, address li:first-child {
    font-weight: 900;
    font-size: 1.3rem;
}
header li a{
    font-size: 1.5rem;
}
aside h2, aside p, figcaption, section:nth-of-type(2), footer p {
    text-align: center;
}
/*---  Typography End -----*/

/*---  Background Color Start -----*/

header, footer {
    background-color: #9c5509;
}

section, header input {
    background-color: #F9ECC0;
}

aside, aside section {
    background-color: #fcc164;
}
footer {
    color: #fff;
}


 main h1, main h2, figcaption, aside h2, aside h2 + p {
    color: #8B0000;
}
/*---  Background Color Start -----*/

/*---  Layout Start -----*/

/*---  Logo Start  -----*/
header a img {
    display: block;
    width: 50%;
    height: auto;
    margin: 0.8em auto 0 auto;
}
/*---  Logo End -----*/

/*---  Menu Start  -----*/
   
header nav ul {
    overflow:hidden;
}

header ul {
    cursor: pointer;
    max-height: 0;
    transition: max-height .2s ease-out;
}

header nav li a {
   
     display:block;
     padding: 0.5em;
}
nav ul a:link, nav ul a:visited{
    color: #fff;
}
nav ul li a:hover{
    background-color: #f4f4f4;
    border-radius: 10px;
    color: #000;
}

nav ul a:active {
    color: #8B0000;
}
nav ul a:focus {
    background-color: #f4f4f4;
    color: #8B0000;
}

    /*---  Menu Start  -----*/
    /*---  Menu Btn Start -----*/
    header input {
    appearance: none;
    cursor: pointer;
    border: 0.125em solid #fff;
    padding: 0.5em;
    border-radius: 0.25em;
    margin: 0 0 0.8em 1em;
}

input::before {
    content: " ";
    content: "Open Menu";
}
input:checked::before {
    content: " "; 
    content: "Close Menu";
}

header input:checked ~ nav ul {
    max-height: 360px;
}
header input:hover {
    background-color: #f4f4f4;
    color: #000;
    border-radius: 10px;
}


/*---  The Main Start  -----*/

picture img, .cotainer, section img {
    width: 100%;
    height: auto;
}

h1{
   padding: 0.625em 1.875em;
}
    
h1 ~ p {
     font-weight: 300;
     padding: 0.3em 1.875em 1.25em 1.875em;
     line-height: 1.3em;
}
h2, address li:first-child { 
     letter-spacing: 0.2em;
     padding: 0.6em 0 0;
}
    
figcaption {
     padding-bottom: 1em;
}

figure img {
     border-radius: 1.125em;
     width: 50%;
   
}
/*---  The Main End  -----*/

/*---  Side Bar Start  -----*/

aside img {
     width: 90%;
     padding: 2em 0 3em 0;
}

aside section {
     margin: 0.5em auto;
     width: 240px;
}

aside section h2{
     grid-column: 1 / -1;  
}

aside section dl {
     display: grid;
     grid-template-columns: 100px 150px;
     width: 210px;
     line-height: 2;       
}
/*---  Side Bar End  -----*/

/*---  Footer Start  -----*/

footer nav{
     width: 230px;
     margin: 0 auto;  
}

footer nav h2, footer div h2, footer address li:first-child {
     padding: 1em;
}

footer nav ul li {
     padding-bottom: 1em;
}

footer nav ul li a {
     padding: 0.8em;
     border-radius: 10px;
}

footer div {
     width: 260px;
     margin: 0 auto;
}

footer div dl {
     display: grid;
     grid-template-columns: 100px 150px;
     width: 210px;
     line-height: 2;       
}

footer address {
     width: 260px;
     margin: 0 auto;
}

footer address li {
     padding: 0.5em;
 
}

footer p{
    margin: 0.8em auto;   
}
/*---  Footer End  -----*/

/*---  Layout End -----*/
/*--- End mobile Layout -----*/

/*--- Start Media Query for Tablet and Desktop Layout -----*/

@media (min-width: 750px) {

    /*---  Typography Start -----*/

    header li a {
         font-size: 1.5rem;
    }

    section:nth-of-type(1) h1 { 
        font-size: 1.8rem;
    }

    section:nth-of-type(1) h1 ~ p {
        font-size: 1.22rem;
    }

    figcaption {
        font-size: 1.2rem;
    }

    aside h2, aside section h2 {
       font-size: 1.25rem;
    }

    aside h2 span, aside p {
        font-size: 0.8rem;
    }

    section:nth-of-type(2) h2 {
        font-size: 1.7rem;
    }

    section:nth-of-type(1) h1, aside h2 {
        text-align: center;
    }

    /*---  Typography End -----*/

    /*---  Layout Start -----*/
    .cotainer {
        display: grid;
        grid-template-columns: auto 34%;
        grid-gap: 0.5em;
        max-width: 960px;
        margin: 0 auto;
    }

    header, picture, main, footer {
        grid-column: 1 / -1;
    }

    header {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
    }
    
    header a img {
        grid-column: 1 / 2;
        width: 12rem;
        margin: 0.5em
    }
           
     input {
        display: none;
     }

    header ul {
        
        max-height: none;
        display: flex;
        justify-content: space-evenly;
    }

    /*---  The Main Start  -----*/
    main {
        grid-column: 1 / 2;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 0.5em;
    }

    section:nth-of-type(1) p img {
        display: block;
        width: 300px;
        margin: 0 1em 1em 0;
        float: left;
    }

    section:nth-of-type(1) h1 {
        padding: 1em 0;
    }

    section:nth-of-type(1) h1 ~ p {
        line-height: 1.3;
        margin: 0 2em;
    }

    section:nth-of-type(2) {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: auto 1fr;
    }

    section:nth-of-type(2) h2 {
        grid-column: 1/ -1;
    }

    figure img {
        width: 55%;
        border-radius: 3.125em;
    }
    /*---  The Main End  -----*/

    /*---  Side Bar Start  -----*/
    aside {
        grid-column: 2 / 3;
        padding-top: 0.5em;
    }

    aside h2 {
       padding-top: 1em;
        
    }

    aside img {
      width: 70%;
    }
    /*---  Side Bar End  -----*/

    /*---  Footer Start  -----*/
    footer{
      padding: 1em;
    }

    footer nav {
      float: left;
       
    }

    footer div {
      margin: 0 auto;
    }
  
    footer address {
      float: right;
      width: 190px;
      text-align:left;
    }
    /*---  Footer End  -----*/

    /*---  Layout End -----*/
}
/*--- End Media Query for Tablet and Desktop Layout -----*/