@charset "UTF-8";
/* CSS Document */
*{
	
	box-sizing: border-box;
}
#container{
	margin: 0 auto;
}
.left{
	
	flex-grow: 1;
	height: 400px;
	background-color: rgba(253,253,253,.5);
	border-radius: 20px; 
	float: left;
	margin: 10px 10px 10px 15px; 
	padding: 10px 10px 10px 10px; 
	border: thick #FF0000 solid; 
	}
.right{
	
	flex-grow: 1;
	height: 500px;
	background-color: rgba(253,253,253,.5);
	border-radius: 20px; 
	float: left;
	margin: 10px 15px 10px 10px; 
	padding: 15px 15px 15px 15px; 
	border: thick #FF0000 solid;
	}

body{
	
	background: url("Bluesky.jpeg")fixed top right; 
	background-size: cover;
	
	}

@media only screen and (min-width: 768px) {
body
	
	
 @media only screen and (max-width: 767px){
	 /*phones*/
		.flex-container{
			display: flex;
			flex-direction: column;
			
			
}
}
	@media only screen and (max-width: 767px) and (orientation: portrait){
		
	}
	

#container {
	
	width: 800px; 
	margin: 0 auto; 
		
}





footer{
	
	background-color: rgba(253,253,253,.5);
	clear: both;	
	
}
header > h1{
	text-align: center;
	color: black;
 
	
	
}

.right a:link{
	color:crimson;
	font-size: 26px;
	text-decoration: none;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.right a:hover{
	font-size: 28px;
	
}

.gluten-{
  font-family: "Gluten", cursive;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}






ol li {
  background: #FFFFFF;
  color:black;
  margin: 8px;
}

ul {
  list-style-type: none;
  margin: 15;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 17px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: red;
}

.active {
  background-color: red;
}

}

@media only screen and (max-width: 768px){
	.flex-container{
		display: flex;
		flex-direction: column;
		
		
	}
	
}

@media only screen and (max-width: 768px) and (orientation: portrait){
	
}