@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{list-style: none;
	padding: 10px;
}

#Column2 nav ul li:before{content: '';
   display: inline-block;
   height: 12px;
   width: 20px;
   background-image: url("../Images/Spain.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: 40px;
	text-decoration: none;
	font-weight:normal;
	letter-spacing: 10px;
	color: #D79F10;
	font-size: 40px;
	font-family: "American Typewriter";
}

#Members{display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

#Alumni{margin-left: 20px
}

.Tittop{text-align: center;
	padding-bottom: 20px;
	text-decoration: none;
	font-weight:normal;
	color: #D79F10;
	font-family: "American Typewriter";
	font-size: 25px;
}

.description{margin: 20px;
	text-align: left;
	font-family: "American Typewriter";
	font-size: 16px;
}

.description p{padding-bottom: 10px;
	text-align: justify;
	padding-bottom: 10px;
}

.description a{padding-bottom: 10px;
}

#orchid{font-size: 16px;
}

.future{margin: 20px;
	text-align: left;
	font-family: "American Typewriter";
	font-size: 16px;
}

.future p{padding-bottom: 5px;
	text-align: justify;
}


@media only screen and (max-width: 600px) {
	#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;}
}

@media only screen and (max-width: 768px) {
	.description{font-size: 16px;}
	#Members{grid-template-columns: 1fr 1fr;}
	}

@media only screen and (max-width: 420px) {
	.Header{height: 170px}
	#Column1{margin: auto}
	#Members{grid-template-columns: 1fr;}
}