/*
main.css

Styles Classes:
-body
-header
-footer
-column
-left
-middle
-right 
*/

* {
	box-sizing: border-box; 
}
body{
	
	
	background-color: black;
	font: 'Helvetica';
	color: white;
}

/*-------HEADER STARTS----------*/
.header { 
	background-color: grey;
	color: white;
	padding: 15px;
	text-align: right;
	
}

.nav-bar {
  	
  	background-color: #63267E; /*Emmienence purple*/
  	color: #FFF; /*White*/
	overflow: hidden;
 }

.nav-bar a {
	float: left;
	font-size: 25px;
	padding: 7px 8px;
	color: #998822; /*Olive Green*/
	text-align: center;
	text-decoration: none;
}



.dropdown {
	float: left;
	overflow: hidden;
	
}

.nav-bar button {
	border: none;
	outline: none;
	background-color: inherit;
	font-size: 25px;
	font-family: inherit;
	padding: 7px 8px;
	margin: 0;
	transition: 0.7s;
}

.nav-bar button:hover {
	background-color: #282E34;
        	
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #F9F9F9; /*Cultured grey*/
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	float: none;
	color: #282E34; /*Gunmetal*/
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: #998822 /*Olive green*/
}

.dropdown:hover .dropdown-content {
	display: block;
}


/*-------------HEADER END-------------*/

/*-------------COLUMNS START----------*/

.column {
	float: left;
	padding: 10px;
	
}

.left, .right {
	width: 25%;
}

.middle {
	width: 50%;
}

.row:after{
	content: "";
	display: table;
	clear:both;
}

/*-----------FOOTER START--------*/
.footer {
	background-color: grey;
	color: white;
	padding: 15px;
	text-align: right;
}