@charset "utf-8";

* {box-sizing: border-box;}

img { max-width: 100%;
    height: auto;
    border-radius:  25%;
}

body {
	background-color: #FFFFFF;
	margin: 0;
}


header { background-color: #008542;
		padding: 1em;
		border-top: 10px #D0C32C double;
		border-bottom: 10px #D0C32C double;
		margin: 0;
		grid-area: header;
}

nav {
	background-color: #584528;
	font-size: 2em;
	color: #FFFFFF;
	padding:  1em;
}


article {
	background-color: white;
	padding: 1em;
	margin-left: 2em;
	margin-right: 2em;
}


footer {
    background-color: #B71234;
    font-size:  1em;
    padding-left: .5em;
	  padding-top: .5em;
	  padding-bottom: .5em;
    border-top: 10px #D0C32C double;
    border-bottom: 10px #D0C32C double;
    margin: 0;
    grid-area: footer;
    text-align: left;
    color: #FFFFFF;
 }


h1 {font-size: 3em;
		color: #00611C;
		text-align: center;
		}
		
h2 {font-size: 2em;
		color: #008542;
		}

h3 {font-size:  1.5em;
margin-left:  100px;
margin-right:  100px;}

h4 {font-size:  1.1em;
margin-left:  100px;
margin-right:  100px;}


.upscale { font-size: 1.2em }

.responsive {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

 .indentation {margin-left: 100px;
	margin-right: 100px}

.center { text-align: center; }


.flex { display: flex; 
		flex-direction: column; 
		flex-wrap: wrap;
		align-items: center;
		} 
		
.fullrow { flex-basis: 100%;}

.floatleft { float: left;
	padding-right: 1em;
	padding-bottom: 1em;}

.floatright { float: right;
	padding-left: 1em;
	padding-bottom: 1em;}

.column {
  float: left;
  width: 20%;
  padding: 5px;
}


.row::after {
  content: "";
  clear: both;
  display: table;
}

@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

a:link { color: #FFFFFF;
	text-decoration: none;
	padding-left: .5em;
	padding-right: .5em; }

a:visited { color: #9B9B9B;
	text-decoration: none;
	padding-left: .5em;
	padding-right: .5em }

a:hover { color: #B71234;
	padding-left: .5em;
	padding-right: .5em}

@media (min-width: 60em) { /*OPEN MEDIA QUERY*/}

.flex { display: flex; 
		flex-direction: row; 
		flex-wrap: wrap;
		justify-content: center;
		}

 
 .floatleft { float: left;
 	padding-right: 1em;
 	padding-bottom: 1em; }
 
 .clearfloat { clear: both; }