/*----------------------------------------------------------------------------------*/
/*CSS for mobile (320px-960px)*/
@media (min-width:320px)  
{
    .wrapper
    {
        display: grid;
        grid-template-columns:repeat(6, 1fr);
        grid-auto-rows:auto;
    }
    header
    {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 1;
        grid-row-end: 4;
        /*font-family: Helvetica, sans-serif;*/
        text-align: left;
        line-height: 2em;
        padding: 1em;
        background-color:white;
    }
    .navMenu
    {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 4;
        grid-row-end: 5;
        z-index: 1000;
        position: sticky;
        top: 0;
        padding: 1em;
        background-color:white;
    }
    main
    {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-template-rows: auto;
        background-color:white;
        text-align: left;
        padding: 1.5em 3em 1.5em 3em;
    }
    footer
    {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-template-rows: auto;
        padding: 1.5em 2.5em 1.5em 2.5em;
        background-color:whitesmoke;
    }
}
/*----------------------------------------------------------------------------------*/
/*CSS for desktop (960px+)*/
@media (min-width:960px)
{
    .wrapper
    {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows:auto;
    }
    header
    {
        grid-column-start: 2;
        grid-column-end: 6;
        grid-row-start: 1;
        grid-row-end: 4;
        /*font-family: Helvetica, sans-serif;*/
        background-color: white;
        text-align: left;
        line-height: 2em;
        padding: 1em; 
    }
    .navMenu
    {
        grid-column-start: 2;
        grid-column-end: 6;
        grid-row-start: 4;
        grid-row-end: 5;
        z-index: 1000;
        background-color: white;
        position: sticky;
        top: 0;
        padding: 1em; 
    }
    main
    {
        grid-column-start: 2;
        grid-column-end: 6;
        grid-template-rows: auto;
        background-color:white;
        text-align: left;
        /*padding: 3em 4.5em 3em 4.5em;*/
    }
    footer
    {
        grid-column-start: 2;
        grid-column-end: 6;
        grid-template-rows: auto;
        background-color:whitesmoke;
        padding: 2em 3em 2em 3em;
    }
}
/*----------------------------------------------------------------------------------*/
/*CSS for elements unaffected by screen size.*/
site-header {
    display: contents;
}

site-footer {
    display: contents;
}

@font-face {
    font-family: 'chomskyregular';
    src: url('chomsky-webfont.woff2') format('woff2'),
         url('chomsky-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
img 
{
    max-width: 100%;
    height: auto;
}
h1
{
    font-size: 3rem;
}
h2
{
    font-size:  2.2rem;
}
h3
{
    font-size: 1.5rem;
}
h1, h2, h3
{
    font-family: 'chomskyregular', serif;
    font-weight: 700;
    /*line-height: 1.2;
    margin: 1em 0 0.5em;*/
}
body
{
    background-image: linear-gradient(#A7D2CB, #F2D388, #C98474, #874C62);
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    /*color: #333;*/
    /*background-color: #fff;*/
    margin: 0;
    padding: 0;
}

.navButton
{
    border:none;
    border-radius: 16px;
    color: black;
    background-color: inherit;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
}
    .navButton:hover
    {
        background-color: lavender;
        cursor:pointer;
    }

/*a, a:hover, a:focus, a:active
{
  text-decoration: none;
  color: inherit;
}*/

video {
    width: 100%;
    height: auto;
    display: block;
}

/* Style The Dropdown Button */
.dropButton {
    border:none;
    border-radius: 16px;
    color: black;
    background-color: inherit;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropButton {
  background-color: lavender;
}