body{
	background-color: white;
	background-image: url("capeTown.jpg");
	background-size: cover; 
	background-attachment: fixed;
}

main{
	width: 90%;
	margin: auto;

	
}

header{
	position: relative; /* Keeps the video anchored here */
    overflow: hidden;    /* Clips the video edges */
    width: 100%;
    min-height: 300px;   /* Prevents the header from collapsing on mobile */
    
    /* Your existing styles */
    font-size: 4em;
    padding: 5% 2%;
    font-family: "Zen Dots", sans-serif;
    color: #e0dfdc;
    text-shadow: 0 1px 0 #2e2e2e, 0 10px 20px rgba(0,0,0,0.5); /* Shortened for clarity */
    
    /* Centering the text over the video */
    display: flex;
    align-items: center;
    justify-content: center;

	
}

header video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* This makes the video scale relatively like a background-image */
    object-fit: cover; 
    
    /* Keeps video behind your text */
    z-index: 0; 
    pointer-events: none;
}

header h1 {
    position: relative;
    z-index: 1; /* Sits on top of the video */
}

nav{
	background-color: #10222B;
	font-family: "Zen Dots", sans-serif;
	font-weight: 350;
	font-size: 1.5em;
	padding: 1%;
	text-align: center;
	color: #E2F0D6;


	
}

article{
	background-color: #556677;
	padding: 2%;
	font-family: "Zen Dots", sans-serif;
	font-weight: 200;
	font-size: 2em;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;
	-webkit-column-rule: 1px solid rgba(28,110,164,0.5);
	-moz-column-rule: 1px solid rgba(28,110,164,0.5);
	column-rule: 1px solid rgba(28,110,164,0.5);


	
}

.circle{
	width: 40%;
	float: left;

}

.wu{
	width: 40%;
	float: right;
}

.subhead{
	font-weight: 800;
	color: #E2F0D6;

}

ul{
	padding: 0%;
	margin: 0%;

}

li{
	list-style: none;
	display: inline;
	padding-right: 2%;
}

li:last-child{
	padding-right: none;
}

a:link{
	color: #BDD684;
	text-decoration: none;
	padding: 1%;
}
a:visited{
	color: #BDD684;
}
a:hover{
	color: #e0dfdc;
	background-color: #95AB63;
}

a:active{
	opacity: 0.5;
}

footer{
	background-color: #95AB63;

	
}

@media screen and (max-width: 800px){
	.circle, .wu{
		float: none;
		width: 50%;
		padding-left: 25%;

	}
	article{
		column-count: auto;
	}

	video {
	width: 100%;
}
  	
}