body {
	height: 100%;
    margin: 0;
    background-image: url('img/wallpaper2.png');
	}

h1, p, a, font, div {
	font-family: 'Courier New', Courier, monospace;
}

.jonyverse {
	padding-top: 2%;
	height: 100%;
}

/* NAVIGATION TABLE */
.nav {
	background-image: url('img/sine.png');
	background-color: rgba(80, 80, 80, 0.4);
	background-size: 400px;
	margin: 0 auto;
    margin-top: 1%;
	width: 80%;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;

    border-style: solid;
		border-color: rgba(0, 0, 0, 0.7) rgba(256, 256, 256, 0.4) rgba(256, 256, 256, 0.4) rgba(0, 0, 0, 0.7);
    border-width: 1px 2px 2px 1px;
    border-radius: 10px;
}

.nav a:link {color: #FFFFFF; text-decoration: none;}
.nav a:visited {color: #FFFFFF; text-decoration: none;}
.nav a:hover {color: #CF55EC; text-decoration: none;}
.nav a:active {color: #FFFFFF; text-decoration: none;}

.button {
	display: flex;
  	justify-content: center;
  	align-items: center;

	font-size: 25px;
	font-weight: bold;

	width: 16%;
}

.button > div {
	text-align: center;
	padding: 25px;
}


/* CONTENT TABLE */
.con-table {
	background-color: rgba(80, 80, 80, 0.6);

	margin: 0 auto;
	width: 80%;
	height: auto;
    margin-top: 1%;
	min-height: 400px;

	font-size: 20px;
	font-weight: regular;

	padding-top: 10px;

    border-style: solid;
    border-color: rgba(0, 0, 0, 0.7) rgba(256, 256, 256, 0.4) rgba(256, 256, 256, 0.4) rgba(0, 0, 0, 0.7);
    border-width: 1px 2px 2px 1px;
    border-radius: 10px;


    background-image: url('img/sine2.png');

	background-repeat: repeat;
}

.con-table h1,
.con-table p {
	align: left;
	valign: top;
	padding: 10px;
	padding-left: 20px;
	margin: 0;
	color: #FFFFFF;
}

.con-table a:link {color: #FFFFFF;}
.con-table a:visited {color: #FFFFFF;}
.con-table a:hover {color: #CF55EC;}
.con-table a:active {color: #FFFFFF;}

.bottom {
	background-color: rgba(80, 80, 80, 0.4);
	background-image: url('img/sine.gif');

	margin: 0 auto;
	margin-top: 1%;
	width: 80%;
	height:auto;

	font-size:20px;
	font-weight: medium;

	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;

	border-style: solid;
	border-color: rgba(0, 0, 0, 0.7) rgba(256, 256, 256, 0.4) rgba(256, 256, 256, 0.4) rgba(0, 0, 0, 0.7);
	border-width: 1px 2px 2px 1px;
	border-radius: 10px;
}

.bottom a:link {color: #FFFFFF;}
.bottom a:visited {color: #FFFFFF;}
.bottom a:hover {color: #CF55EC;}
.bottom a:active {color: #FFFFFF;}

.secretbottom {
	margin: 0 auto;
	margin-top: 1%;
	width: 80%;
	height:auto;

	font-size:20px;
	font-weight: medium;
	text-align: center;

	padding-top: 20px;
	padding-bottom: 20px;
}

/* ZINE FORMATTING */

div.center {
	text-align: center;
	margin: 0 auto;
	}

div.center img {
	width: 90%;
	max-height: 500px;
	max-width: 500px;
}

.musiccontent {
	width: 90%;
	margin: auto;
	display: flex;

	border-style: solid;
	border-color: rgba(256, 256, 256, 0.2);
	border-width: 1px;
}

.musicbox {
	float: left;
}

.musicnotes {
	padding-top: 10px;
	font-size: 20px;
	overflow: auto;
}

.musicdate{
	float: right;
	margin-right: 20px;
	margin-top: 10px;
	color: #FFFFFF;
	font-weight: bold;
}

.setbox {
	background-color: rgba(0, 0, 0);

	width: 90%;
	margin:auto;
	display: flex;
	flex-direction: column;
	padding-bottom: 10px;

	border-style: solid;
    border-color: rgba(256, 256, 256, 0.2);
    border-width: 1px;

    box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
}

.setbox audio {
	width: 100%;
	padding-bottom: 5px;
}


.zinebox {
	width: 450px;
	background-color: rgba(80, 80, 80);
	padding-bottom: 10px;

	box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
}