/* font import */

@font-face {
	font-family: Alagard; 
	src: url(../font/alagard.ttf);
}

@font-face {
	font-family: Abaddon; 
	src: url(../font/abaddon.TTF);
}

@font-face {
	font-family: BlackCastle; 
	src: url(../font/BlackCastleMF.ttf);
}


/* text */

#navbar a {
	color: white;
	margin: 0;
	text-decoration: none;
	font-family: Abaddon;
	font-size: 2em;
}

#navbar a:hover {
	color: #cb1819;
	margin: 0;
	text-decoration: none;
	font-family: Abaddon;
	font-size: 2em;
}

h1 {
	font-family: Abaddon;
	color: white;
	font-size: 4em;
}

h2 {
	font-family: Abaddon;
	color: white;
	font-size: 2.5em;
}

h3 {
	font-family: BlackCastle;
	color: white;
	font-size: 2.5em;
}

hr {
	color: white;
	width: 90%;
}

.box h2 {
	text-align: center;
}

#albumbox h2 {
	text-align: center;
}

p {
	font-family: BlackCastle;
	text-indent: 1em;
	color: white;
	font-size: 1.5em;
}

.album h3 {
	text-align: center;
	margin: none;
}	

.songoftheweeklink {
	font-family: BlackCastle;
	color: white;
	font-size: 2.5em;
	text-align: center;
}

.songoftheweeklink:visited {
	font-family: BlackCastle;
	color: white;
	font-size: 2.5em;
	text-align: center;
}

.songoftheweeklink:hover {
	font-family: BlackCastle;
	color: #cb1819;
	font-size: 2.5em;
	text-align: center;
}

#songoftheweekbox h2 {
	text-align: center;
}

#musicvideobox h2 {
	text-align: center;
}

#musicvideobox p {
	text-align: center;
	text-indent: none;
}

/* div */

#navbar {
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: black;
	width: 100%;
	justify-content: space-evenly;
	position: sticky;
	top: 0;
}

.page {
	width: 80%;
	height: 90%;
	margin: auto;
	margin-top: 15px;
	overflow-y: auto;
	background-color: rgba(0, 0, 0, 0.8);
}

.pagecontainer {
	width: 100%;
	height: 90%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.column {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	width: 25%;
	height: 150%;
	gap: 15px;
}

.box {
	width: 100%;
	height: auto;
	border: double;
	border-color: white;
	padding: 15px;
	max-height: 50%;
	overflow-y: auto;
}

.album {
	border: solid;
	border-color: white;
	width: 95%;
	padding: 10px;
	margin: auto;
}

#albumbox {
	width: 100%;
	height: auto;
	border: double;
	border-color: white;
	padding: 15px;
	max-height: 50%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-x: hidden;
}

#songoftheweekbox {
	width: 100%;
	height: auto;
	border: double;
	border-color: white;
	padding: 15px;
	overflow-y: auto;
	overflow-x: hidden;
	text-align: center;
}

#musicvideobox {
	width: 100%;
	height: 100%;
	border: double;
	border-color: white;
	padding: 15px;
	overflow-y: scroll;
}

/* albums */

#selftitled {
	border-color: #7d3e1b;
	background-color: rgba(125, 62, 27, 0.5);
}

#ratedr {
	border-color: #0088d6;
	background-color: rgba(0, 136, 214, 0.5);
}

#songsforthedeaf {
	border-color: #cb1819;
	background-color: rgba(203, 24, 25, 0.5);
}

#lullabiestoparalyze {
	border-color: #4a0102;
	background-color: rgba(74, 1, 2, 0.5);
}

#eravulgaris {
	border-color: #c11162;
	background-color: rgba(193, 17, 98, 0.5);
}

#likeclockwork {
	border-color: #f30342;
	background-color: rgba(243, 3, 66, 0.5);
}

#villains {
	border-color: #fafbf6;
	background-color: rgba(250, 251, 246, 0.5);
}

#intimesnewroman {
	border-color: #282307;
	background-color: rgba(40, 35, 7, 0.5);
}

#aliveinthecatacombs {
	border-color: #806b3f;
	background-color: rgba(128, 107, 63, 0.5);
}

/* img */

.album img {
	width: 45%;
	height: auto;
	float: right;
	border: solid;
	border-color: white;
	margin: 5px;
}

.songoftheweekimg {
	width: 90%;
	height: auto;
	border: solid;
	border-color: black;
	margin: auto;
}

/* misc */

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	height: 100%;
	padding: 0;
	margin: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-color: black;
	animation: slideshow 30s infinite;
}

@keyframes slideshow {
	0% { background-image: url("../media/qotsashrine/bg1.jpg"); }
	13% { background-image: url("../media/qotsashrine/bg2.jpg"); }
	25% { background-image: url("../media/qotsashrine/bg3.jpg"); }
	38% { background-image: url("../media/qotsashrine/bg4.jpg"); }
	50% { background-image: url("../media/qotsashrine/bg5.jpg"); }
	63% { background-image: url("../media/qotsashrine/bg6.jpg"); }
	75% { background-image: url("../media/qotsashrine/bg7.jpg"); }
	88% { background-image: url("../media/qotsashrine/bg8.jpg"); }
	100% { background-image: url("../media/qotsashrine/bg9.jpg"); }
} 

video {
	width: 95%;
	height: auto;
	display: block;
	margin: 10px auto;
}