@charset "UTF-8";
* { margin: 0; padding: 0; } 
body{background-image: url("../Images/Background.jpg");
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	text-align: center;
}

/* format the header */
.Header{height: 50px;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	text-align: center;
	color: solid black;
}
	
#Top{display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
	font-family: "American Typewriter";
}


#Column1{width:300px;
	position: left}


#Column2 nav ul li{display: inline;
	padding-left: 10px;
}

#Column1{width:300px;
	position: left}

#Column2 nav ul li{list-style: none;
	padding: 10px;
}

#Column2 nav ul li:before{content: '';
   display: inline-block;
   height: 12px;
   width: 20px;
   background-image: url("../Images/USA.png");
	background-size:contain;
	background-repeat: no-repeat;
}

#Column2 nav ul li a{color: solid black;
	text-decoration: none;
}

#Column2{padding-top: 20px;
}

#Column2 ul li:hover{text-decoration: underline}
#Column2 ul li:active{font-weight: bold}
#Column2 ul li:visited{color: solid black;
}

#Column3 nav ul li{display: inline;
	padding-left: 10px;
}

#Column3 nav ul li a{color: solid black;
	text-decoration: none;
}

#Column3{padding-top: 20px;
}

#Column3 ul li:hover{text-decoration: underline}
#Column3 ul li:active{font-weight: bold}
#Column3 ul li:visited{color: solid black}

#MainTitle{text-align: center;
	padding-bottom: 20px;
	text-decoration: none;
	font-weight:normal;
	letter-spacing: 10px;
	color: #D79F10;
}

#Intro{font-size: 20px; 
	margin: 50px;
	font-family: "American Typewriter";
	text-align: justify;
	text-indent: 40px;
}

#Intro p {margin-bottom: 20px}

#Topics{display: grid;
    grid-template-columns: 1fr 1fr;
	font-family: "American Typewriter";
	margin: 20px;
	column-gap: 40px;
	text-indent: 40px;
}

.images{ display: block;
    margin-left: auto;
    margin-right: auto;
	padding-top: 40px;
}

.description{text-align: justify;
	margin-right: 10px;
	font-family: "American Typewriter";	
}

.Tittop{text-align: center;
	padding-bottom: 20px;
	padding-top: 20px;
	text-decoration: none;
	font-weight:normal;
	letter-spacing: 5px;
	color: #D79F10;
}

#footer{font-family: "American Typewriter";	
	text-align: center;
    padding: 20px;
}

@media only screen and (max-width: 768px) {
	#Top{display: grid;
  grid-template-columns: repeat(2, 1fr);}
	.Header{height: 170px}
	#Column3 {grid-column: 2; grid-column-start: 1; grid-column-end: span col2-start;}
	#Topics {grid-template-columns: 1fr;
	padding: none;
	margin: 20px;
	column-gap: none;}
	#Intro{padding: none;
	margin: 20px;}
}

@media only screen and (max-width: 420px) {
	.Header{height: 170px}
	#Column1{margin: auto}
	#MainTitle{font-size: 27px;
	margin: 20px;
	padding-top: 20px;}
}