body{
		background-image:url("narrative.png");
		background-repeat: no-repeat;
		background-position:center;
		background-attachment:fixed;
		background-size:cover;
		background-color: #EDF2D9;
		margin: 30px 50px;
		color: #8B6F59;
		font-family: 'Fredericka the Great', cursive;
		font-size: 30pt;
		line-height: 1.4;
}
/*html{
box-sizing: border-box;  padding won't affect element width 
}*/

h2{
	    text-align: center;
}

header{
		background-color: #c2e4e7;
		text-align: center;
		border-color: #0e1736;
	border-radius: 70px;
	border-width: 7px;
	border-style: ridge;
}


footer{
background-color: #c2e4e7;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
			
		border-color: #483c3c;
	    border-radius: 110px;
	    border-width: 6px;
	    border-style: inset;

	    margin-top: 1rem;
	    padding: 15px;
	    opacity: 0.95;
	    color #E3E3DB;
	    text-align: center;
}

footer a{
		color: lightgreen;
}

.wrapper{
display: grid;
grid-gap: 20px;

}

.boxes{
grid-area: boxes;
 background-color: #4e5c54;
    color: #444;
height: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 15px;
opacity: 0.95;
 border-color: #483c3c;
 border-radius: 12px;
 border-width: 6px;
 border-style: inset;
/* We can put things at the start, end, middle or spaced out */
justify-content: space-evenly; 
align-content: start;
/* align-content: flex-start; */

}

.box{
        background-color: #748684;
        border-color: #483c3c0;
        border-radius: 25px;
		border-width: 4px;
		border-style: double;
        margin: 5px;
        padding: 20px;
		border-color: #ae8840;
 border-radius: 12px;
 border-width: 6px;
 border-style: inset;

		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right:10px;

		font-family: 'Peddana', serif;
		font-size: 30px;
		font-weight: bold;
		width: 800px;
height: 200px;

}
.pic{
        background-color: #748684;
        border-color: #483c3c0;
        border-radius: 25px;
		border-width: 4px;
		border-style: double;
        margin: 5px;
        padding: 20px;
		border-color: #ae8840;
 border-radius: 12px;
 border-width: 6px;
 border-style: inset;

		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 10px;
		margin-right:10px;

		font-family: 'Peddana', serif;
		font-size: 30px;
		font-weight: bold;
		width: 200px;
height: 200px;
}
.button {
  border-color: #ae8840;
 border-radius: 12px;
 border-width: 6px;
 border-style: outset;
  color: #8B6F59;
  padding: 15px 32px;
  width: 24.1%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 40px;
  margin: 4px 2px;
  cursor: pointer;
  opacity: 0.95;
  font-family: 'Fredericka the Great', cursive;
  font-weight: bold;

}
.button1 {background-color: #2AC0DA;}
.button1:hover {background-color: #c2e4e7;}
.button2 {background-color: #2AC0DA;}
.button2:hover {background-color: #c2e4e7;}
.button3 {background-color: #2AC0DA;}
.button3:hover {background-color: #c2e4e7;}
.button4 {background-color: #2AC0DA;
}
.button4:hover {background-color: #c2e4e7;}

/*img {
align-self: flex-end;
order: 4;
}
*/
 
p {
font-size: 30pt;
}
.gameDemoArea{
/*background-color: red;*/
display: grid;
grid-gap: 20px;
grid-template-areas:
'myProcess myProcess'
'boxes boxes'
;
}
.main-nav ul{

display: grid;
margin-top: 1px;
grid-gap: 20px;
padding: 0;
list-style: none;
grid-template-columns: repeat(4, 1fr);
text-align: center;
}
.main-nav a{
	border-color: #ae8840;
	background-color: #2AC0DA;
 border-radius: 12px;
 border-width: 6px;
 border-style: outset;
  color: #8B6F59;
/*background: var(--box);*/
display: block;
text-decoration: none;
padding: 0.8rem;
text-align: center;
/*color: var(--pColor);*/
text-transform: uppercase;

font-size: 1.1rem;
/*box-shadow: var(--shadow);*/
}
.main-nav a:hover{
background-color: #c2e4e7;
/*color: white;*/
}
.main-nav b{
	border-color: #ae8840;
	background-color: #FABF18;
 border-radius: 12px;
 border-width: 6px;
 border-style: outset;
  color: #8B6F59;
/*background: var(--box);*/
display: block;
text-decoration: none;
padding: 0.8rem;
text-align: center;
/*color: var(--pColor);*/
text-transform: uppercase;

font-size: 1.1rem;
/*box-shadow: var(--shadow);*/
}
.main-nav b:hover{
background-color: #c2e4e7;
/*color: white;*/
}
.main-nav .icon{
	display: none;

	}
.captions{
	/*background-image:url("boxes.jpg");*/
background-color: #4e5c54;
padding: 15px;
opacity: 0.95;
 border-color: #ae8840;
 border-radius: 12px;
 border-width: 6px;
 border-style: inset;
grid-area: captions
}
.teamText{
		/*background-image:url("boxes.jpg");*/

background-color: #4e5c54;
padding: 15px;
opacity: 0.95;
 border-color: #ae8840;
 border-radius: 12px;
 border-width: 6px;
 border-style: inset;
grid-area: teamText;
}

.myProcess{
background-color: #4e5c54;
padding: 15px;
opacity: 0.95;
 border-color: #ae8840;
 border-radius: 12px;
 border-width: 6px;
 border-style: inset;
grid-area: myProcess;

}
/* In this section we define how we want the page to change at different screen sizes */

@media (max-width: 500px) { /*makes the hamburger icon show up on small screens to show and hide buttons*/

	.main-nav li {
    display: none;
  }
	
	.main-nav .icon{
	display: block;
	position: absolute;
    left: 1;
    top: 0;
	}
	
  .centerHolder{
  grid-template-columns: 1fr;
  }
  .main-nav ul{
	grid-template-columns: 1fr; /*fill screen with one fraction*/
	}
  
  .main-nav.responsive li {
 	display: inline;
 	text-align: center;
    background-color: #3AADF1;
  }
}
.contact {
	    font-size:12pt;
		font-weight: bold;
	    text-align: center;
         }