body {
	background-image: linear-gradient(to right, #2c2646, #72466b, #72466b, #2c2646);
	margin-bottom: 100px;
}


html {
	position: relative;
	min-height: 100%;
}

.header {
	position: sticky;
	z-index: 9;
	width:100%;
	top: 0px;
	left: 0px;
	text-align: center;
}

.title {
	position: relative;
	margin: 0px auto;
	width:100%;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #000000;
    font-family: Sedan;
}

.container {
	position: relative;
	margin-bottom: 200px;
	margin:0px auto;
	background-image: linear-gradient(to right, #2c2a30, #36343a, #36343a, #36343a, #2c2a30);
	color: #ffffff;
	text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
	width:90%;
	height:1000px;
	padding:10px;
	font-family: Sedan;
	font-size: 20px;
}

.container mark {
	text-shadow: 0px -0px 0 #000;
}

.menu-button {
	margin:0px auto;
	position: absolute;
	z-index: 10;
	right: 20px;
	top:25px;
	background: #2e2743;
	border-radius: 10px;
}

.menu {
	position: absolute;
	visibility: hidden;
	top: 100%;
	right:0px;
	background: #ffffff;
	color:#000000;
	padding:30%;
	width: 300px;
	display: inline-block;
	border-style: groove;
	text-align: left;
}



.menu-button:hover > .menu,
.menu-button:focus > .menu,
.menu-button:focus-within > .menu {
	visibility: visible;
}

.footer {
	background-image: linear-gradient(#2f2748, #3e2274, #3e2274, #3e2274, #2f2748);
	width:100%;
	height:60px;
	padding-top:20px;
	padding-bottom: 60px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	text-align: left;
	text-indent: 10%;
}

.w3-button {
	z-index: 15;
}

.banner {
	display: none;
}

@media only screen and (min-width: 750px) {
	.banner {
	display: block;
	width: 100%;
	}
}

@media only screen and (min-width: 1000px) {
	.banner {
	display: block;
	width: 100%;
	}
}