/* reset */ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}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:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* new stuff below */

.contact {margin-left: 4em;
margin-bottom:5em;}
.diagram img {display:flex;
max-width:100%;}

section, footer div {width:80%;
margin:auto;}

footer {padding: 2em;
background-color: #A3BAFF;
font-family: Georigia, serif;}

\m}

header a:link, header a:visited {text-decoration:none;
color: black;}

header a:hover, header a:focus {text-decoration: underline;
color:#747E7E;}

header h1 {display: inline; font-size: 2.8em; font-family: Garamond, serif;}

header h2 {display: block; 
font-size: 1.5em; 
font-family: Garamond, serif;
margin-top: .7em;}

header p {display: block;
font-size: 1em;
font-family: Verdana, sans-serif;
margin-top: .5em;}

section, section h1, section h2, p {font-family: arial;}

section h1, section h2, p {margin-bottom: 1.35em;}

section h1 {font-family: Georgia, serif; font-size: 6em;}

@media screen and (max-width: 992px) 
{

h1 {font-size: 2em;
text-align: center; 
margin-top: 1em; 
margin-bottom: 1em;
}

h2 {
font-size: 2.5em;
text-align: left; 
margin-top: 1em; 
margin-bottom: 1em;}

p, li {font-size:1.25em;
line-height:2em;
margin-top: 2em;
margin-bottom: 1.5em;
margin-left: 2em;
margin-right: 2em;}

.flex {display: block;
margin-left: 3em;
margin-right: 6em;
margin-bottom: 2em;}

.flex {display: block;
margin-left: 3em;
margin-right: 6em;
margin-bottom: 2em;}}

@media screen and (max-width: 600px) 
{

.flex img {display:block;}

h1 {font-size: 1.5em;
text-align: center; 
margin-top: 1em; 
margin-bottom: 1em;}

h2 {
font-size: 2em;
text-align: left; 
margin-top: 1em; 
margin-bottom: 1em;}

p, li {font-size:1em;
line-height:2em;
margin-top: 2em;
margin-bottom: 1.5em;
margin-left: 1em;
margin-right: 1em;}
}

h3 {font-size: 3em;
margin-bottom: 1em; margin-left: 1em;}

p {font-size:1.25em;
line-height: 1.45em;
margin-left:1.5em;
margin-right:1.5em;}

li {line-height: 2em;}

img {display:block;
width:300px;
margin:auto;
margin-bottom}

.flex {display: flex;
margin:1em;}

.flexpics img {float:left;
margin: 1em;}

@media (max-width: 600px) {
  .flex {
    display: block;
  }
}


/* debug stuff */

/* debug stuff */


/* Adapted from https://codepen.io/mutedblues/pen/MmPNPG */

body {
  margin: 0;
}

header {
  display: flex;
  width: 100%;
  background-color: aliceblue;
}

header > * {
/*   flex-grow: 1; */
}

header h1 {
  margin-left: 1rem;
}

header a {
  text-decoration: none;
}

/* "Hide" checkbox -- moves it off screen*/
#menu-btn {
  position: absolute;
  top: -100%;
  left: -100%;
}

/* Hide hamburger for bigger screens */
.menu-icon {
  visibility: hidden;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 250px;
  margin-right: 2rem;
}


/* Set width for mobile/smaller screen size. */
/* I set it big here so I don't have to shrink the screen so much */
/* for testing purposes */
@media screen and (max-width: 2000px) {
  
  header {
    display: grid;
    grid-template-areas:
       "title   title   hamburger"
       "nav     nav     nav";
  }
  
  h1 {
    grid-area: title;
  }
  
  .menu a {
    text-decoration: none;
    color: black;
  }

  .menu-btn {
    display: none;
  }

  .menu-icon {
    grid-area: hamburger;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding: 30px 20px 30px 0;
    position: relative;
    user-select: none;
    visibility: visible;
  }

  .navicon {
    background: #333;
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
  }

  .navicon:before {
    top: 5px;
  }

  .navicon:after {
    top: -5px;
  }

  .navicon:before, .navicon:after {
    background: #333;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    transition: all .2s ease-out;
  }

  .menu {
    grid-area: nav;
    max-width: unset;
    max-height: 0;
    transition: max-height .2s ease-out;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }

  .menu a {
    padding: 20px 20px;
    border-right: 1px solid #f4f4f4;
    background-color: #eee;
    width: 100%;
    text-align: center;
  }

  .menu-btn:checked ~ .menu {
    max-height: 240px;
  }

  .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }

  .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }

  .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }

  .menu-btn:checked ~ .menu-icon .navicon:before,
  .menu-btn:checked ~ .menu-icon .navicon:after {
    top: 0;
  }
}