/*  Colour Palette*/
:root{
        --bg: #87A96B;
        --text: #2e3b2c;
        --accent :#c5e86c;
        --hdr-ftr: #6b4226;

     }


/* Universal Styles */
/* This sets the font size at the highest level of the dom (the root). 16px = 1rem - based on the default font size - 1rem = 16, 2rem = 32, 3 rem = 48, 4 rem = 64, 72, 88, etc */
html {
    font-size: 16px;
    height: auto;
}

body> p{
    max-width: 80ch;
}
body {
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--bg);
    color: var(--text);
}

.sr-only {
    position: absolute;
    left: -9999px;
    top:  -9999px;
    visibility: hidden;
}

.flexed {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}
/* Typographical Styles */

article.html >.image-container img{
    font-size: 1.25rem;
    line-height: 1.6;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-bottom: 1rem;

}
/* Utility Styles */
header{
    height: 6rem;
}


header, footer {
    background-color: var(--hdr-ftr);
    color: var(--accent);       /* Base styles of the Boilerplate */
    text-align: center;
    line-height: 5rem;
}

footer {
    bottom: 0;
    left: 0; 
    width: 100%;
}

.content{
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
    width: 100%;
}

.image-container{
    width: 70%;
    margin: 0 auto;
    padding: 1rem;
}
h2,h3, p{
    text-align: center;
 max-width: 95ch;
    margin: 0 auto;
}

.inner-container{
    border: 1px solid #000;
    width: calc(100 / 2);
    padding: 1rem;
    margin: 1rem;
    background-color: var(--bg);
}

article{
    border: 1px solid #000;
    padding: 1rem;
    margin: 1rem;
    background-color: var(--accent);
}
.banner{
    background-image: url(img/avocado-banner.avif);
    background-repeat: no-repeat;
    background-size: auto;
    width: 100%;
    position: relative;
}

.banner h1 {
      font-size: 6rem;
      margin: 0;
      color: var(--bg);
    }

.banner h3 {
      font-size: 2rem;
      margin: 10px 0 0;
        color: var(--bg);
    }
.veil{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Black with 40% opacity */
    color: white; /* Text color */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
}

.container{
     border: 1px solid #000;
    padding: 1rem;
    margin: 1rem;
    background-color: var(--accent);
}

.btn{
    background-color: var(--hdr-ftr);
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
/* Navigation */
nav{
    padding: 0.5rem 1rem;
    position: relative;

}
button{
    color: aliceblue;
}
.toggle-btn{
    background-color: unset;
    border: none;
    cursor: pointer;
    font-size: 1rem;

}
.toggle-btn svg{
    width: 2rem;
    display: block;
}
.menu{
   position: absolute;
   top: 2rem;
   left: 0;
   transform: none;
   background-color: var(--hdr-ftr);
   width: 100%;
   margin-top: 4rem;
   /*reset the .flexed from row to column*/
   flex-flow: column nowrap;
   justify-content: center;
   color: var(--text);
}

div.video-link img{
    width: 720px;
    height: 90px;
    justify-content: center;
    display: block;
    margin: 0 auto;
}

.footer-ad img{
    width: 250px;
    height: 250px;
    justify-content: center;
    display: block;
    margin: 0 auto;
}
.
/* Hides the content of the dropdown */
.collapsed {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
/* When the toggle activates it will swap in the class expanded */
.expanded {
    max-height: unset;
    opacity: 1;
    visibility: visible;
}

 a{
    padding: 0.5rem 1rem;
    margin-right: 0.5rem;
}

button:link, button:visited
, a:link,  a:visited {
    color: var(--bg);
}

button:focus, button:hover, button:active,
a:focus, a:hover, a:active {
    color: var(--accent) ;
}

/* Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport  */
/* Media Queries */
@media screen and (min-width: 760px) {
.hamburger{
    display: none;
}   
.collapsed,
.expanded{
    max-height: unset;
    opacity: 1;
    visibility: visible;
}
.menu{
    position: static;
    width: unset;
    margin-top: 0;
    flex-flow: row wrap;
    justify-content: flex-end;
}
 a:focus, a:hover, a:active{
    text-decoration: underline;
 }
}


@media screen and (min-width:900px){
    .outer-container{
        display: flex;
        flex: 1 1 250px;
    }

    article.html> .inner-container > img{
        width: calc(100% / 3);
    }
}