/*****************************************************************************/
/*                                                                           */
/*                         CUSTOM COLOURS / GRADIENTS                        */
/*                                                                           */
/*****************************************************************************/

@property --ellipse1 { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse farthest-side at 0% 0%, rgb(120 212 237 / 100%), rgb(78 37 217 / 40%)); }

@property --ellipse2 { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse at 50% 80%, rgb(210 79 86 / 60%), rgb(78 37 217 / 20%)); }

@property --ellipse3 { syntax: "<image>"; inherits: false; initial-value: radial-gradient(circle at 10% 10%, rgb(255 249 59 / 100%), rgb(149 226 49 / 60%)); }

@property --ellipse4 { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse 100% 70% at 100% 0%, rgb(236 60 79 / 50%), rgb(236 60 124 / 30%), rgb(255 255 255 / 0%)); }

@property --ellipse5 { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse at 10% 10%, rgb(255 249 59 / 100%), transparent); }

@property --ellipse6 { syntax: "<image>"; inherits: false; initial-value: radial-gradient(ellipse at 90% 90%, rgb(236 60 79 / 60%), transparent); }


/*****************************************************************************/
/*                                                                           */
/*                                  STYLE SHEET                              */
/*                                                                           */
/*****************************************************************************/
* { margin: 0; padding: 0; }

html {
    margin: 0;
    padding: 0;
}

body {
	overflow-x: hidden;
	height: 100vh; max-height: 100vh;
	display: flex; flex-flow: column nowrap;
	h1, h2, h3, h4, h5, h6 { font-family: LibMono-Bold; }
}

body.stats {
	background: var(--midnight-67);
}


/********************************************************************
TOP LEVEL
********************************************************************/

header {  
    background: var(--sunset-135);
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 20px;
}

/* Full-width Screens */
@media only screen and (min-width: 768px) {
	header {
		height: 20vh; max-height: 20vh;
		p, li, a { font-size: 14pt; font-family: LibMono-Reg; }
	}
}

/* Mobile Screens */
@media only screen and (max-width: 767px) {
	header {
		box-shadow: 0px 4px 10px var(--black50);
		z-index: 2;
		p, li, a { font-size: 12pt; font-family: LibMono-Reg; }
	}
}

main {
    display: flex;
    font-family: LibMono-Reg;
    p, li, a { font-size: 16pt; font-family: Garamond-Reg; }
}

/* Full-width Screens */
@media only screen and (min-width: 768px) {
	main {
		height: 70vh; max-height: 70vh;
		padding: 25px;
		flex-flow: row nowrap;
		align-items: center;
		gap: 25px;
	}
}

/* Mobile Screens */
@media only screen and (max-width: 767px) {
	main {
		flex-flow: column nowrap;
		padding: 10px;
	}
}

footer {
    display: flex;
    background: var(--midnight-67);
    color: var(--white);
    font-family: LibMono-Reg;
    p { margin: 10px; }
    p, li, a { font-size: 14pt; font-family: LibMono-Reg; }
    a {
    	color: var(--white);
    	font-family: LibMono-Bold;
    }
    a:hover {
    	text-decoration: none;
    }
}

/* Full-width Screens */
@media only screen and (min-width: 768px) {
	footer {
		height: 5vh; max-height: 5vh;
		justify-content: space-around;
    	align-content: center;
	}
}

/* Mobile Screens */
@media only screen and (max-width: 767px) {
	footer {
		flex-flow: column nowrap;
		align-items: center;
		p { font-size: 11pt; }
		p:first-child { display: none; }
		p:last-child { display: none; }
	}
}

/*****************************************************************************/
/*                                                                           */
/*                           SECTIONING TAGS                                 */
/*                                                                           */
/*       (nav, section, article, aside, details, dialog, div, span)          */
/*                                                                           */
/*****************************************************************************/

/********************************************************************
NAVIGATION MENUS
********************************************************************/

/* Full-width Screens */
@media only screen and (min-width: 768px) {
	nav { display: none; }
}

/* Mobile Screens */
@media only screen and (max-width: 767px) {
	nav {
		display: flex;
		ul {
			display: flex; flex-flow: row nowrap; gap: 20px;
			list-style: none;
			li {
				a {
					padding: 10px;
					background: var(--black);
					color: var(--white);
					text-decoration: none;
				}
				a:hover {
					background: var(--white);
					color: var(--black);
				}
			}
		}
	}
}

