* { margin: 0; padding: 0; }

html {
    margin: 0;
    padding: 0;
}

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

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

header { 
    position: absolute;
    top: 0; left: 0; right: 0;
    background: var(--sunset-135);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    h1 {
    	font-size: 32pt;
    	span {
    		background: var(--black);
    		color: var(--white);
    		padding: 25px;
    		border-radius: 150px;
    	}
    }
    p, li, a { font-size: 14pt; font-family: LibMono-Reg; }
    nav {
    	display: flex;
    	flex-flow: row nowrap;
    	align-items: center;
    	gap: 40px;
    	a { 
			font-size: 16pt;
			text-decoration: none;
			color: var(--white);
			font-family: LibMono-Bold;
    	}
    	a:hover {
    		color: var(--black);
    	}
    }
}

main {
    font-family: LibMono-Reg;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: 25px;
    padding: 50px;
    p, li, a { font-size: 16pt; font-family: Garamond-Reg; }
    section.info {
    	flex: 1 1 0;
    	display: flex;
    	flex-flow: column nowrap;
    	gap: 25px;
    	padding: 20px;
    	border-radius: 5px;
    	box-shadow: 5px 5px 10px var(--grey50);
    	h2 { padding: 0px 0px 50px 0px; }
    	p {
    		font-family: LibMono-Reg;
    		font-size: 16pt;
    	}
    }
    section.post {
    	flex: 4 1 0;
    	max-height: 70vh;
    	overflow-x: scroll;
    	padding: 10px;
    	h3, h4, h5, h6 {
    		padding: 25px 0px 10px 0px;
    	}
    	p {
    		padding: 10px 0px 10px 0px;
    		font-size: 18pt;
    	}
    }
}

footer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-around;
    align-content: center;
    padding: 15px;
    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;
    }
}


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

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

nav {}


/********************************************************************
SECTIONS 
********************************************************************/

section {}

article {}

aside {}

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 { font-size: 36pt; }
h2 { font-size: 28pt; }
h3 { font-size: 24pt; }
h4 { font-size: 18pt; }
h5 { font-size: 16pt; }
h6 { font-size: 14pt; }

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 {
	font-family: LibMono-Reg;
	font-size: 14pt;
	color: var(--grey60);
}
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 {
	height: 500px;
	box-shadow: 0px 0px 10px var(--grey50);
}

img.float {
	float: right;
	margin: 25px 5px 25px 25px;
}

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 {}