/* ======================= START BASIC NAVIGATION FUNCTIONALITY =================================== */

nav ul {list-style-type: none;}
/* Hide menu bullets by default */


button {
  padding: 0 !important;
  background-image: url(bgimg/hamburger.svg);
  background-size: contain;
  height: 1rem;
  width: 1rem;
}
/* Remove default browser button styles to properly 
enable text-indent: 100% in .hide-text image replacement */


ul#menu {
 display: none;
}
/* Hide drop down menu by default when page loads */


ul#menu.show-nav {
  display: block !important;
}
/* force the navigation to display on click  */


#menu.show-nav {
	position: absolute;
    /* menu is on a layer, above normal page context: won't disrupt page when it appears */
	z-index: 10;
    /* layer 10: above everything else (random positive number) */

}
/* position the drop down menu when it displays */


#menu.show-nav li {
	margin: 0;
    padding: 0;
}


/* ======================= END BASIC NAVIGATION FUNCTIONALITY =================================== */




/*
OLD SCHOOL IMAGE REPLACEMENT TECHNIQUE
.HIDE-TEXT FOR IMAGE REPLACEMENTS
SEE: HTTP://WWW.ZELDMAN.COM/2012/03/01/REPLACING-THE-9999PX-HACK-NEW-IMAGE-REPLACEMENT/
*/
.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }

ul.show-nav {
  width: 200px;
  background-color: aliceblue;
  padding: 2rem 1rem 1rem 1rem;
  position: relative;
  right: 40px;
  box-shadow: 5px 5px 10px gray;
}

.primary-navigation {
        display: flex;
        justify-content: end;
        padding: 4px;
    }

button:hover {
        cursor: pointer;
        }

p {
  margin: 1em 0em 0em 0em;
  font-family: Roboto;
}

a.readmore {
  position: relative;
  top: 10px;
  font-family: Roboto;
}

body.egyptbody {
  background-color: bisque;
}

figure {
  margin: 1rem auto;
  box-shadow: 5px 5px 10px gray;
}
svg.jan {
  padding: 1rem 1rem 1rem 1rem;
  width: 300px;
  position: relative;
  right: 20px;
}
figcaption {
  padding: 1rem 1rem 0.5rem 1rem;
}
    h1,h2,h3,h4,h5,h6 {
      font-family: Roboto;
      font-weight: 600;
      text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.351);
    }
    h1 { font-size: 2em;}
    h2 { font-size: 1.7818em; margin-top: 1rem;} 
    h3 { font-size: 1.5874em; margin-top: 1rem;}
    h4 { font-size: 1.4142em; margin-top: 1rem;}
    h5 { font-size: 1.2599em; margin-top: 1rem;}
    h6 { font-size: 1.1225em; margin-top: 1rem;}
    body {
      margin: 1rem 0rem 0rem 0rem;
      padding: 2rem 1rem 1rem 1rem;       
    }


 header {
       margin: 1rem 0rem 0rem 0rem;
      padding: 2rem 1rem 1rem 1rem; 
      background-color: white;
      box-shadow: 2px black;

 }
    main {
      margin: 1rem 0rem 0rem 0rem;
      padding: 2rem 1rem 1rem 1rem;

    }
    aside {
      margin: 1rem 0rem 0rem 0rem;
      padding: 2rem 1rem 1rem 1rem;
    }
    footer {
      margin: 1rem 0rem 0rem 0rem;
      padding: 2rem 1rem 1rem 1rem;
    }
    /* 16 pixels = 1rem = height of letter m of root element */
    /* root element (ex: html tag) never changes */
    /*EM vs REM = em is in the size of the current tag */
    /* REM is root element m size = never changes*/
    /* EM is your tag's text size */    

    #Layer_1 {
      width: 32px;
    }

    section.athens,section.egypt,section.today {
      border: 1px solid #444;
      max-width: 300px;
      margin: 2rem 1rem 1rem 1rem;
      padding: 2rem 1rem 2rem 1rem;
      border-radius: 12px;
    }

    form {
      background-color: rgb(255, 232, 192);
      border: 1px solid #444;
      max-width: 300px;
      margin: 2rem 1rem 1rem 1rem;
      padding: 2rem 1rem 2rem 1rem;
      border-radius: 12px;
      font-family: Roboto;
    }

        fieldset {
        margin: 1rem;
        padding: 0em 0.4em 0.4em 0.4em;
        border: 1px solid #444;
        position: relative;
        left: -10px;
    }
    

    label,legend,input {
      padding: 0.2em 0.2em 0.2em 0.2em;
      margin: 1em auto;
    }

    section.athens {
      background-color: #9fe9ff;
    }

    section.egypt {
      background-color: rgb(255, 145, 145);
    }

    .dropcap {
  float: left;
  font-size: 40px;
  line-height: 15px;
  padding-top: 8px;
  padding-right: 3px;
  padding-left: 3px;
}