/********************************************************************
HEADER SECTIONS
********************************************************************/

/* Full-width Screens */
@media only screen and (min-width: 768px) {
	header > section {
		display: flex;
		gap: 25px;
		align-items: flex-start;
		hgroup {
			padding: 10px 0px 0px 0px;
			max-width: 150px;
			p { padding: 15px 0px 0px 0px; }
		}
		ul, ol {
		    display: flex;
		    flex-flow: column nowrap;
		    gap: 10px;
		    padding: 10px;
		    background: var(--white25);
		    box-shadow: 0px 0px 5px var(--black25);
		    list-style-position: inside;
		    li {
		        p:first-child { font-family: LibMono-Bold; }
		        p:last-child {
				    font-size: 10pt;
				    span { font-family: LibMono-Italic; }
		        }
		    }
		}
		ul {
			list-style-type: none;
		}
	}
	header > section.feature {
		display: flex;
		flex-flow: column nowrap;
		gap: 10px;
		color: var(--white);
		div.song-mini {
			display: flex;
			flex-flow: row nowrap;
			padding: 5px;
			border-radius: 10px;
			background: var(--teals);
			img { width: 100px; height: 100px; border-radius: 8px 0px 0px 8px; }
			div {
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				height: 100px;
				background: var(--black);
				border-radius: 0px 8px 8px 0px;
				h3 { 
					margin: 0; padding: 0;
					padding: 10px;
					color: white;
				}
				audio {
					width: 200px;
					background: none;
					border-radius: 0px 8px 8px 0px;
				}
			}
		}
	}
}

@media only screen and (max-width: 767px) {
	header > section { display: none; }
	header > section.feature { display: none; }
}




/********************************************************************
MAIN SECTIONS
********************************************************************/

main > article {
	flex: 1 1 0;
	align-self: stretch;
}

main > div {
	flex: 3 1 0;
	display: flex;
	flex-flow: column wrap;
	gap: 25px;
	align-items: stretch;
}

main {
	article.welcome {
		display: flex;
		flex-flow: column nowrap;
		align-items: flex-start;
		justify-content: space-between;
		box-shadow: none;
	}
	div {
		section.top {
			display: flex;
			flex-flow: row nowrap;
			gap: 25px;
			align-items: flex-start;
			article.top-albums-2024 { 
				background: var(--ellipse1), var(--ellipse2); 
			}
			article.current-playlists { 
				background: var(--ellipse4), var(--ellipse3);
				ul {
					display: flex;
					flex-flow: row wrap;
					gap: 20px;
					list-style: none;
					padding: 20px 5px;
					font-family: LibMono-Bold;
					li {
						font-family: LibMono-Bold;
						a {
							padding: 5px 10px;
							border-radius: 4px;
							background: var(--black);
							color: var(--white);
							font-family: LibMono-Bold;
							text-decoration: none;
						}
					}
					li:hover {
						a {
							background: var(--white);
							color: var(--black);
							outline: 1px solid var(--black);
						}
					}
				}
			}
			div {
				h3 { font-size: 16pt; padding: 10px; }
				article.featured-post  { 
					background: var(--ellipse5), var(--ellipse6);
					img { width: 250px; }
				}
			}
		}
		section.posts {
			display: flex;
			article {
				align-items: flex-start;
				gap: 10px;
				padding: 15px;
				h3 { font-size: 16pt; }
				p { font-size: 14pt; }
				a {
					padding: 4px 10px;
					border-radius: 2px;
					background: var(--black);
					color: var(--white);
					text-decoration: none;
					font-family: LibMono-Bold;
					font-size: 12pt;
				}
				a:hover {
					background: var(--white);
					outline: 1px solid var(--black);
					color: var(--black);
				}
			}
		}
	}
}

