@charset "utf-8";
/* CSS Document */
* {
    box-sizing: border-box;
}
body {
  font-size: 100%;
}

a {
	color:blue;
	}
h1 {
	color:#003366
	}
	
h2	{
	text-align: left;
	color:#2874A6;
	}
.grid {
	display:grid;
	
	grid-template-columns:10% 40% 40% 10%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;

	grid-template-areas:
		". nav nav ." 
		". title title ." 
		". back-button back-button .";				 
	}
	
.nav	{
	grid-area: nav;
	background-color: black;
    overflow: hidden;
    color:white;
    display:inline;
}

.title {
	grid-area: title;
	padding: 0px; 
	margin:auto;
}

.back-button	{
grid-area:back-button;

  border-radius: 4px;
  background-color: #A3D0D3;
  border: none;
  color: #000000;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}



.back-button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.back-button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.back-button:hover span {
  padding-right: 25px;
}

.back-button:hover span:after {
  opacity: 1;
  right: 0;
}

	
/*For cphones*/
@media(max-width: 388px){
.grid {
	display:grid;
	
	grid-template-columns:100%;
	grid-template-rows:auto auto auto auto; 
	margin:0 auto;

	grid-template-areas:
		"nav"
		"title"
		"back-button";				
	}

h1	{
	font-size:1em;
	padding:20px;
	}
	
h2	{
	font-size:1em;
	padding-bottom:2px;
	margin:10px;
	}

p, li {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 1em;
	margin:10px;
}

.button {
padding: 5px;
margin: auto;

}

	{
/* unvisited link */
.button a:link {
  color: white;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: white;
}