@font-face {
    font-family: 'Anton-Regular';
    src: url('/fonts/Anton-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Dosis-Medium';
    src: url('/fonts/Dosis-Medium.ttf') format('truetype');
}

body {
	font-family: sans-serif ;
	background: #110000 ;
	color: #ccc ;
	font-family: 'Courier New', Courier, monospace;
	/* font-family: 'Dosis-Medium', monospace; */
}

main {
	max-width: 800px ;
	margin: auto ;
}

p{
	margin: 0.5rem 0;
}

img {
	max-width: 100% ;
}

header h1 {
	text-align: center ;
	color: #ff9;
}

footer {
	text-align: center ;
	clear: both;
}

/* For TAGLIST.HTML */
.taglist {
	text-align: center ;
	clear: both ;
}

/* For NEXTPREV.HTML */
#nextprev {
	/* The container for both the previous and next articles. */
}
#prevart {
	float: left ;
	text-align: left ;
}
#nextart {
	float: right ;
	text-align: right ;
}
#nextart,#prevart {
	max-width: 33% ;
}

.albums-listed {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	list-style: decimal;
	justify-content: space-between;
	align-items: baseline;

}

.song-list{
	width: 200px;
}

ul.song-list{
	list-style: square !important;
}


.overflow-x{
	text-wrap: none;
	width: auto !important;
}

ol > h3 {
	margin-top: 0;
}

h2 {
	text-align: left;
	color: #9ff;
}

.padding-left-32{
	padding-left: 32px;
}

h3{
	color: #f9f;
}

a {
	color: #ccc;
	background-color: #000;
}

a:hover {
	color: #000;
	background-color: #fff;
	border: 2px white solid;
}

a:hover>div {
	color: #000;
	background-color: #fff;
}

a.img-link:hover {
	border: none !important;
    background-color: transparent;
}

.inverted-link{
	color: #000;
	background-color: #fff;
	padding: 0.3rem 0.7rem;
	line-height: 2rem;
}

.inverted-link:hover{
	color: #fff;
	background-color: #000;
	border: 1px white solid;
}

nav{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-bottom: 1px #bbb solid;
}

nav > ul {
	display: flex;
	flex-direction: row;
	gap: 8px;
	list-style: none;
	align-items: center;
	padding: 0;
}

nav>ul>li{
	padding: 0;
}

nav>ul>li>a{
	padding: 0.2rem;
}

nav>h1{
	color: #080000;
    background-color: white;
    padding: 0 0.5em;
    font-family: 'Anton-Regular';
    font-weight: 400;
    text-align: center;
    display: inline;
    overflow: visible;
    text-wrap: nowrap;
}

nav > h1> .nav__title__extra {
	color: #777;
	font-size: 1rem;
	left: 0;
}

blockquote{
	background-color: #333;
	padding: 1rem 3rem;
	color: #ccc;
	font-size: 1.1rem;
	font-style: italic;
	position: relative;
	/* border-radius: 16px; */
	margin: 1rem 0 1rem 4rem;
}

blockquote::before {
  content: "\201C";
  color: #777;
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
  font-family: Arial, sans-serif;
}

blockquote::after {
  content: "\201D";
  color: #777;
  font-size: 4em;
  position: absolute;
  right: 10px;
  bottom: -30px;
  font-family: Arial, sans-serif;
}

@media screen and (max-width: 800px) {
	nav{
		display: flex;
		flex-direction: column;
		justify-content: start;
		border-bottom: 1px #bbb solid;
	}

	nav > ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		list-style: none;
		align-items: center;
		padding: 0;
		max-width: 100dvw;
		margin-top: 0;
	}

	#nav__title {
		width: 248px !important;
		margin-bottom: 1rem;
	}
}

@media screen and (max-width: 400px) {
	#nav__title {
		width: auto !important;
	}
}