/* Full-width Screens */
@media only screen and (min-width: 768px) {
	main {
		article.welcome {
			padding: 50px;
			hgroup {
				h2 { font-size: 46pt; padding: 0px 0px 20px 0px; }
				p { font-size: 18pt; font-family: LibMono-Reg; }
			}
			
		}
		div {
			section.top {
				display: flex;
				flex-flow: row nowrap;
				gap: 25px;
				align-items: flex-start;
			}
			section.posts {
				display: flex;
				flex-flow: row nowrap;
				gap: 25px;
				align-items: flex-end;
			}
		}
	}
}
/* Mobile Screens */
@media only screen and (max-width: 767px) {
	main {
		article.welcome {
			padding: 25px;
			gap: 15px;
			hgroup {
				h2 { font-size: 46pt; padding: 0px 0px 20px 0px; }
				p { font-size: 18pt; font-family: LibMono-Reg; }
			}
			
		}
		div {
			display: flex; flex-flow: column nowrap;
			section.top {
				display: flex;
				flex-flow: column nowrap;
				gap: 25px;
				align-items: flex-start;
			}
			section.posts {
				display: flex;
				flex-flow: column nowrap;
				gap: 20px;
				align-items: stretch;
			}
		}
	}
}

/********************************************************************
STATS PAGE SECTIONS
********************************************************************/
main.stats {
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	gap: 25px;
	padding: 20px;
	background-image: linear-gradient(0deg, rgb(5 5 5 / 30%) 5%, rgb(5 5 5 / 30%) 95%), var(--sunset-112);
	section {
		display: flex;
		gap: 25px;
		justify-content: stretch;
		align-items: flex-start;
		padding: 10px;
		border-radius: 5px;
		background: var(--white50);
		hgroup {
			padding: 10px 0px 0px 0px;
			max-width: 150px;
			p { padding: 15px 0px 0px 0px; }
		}
		ul, ol {
		    flex: 1 1 0;
		    display: flex;
		    flex-flow: column nowrap;
		    gap: 10px;
		    padding: 10px;
		    background: var(--white25);
		    border-radius: 4px;
		    box-shadow: 0px 0px 5px var(--black25);
		    list-style-position: inside;
		    li {
		        p:first-child { font-family: LibMono-Bold; }
		        p:last-child {
				    font-size: 10pt;
				    span { font-family: LibMono-Italic; }
		        }
		    }
		}
		ul {
			list-style-type: none;
		}
	}	
}


/********************************************************************
CONTENT SECTIONS
********************************************************************/

article {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	box-shadow: 5px 5px 10px var(--grey50);
	border-radius: 10px;
	padding: 25px;
	h3 { font-size: 22pt; padding: 0px 0px 10px 0px; }
}



article.list {
	flex-flow: column nowrap;
	align-items: flex-start;
	min-width: 300px;
	ol, ul {
		padding: 15px 0px 0px 25px;
		li { 
			padding: 5px 0px 5px 0px;
			h3, h4, h5, h6 { font-family: LibMono-Bold; }
			p { font-family: LibMono-Reg; }
		}
	}
}

article.song-mini {
	flex-flow: row nowrap;
	padding: 5px;
	border-radius: 10px;
	background: var(--teals);
	img { width: 75px; height: 75px; border-radius: 8px 0px 0px 8px; }
	div {
		height: 75px;
		background: var(--black);
		border-radius: 0px 8px 8px 0px;
		h3 { 
			margin: 0; padding: 0;
			padding: 5px;
			color: white;
		}
		audio {
			width: 200px;
			background: none;
			border-radius: 0px 8px 8px 0px;
		}
	}
}

article.song-small {
	flex-flow: column nowrap;
	align-items: center;
	padding: 5px;
	border-radius: 10px;
	background: var(--fire);
	h3 { padding: 5px; }
	div {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		img { width: 150px; height: 150px; border-radius: 8px 8px 0px 0px; }
		audio { 
			width: 150px;
			border-radius: 0px 0px 8px 8px;
		}
	}
}

article.song-mid {
	flex-flow: column nowrap;
	align-items: center;
	padding: 5px;
	border-radius: 12px;
	background: var(--sky-blues);
	h3 { padding: 5px; }
	div {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		img { width: 250px; height: 250px; border-radius: 10px 10px 0px 0px; }
		audio { 
			width: 250px;
			border-radius: 0px 0px 10px 10px;
		}
	}
}

