body {
    font-family: 'Montserrat', sans-serif;

    font-size: 18px;
    font-weight: 300;
    margin: 0;
    
}

/* Header Stuff Here*/
header {
    background-color: #337c82;
    padding: 1.5rem 2%;   
}

header h1 {
    margin: 0;
    color: #FFFFFF;
}

header p {
    margin: 0;
    color: #FFFFFF;
    letter-spacing: 1.25px;
}

/* nav stuff goes here */
nav {
    background-color: #cbe1d5;   
    
    
}
nav ul{
   list-style-type: none; 
    padding: 0 .1%;
    margin: 0;
    display: flex;
    
}


/* Wayfinding You could just do nav a below if you choose */
/* use padding and NOT margin to make sure the entire block is clickable and NOT just the text */

nav ul li a {
    font-size: 1.3rem;
    text-decoration: none;
    color: #337c82;
    font-weight: 700;
    display: block;
    padding: .83rem 2rem;
}

nav li.active a {
    background-color: #cbe1d5;
    color: #ffffff;       
}

nav a:hover {
    color: #fff;
}


/* stuff for the main */
main {
    padding: 1rem 2%; 
}

main h1 {
  color: #919a63; 
    margin-top: 0;
    margin-bottom: 1rem;
    }

main h2 {
  color: #919a63;  
    margin-bottom: .2rem;
}

main p {
    color: #000000;
    margin: 0 0 1rem 0;
}

main ol {
    margin: .5rem;
    padding: .5rem 3%;
    width: 12rem;
    background-color: #919a63;
    color: #ffffff;
    border: 1px solid #919a63;
    border-radius: 5px; 
    list-style-type: circle;
    
}

main dl dt {
    color: #337c82;
    font-weight: 700;
    margin-top: 0;
        
}

main dl dd {
    color: #337c82;
    font-size: .97rem;
}

main ul {
    list-style-type: disc;
}

/* to control the distance between two lines of the same paragraph, use line height. to control the distance between two separate items in the list use margin-bottom */

main ul li {
    line-height: 110%;
    margin-bottom: .5rem;
    font-size: .98rem;
}

/* to change the padding do NOT use px but instead divide the pixel number you want by the set font size and that will give you the rem number */

/* border radius rounds the corners really rounded would be good for a button though */

main address {
    font-style: normal;
    background-color: #919a63;
    color: #ffffff;
    padding: .5rem;
    width: 12.5rem;
    border: 1px solid #919a63;
    border-radius: 5px;
}

main a {
    color: #919a63;
    
}

main a:hover {
    color: #337c82;
  }

/* footer stuff here */

footer {
    background-color: #cbe1d5;
    text-align: center;
    color: #337c82;
    padding: 1rem 0;
    font-size: .87rem;
}

footer a {
  color: #337c82;  
    
}

footer a:hover {
    color: #ffffff;
    
}