article.song-large {
	flex-flow: column nowrap;
	align-items: center;
	padding: 5px;
	border-radius: 12px;
	background: var(--sky-blues);
	h3 { padding: 10px; }
	div {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		img { width: 400px; height: 400px; border-radius: 10px 10px 0px 0px; }
		audio { 
			width: 400px; 
			border-radius: 0px 0px 10px 10px;
		}
	}
}








aside {}

aside.now-playing {
	display: flex;
	flex-flow: column nowrap;
	gap: 15px;
	padding: 15px;
	border-radius: 10px;
	background: var(--white50);
	p {
		padding: 10px;
		border-radius: 5px;
		background: var(--black25);
		line-height: 1;
		span {
			font-family: LibMono-Italic;
			font-size: 10pt;
		}
	}
}

details {}
summary {}



/********************************************************************
DIALOGS AND POP-UPS
********************************************************************/

dialog {}


/********************************************************************
NON-SEMANTIC SECTIONS
********************************************************************/

div {}
span {}


/*****************************************************************************/
/*                                                                           */
/*                           TEXT CONTENT TAGS                               */
/*                                                                           */
/*          (headings, paragraphs, links, quotes, formatted, raw)            */
/*                                                                           */
/*****************************************************************************/

/********************************************************************
HEADINGS and PARAGRAPHS
********************************************************************/

hgroup {}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

p, li, a { font-size: 14pt; font-family: Garamond-Reg; }



/********************************************************************
HYPERLINKS
********************************************************************/

a {}
a:hover {}
a:visited {}
a:active {}
a:disabled {}


/********************************************************************
QUOTATIONS
********************************************************************/

q {}
blockquote {}
cite {}


/********************************************************************
FORMATTED TEXT
********************************************************************/

address {}
time {}
abbr {}
dfn {}
mark {}
sub {}
sup {}
s {}
ins {}
del {}


/********************************************************************
RAW TEXT
********************************************************************/

pre {}
code {}
samp {}
data {}

/*****************************************************************************/
/*                                                                           */
/*                               LAYOUT TAGS                                 */
/*                                                                           */
/*                     (horizontal lines, lists, tables)                     */
/*                                                                           */
/*****************************************************************************/

/********************************************************************
HORIZONTAL LINES
********************************************************************/

hr {  }


/********************************************************************
LISTS
********************************************************************/

ul {}
ol {}
li {}

li.song { list-style-image: url("song.svg"); }
li.album { list-style: url("album.png") outside; }
li.discography { list-style-image: url("discography.svg"); }
li.playlist { list-style-image: url("playlist.svg"); }

dl {}
dt {}
dd {}


/********************************************************************
TABLES
********************************************************************/

table {}
caption {}
thead {}
tbody {}
tfoot {}
tr {}
th {}
td {}
col {}
colgroup {}


/*****************************************************************************/
/*                                                                           */
/*                                FORM ELEMENTS                              */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/

form {}

/********************************************************************
FIELDS
********************************************************************/

input {}
select {}
selectedcontent {}
option {}
textarea {}


/********************************************************************
INFORMATION
********************************************************************/

label {}
legend {}
progress {}
fieldset {}
optgroup {}
datalist {}
meter {}
output {}


/********************************************************************
BUTTONS
********************************************************************/

button {}
button:hover {}


/*****************************************************************************/
/*                                                                           */
/*                                 MULTIMEDIA                                */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/

img {}
area {}
map {}
audio {
    background: white;
    
}
track {}
video {}
svg {}
figure {
    background: var(--grey50);
    padding: 10px;
    outline: 1px solid red;
    figcaption {
        display: flex;
        justify-content: center;
        padding: 10px;
        outline: 1px solid black;
    }
}

picture {}
source {}


/*****************************************************************************/
/*                                                                           */
/*                                MISCELLANEOUS                              */
/*                                                                           */
/*                                                                           */
/*****************************************************************************/

/* Math Tags */
math {}
var {}
data {}

/* Embedded Content Tags */
embed {}
fencedframe {}
iframe {}
object {}

/* Ruby Tags */
ruby {}
rp {}
rt {}

/* Browser Info */
wbr {}
kbd {}
bdi {}
bdo {}

/* Scripts */
canvas {}
script {}
noscript {}

/* Other */
slot {}
template {}