body {
	padding:0;
	margin:0;
	background: radial-gradient(circle at 50% 50%, #251821, #000) ;
	color:#ffe680;
	min-height:100vh;
	display:flex;
	flex-flow:column;
	box-sizing:border-box;
}

body#frontPage {
	display:flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-between;
	min-height:100vh;
	padding:10px;
	box-sizing:border-box;
}

body#trackPage ,
body#albumPage ,
body#artistPage ,
body#editTrackPage , body#addTrackPage ,
body#editAlbumPage , body#addAlbumPage ,
body#editArtistPage
{
	padding:10px;
}

#editArtistPage > main {
	display:flex;
	flex-flow:column;
	margin:0;
	padding:0;
}

#frontPage > main > ul {
	display: flex;
	flex-flow: row wrap;
	margin:20px 0 0 0;
	padding:0;
}
#frontPage > main > ul > a {
	margin:10px;
	display: grid;
	grid-template-rows: 114px ;
	grid-template-columns: 114px ;
	border-radius:15px;
	background: #333;
	font-family: 'Rock Salt', cursive;
	font-size:20px;
	line-height:1.2;
	position:relative;
	text-decoration:none;
	color:#000;
}

#frontPage > main > ul > a:hover {
	background: linear-gradient(0.4turn, #ffe680, #916f6f);
}
#frontPage > main > ul > a > li {
	align-self:center;
	justify-self:center;
	display:block;
}

#frontPage > main > p {
	text-align:center;
	margin:40px 10px 3px 10px;
	padding:0;
	font-family: 'Rock Salt', cursive;
	font-size:16px;
	line-height:1.5;
	color:transparent;
	max-width:35em;
	background: linear-gradient(0.4turn, #ffe680, #916f6f);
	background-clip: text;
	-webkit-background-clip: text;
}

#frontPage > main > p > a {
	color:#fff8;
	text-decoration:underline;
}

#frontPage > main > p > a:hover {
	color:#fffa;
}

footer {
	text-align:center;
	margin:10px 0 3px 0;
	padding:0;
	font-family: 'Rock Salt', cursive;
	font-size:12px;
	line-height:1.2;
	color:#444;
}
footer > a {
	color:#555;
	text-decoration:underline;
}
footer > a:hover {
	color:#666;
}

main {
	flex-grow:1;
	padding:0;
	margin:0;
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

body#frontPage > main {
	padding:0;
	margin:0;
	display:flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	min-height:0;
}

/* based on https://css-tricks.com/gradient-borders-in-css/ */

article.album,
form.album {
	background: linear-gradient(0.4turn, #ffe680, #916f6f);
	display:flex;
	flex-flow:column;

	border-radius:15px;
	font-family: 'Rock Salt', cursive;
	font-size:16px;
	line-height:1.2;
	color:#000;
	margin:20px;
}

article.album > div.cover,
form.album > div.cover {
	display:flex;
	flex-flow:row;
}

article.album > div.cover > img.artwork,
form.album > div.cover > label.artwork {
	display:block;
	margin:7px;
	border-radius:8px;
	width:300px;
	height:300px;
}

form.album > div.cover > label.artwork {
	display:flex;
	background:#000d;
	flex-flow:column;
	align-items:center;
	justify-content:center;
	background-size:contain;
	background-repeat:no-repeat;
	color:#fff;
}

article.album > div.cover > div.label > h1.title > p.artist {
	display: block;
	float: right;
    background: #000c;
    margin: -1px -6px 0 10px;
	padding: 0;
    text-align: right;
    /*align-self: flex-start;*/
    color: #212119;
    border-radius: 0 15px 0 5px;
    font-family: 'Rock Salt', cursive;
    font-size: 20px;
    line-height: 1.2;
	border: 1px solid black;
	border-left: none;
	border-bottom: none;
}

article.album > div.cover > div.label > h1.title > p.artist > a {
	display:block;
	text-align:right;
    background: linear-gradient(0.4turn, #ffe680, #916f6f);
	padding: 5px 10px 4px 15px ;
	margin: 0;
	text-decoration: none;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	position:relative;
	z-index:1;
}


article.album > div.cover > div.label > h1.title > p.artist > a:hover {
	text-shadow:
	0px 0px 3px #fff8,
	0px 0px 3px #fff8,
	0px 0px 3px #fff8;
	color: #ffe68088;
}

article.album > div.cover > div.label,
form.album > div.cover > div.label {
	display: flex;
	flex-flow: column;
	padding: 0 5px 0 0;
	flex-grow: 1;
}
form.album > div.cover > div.label {
	border-radius:8px;
	margin: 7px;
	padding: 7px;
	background: #fff;
	color: #000;
	min-width:300px;
}

article.album > div.cover > div.label > h1.title {
	display:block;
	margin:0 0 5px 0;
	text-align:left;
	font-size:43px;
	font-family: 'Permanent Marker', cursive;
	color:#000;
}

article.album > div.cover > div.label > p.note {
	display:block;
	padding:0;
	margin:0;
	text-align:justify;
}

article.album > div.cover > div.label > .date {
	display: block;
	padding: 0;
	margin: 0 0 5px 0;
	font-family: 'Permanent Marker', cursive;
	font-size: 12px;
	color: #000;
}

article.album p.note > br {
	line-height:1.5;
}

form.album > textarea[name="tracks"] {
	font-family: monospace;
	-webkit-appearance:none;
	resize:vertical;
	border:2px dashed #0006;
	background:#0008;
	color:#fff;
	border-radius:8px;
	margin:3px 5px 7px 5px;
	padding: 5px 10px;
	font-size:100%;
	height:4em;
	min-height:10em;
}

form.album > textarea[name="tracks"]::placeholder {
	color:#000c;
	text-align:center;
}



article.album > ol.tracks {
	display:flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	/*background:#212119;*/
	background:#000d;
	border-radius:15px; /* r */
	margin:0;
	padding:0;
	border:2px solid transparent;
	background-clip: padding-box;
	z-index:0;
	position:relative; /* not needed? */
}

article.album > ol.tracks > article.track {
	margin:20px;
}


article.album > ol.tracks > article.track.missing {
	width:314px;
	height:400px;
	display:flex;
	flex-flow:row;
	align-items:center;
	justify-content:center;
	background:#4445;
}

article.album > ol.tracks > article.track.missing > .slug {
	font-family:monospace;
	color:#888;
	text-align:center;
}

article.album > ol.tracks > article.track > div.number {
	display:block;
	position:absolute;
	top:-10px;
	left:-10px;
	background: linear-gradient(0.4turn, #ffe680, #916f6f);
	padding:4px 10px 5px 9px;
	text-align:center;
	color:#212119;
	border-radius: 5px 0 15px 0;
	font-weight: 600;
}

article.album > ol.tracks > article.track:before {
	content:none;
}

article.track , form.track {
	display:block;
	width:314px; /* w */
	background:#212119;
	border-radius:15px; /* r */
	position:relative;
	border: solid 1px transparent;
	background-clip: padding-box;
	font-family: 'Rock Salt', cursive;
	font-size:16px;
	line-height:1.2;
}
form.track {
	margin: 20px;
}
article.track:before , form.track:before {
	content:'';
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	z-index:-1;
	margin:-1px;
	border-radius:inherit;
	background: linear-gradient(0.4turn, #ffe680, #916f6f);
}
article.track > img.cover, form.track > label.cover {
	margin:7px; /* m */
	display:block;
	background:#222;
	border-radius:8px; /* r - m */
	width:300px; /* w - 2*m */
	height:300px;
}

form.track > label.cover {
	display:flex;
	background:#000;
	flex-flow:column;
	align-items:center;
	justify-content:center;
	background-size:contain;
	background-repeat:no-repeat;
}
article.track > audio, form.track > label.audio {
	display:block;
	width:300px;
	height:30px;
	margin:0 7px;
	border-radius:8px;
	background:#000;
}
form.track > label.audio {
	height:auto;
	padding:5px 10px;
	width:278px;
	display:flex;
	flex-flow:row wrap;
	align-items:center;
	justify-content:center;
	border:1px dashed #fff;
}

form.track > label.audio > input {
	width:100px;
	margin:0 0 0 10px;
	flex-grow:1;
}
article.track > div.label  {
	background:#f00;
	background: linear-gradient(0.4turn, #ffe680, #916f6f);
	background-clip:text;
	-webkit-background-clip:text;
	color:#0000;
	padding:5px 10px;
	display:flex;
	flex-flow:column;
}
form.track > div.label  {
	margin:7px 7px;
	border-radius:8px;
	background:#fff;
	color:#000;
	padding:5px 10px;
	display:flex;
	flex-flow:column;
}

article.track > div.label > h1.title,
form.track > div.label > input[name="title"],
form.album > div.cover > div.label > input[name="title"],
form.artist > div.cover > div.label > input[name="name"]
{
	display:block;
	padding:0;
	margin:0 0 5px 0;
	text-align:center;
	font-size:23px;
	font-family: 'Permanent Marker', cursive;
	/*text-shadow: -1px -2px 3px #fff3;*/
}

form.artist > div.cover > div.label > input,
form.artist > div.cover > div.label > textarea {
	background: #fff2;
	color:#fff;
}

h1.title > a {
	color:inherit;
	text-decoration: none;
	color:#0008;
	text-shadow: 0px 0px 3px #0003;
}

h1.title > a:hover {
	color:#000;
	text-shadow: 0px 0px 3px #fff;
}

h1.title > a:before {
	content:' ↪';
	font-size:17px;
}

form.track input[type="file"] ,
form.album input[type="file"] ,
form.artist input[type="file"] {
	font-family:'Anonymous Pro', monospace;
	font-size:13px;
}

form.track > div.label > input[name="title"] ,
form.album > div.cover > div.label > input[name="title"],
form.artist > div.cover > div.label > input[name="name"] {
	-webkit-appearance:none;
	border:none;
	border-bottom:2px dashed #bbb;
	background:none;
}

form.track > div.label > ::placeholder ,
form.album > div.cover > div.label > ::placeholder {
	color:#ccc;
	text-align:center;
}

form.track > div.label > input[name="slug"] ,
form.album > div.cover > div.label > input[name="slug"] {
	-webkit-appearance:none;
	border:none;
	border-bottom:2px dashed #bbb;
	background:none;
	font-family: 'Anonymous Pro', monospace;
	font-size: 15px;
}

form.track > div.label > textarea[name="description"] ,
form.album > div.cover > div.label > textarea[name="description"],
form.artist > div.cover > div.label > textarea[name="description"] {
	-webkit-appearance:none;
	resize:vertical;
	border:2px dashed #bbb;
	border-radius:8px;
	margin:7px 0 5px 0;
	padding: 5px 10px;
	font:inherit;
	font-size:100%;
	height:4em;
	min-height:4em;
	flex-grow:1;
}

form.track > div.label > div.dateTime,
form.album > div.cover > div.label > div.dateTime {
	text-align:center;
}
form.track > div.label > div.dateTime > input,
form.album > div.cover > div.label > div.dateTime > input {
	font-family: 'Anonymous Pro', monospace;
	font-size:14px;
	line-height:16px;
}

form.track > div.label > label[for="listed"],
form.album > div.cover > div.label > label[for="listed"] {
	color:#444;
	text-align:center;
	font-family:'Anonymous Pro', monospace;
	font-size:14px;
	line-height:auto;
}
form.track > div.label > label[for="listed"] > input,
form.album > div.cover > div.label > label[for="listed"] > input {
	width:15px;
	height:15px;
	vertical-align:middle;
}

#dangerZone {
	display:flex;
	flex-flow: row;
	margin:7px 20px 5px 20px;
	padding:0;
	align-items:center;
}

#dangerZone > label {
	user-select:none;
	display:block;
	flex-grow:1;
	margin:0;
	padding: 5px;
	border-radius:8px;
	color:#544;
	background:#5444;
	border:2px dashed #544;
	border-radius:8px;
	text-align:center;
}
#dangerZone > input {
	display:none;
}

#dangerZone > input:checked ~ label {
	background:#622;
	color:#f55;
	border-color:#f55;
}

#dangerZone > label::after {
	content:"?"
}
#dangerZone > input:checked + label::after {
	content:"!"
}


form.track > input[type="submit"],
form.album > input[type="submit"],
form.artist > input[type="submit"] {
	display:block;
	margin: 0 auto 7px auto;
}

article.track > div.label > p.note {
	display:block;
	padding:0;
	margin:0;
	text-align:justify;
}
article.track > div.label > p.note > br {
	line-height:1.5;
}

article.track > div.label > .dateArtist {
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-end;
	margin: 0 0 -6px 0;
	padding: 0;
}

article.track > div.label > .dateArtist > .artist {
	display:block;
	background: linear-gradient(0.4turn, #ffe680, #916f6f);
	padding:4px 10px 5px 9px;
	margin:0 -11px 0 0;
	text-align:right;
	align-self:flex-end;
	color:#212119;
	border-radius: 5px 0 15px 0;
}

article.track > div.label > .dateArtist > .date {
	display: block;
	padding: 0;
	margin: 5px 0 5px 0;
	font-family: 'Permanent Marker', cursive;
	font-size: 12px;
	color: #0008;
	flex-grow:1;
	text-align:center;
	align-self:flex-end;
}

article.track  p.artist > a {
	font-weight:600;
	text-decoration:none;
	color:inherit;
}

article.track  p.artist a:hover {
	text-shadow:
	0px 0px 3px #fff8,
	0px 0px 3px #fff8,
	0px 0px 3px #fff8;
}

/* --- artist page --- */

#artistPage > main {
	display:flex;
	flex-flow:column;
}

#editArtistPage > main > form.artist {
	display:flex;
	flex-flow:column;
	align-self:stretch;
	background:#fff2;
	margin: 20px 20px 0 20px;
	border-radius: 15px;
}

#editArtistPage > main > form.artist > .cover {
	display:flex;
	flex-flow: row;
}

#artistPage > main > .cover {
	display:flex;
	flex-flow: row;
	background:#fff2;
	margin: 20px 20px 0 20px;
	border-radius: 15px;
}

#artistPage > main > .cover > img,
#editArtistPage > main > form.artist > .cover > label.artwork {
	display:block;
	width:240px;
	height:240px;
	margin:7px;
	border-radius:8px;
}


#editArtistPage > main > form.artist > .cover > label.artwork {
	display:flex;
	background:#000d;
	flex-flow:column;
	align-items:center;
	justify-content:center;
	background-size:contain;
	background-repeat:no-repeat;
	color:#fff;
}

#editArtistPage > main > form.artist > .cover > .label {
	flex-grow:1;
	display: flex;
	flex-flow: column;
	padding:0 7px 0 0;
	min-width:400px;
}

#artistPage > main > .cover > .label {
	flex-grow:1;
	display: flex;
	flex-flow: column;
	padding:0 7px 0 0;
}

#artistPage > main > .cover > .label > h1 {
	padding:0;
    margin:0 0 10px 0;
    text-align: left;
    font-size: 43px;
    font-family: 'Permanent Marker', cursive;
    color: #fff;
}

#artistPage > main > .cover > .label > p {
    margin: 10px 0 0 0;
    padding: 0;
    font-family: 'Rock Salt', cursive;
    font-size: 16px;
    line-height: 1.2;
	color:#eee;
}

#artistPage > main > .cover > .label > p a {
	color:inherit;
	text-decoration:underline;
}

#artistPage > main > .cover > .label > p a:hover {
	color:#fff;
}

#editTrackPage > h1, #addTrackPage > h1,
#editAlbumPage > h1, #addAlbumPage > h1,
#editArtistPage > h1,
#loginPage > main > h1,
#artistPage > main > h2 {
	padding:0 20px;
    margin:20px 20px 0 20px;
	align-self: start;
    text-align: left;
    font-size: 43px;
    font-family: 'Permanent Marker', cursive;
	border-bottom: 4px solid #fff;
    color: #fff;
}

#artistPage > main > h2 > span {
    font-size: 32px;
	color: #888;
	padding:0 5px;
}

#artistPage > main > ul.albums {
	display:flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	margin:0;
	padding:0;
}

#artistPage > main a {
	color:inherit;
	text-decoration:none;
}

#artistPage > main > ul.albums > .album:hover {
	box-shadow: 0 0 6px 2px #fff8;
	background: linear-gradient(0.4turn, #fff6a0, #a17f7f);
}
#artistPage > main > ul.albums > .album {
	display:flex;
	flex-flow:row;
	width:454px;

	background: linear-gradient(0.4turn, #ffe680, #916f6f);
	border-radius:15px;
	position:relative;
	border: none;
	background-clip: padding-box;
	font-family: 'Rock Salt', cursive;
	font-size:16px;
	line-height:1.2;
}

#artistPage > main > ul.albums > .album > img.cover {
	margin:7px;
	display:block;
	border-radius:8px;
	width:220px;
	height:220px;
}

#artistPage > main > ul.albums > .album > div.label  {
	color:#000;
	padding:5px 10px 5px 0;
	display:flex;
	flex-flow:column;
}

#artistPage > main > ul.albums > .album > .label > .title {
	display: block;
	padding: 0;
	margin: 0;
	font-size: 26px;
	font-family: 'Permanent Marker', cursive;
}

#artistPage > main > ul.albums > .album > .label > .date {
	display: block;
	padding: 0;
	margin: 0 0 2px 0;
	font-family: 'Permanent Marker', cursive;
	font-size: 12px;
	color: #000;
}

#artistPage > main > ul.albums > .album > .label > .trackCount {
	display: block;
	padding: 0;
	margin: 0 0 7px 0;
	font-family: 'Permanent Marker', cursive;
	font-size: 12px;
	color: #0008;
	background:#0002;
}

#artistPage > main > ul.albums > .album > .label > .note {
    display: block;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

#artistPage > main > ul.albums > .album {
	margin:20px;
}


#artistPage > main > ul.tracks > article.track {
	margin:20px;
}

#artistPage > main > ul.tracks {
	display:flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	margin:0;
	padding:0;
}

#artistPage > main > ul.tracks > article.track {
	margin:20px;
}


#artistPage > main > ul.tracks > article.track > .label > .date {
	display: block;
	padding: 0;
	margin: 0;
	font-family: 'Permanent Marker', cursive;
	font-size: 12px;
	color: #0000;
	align-self:flex-end;
}


#loginPage > main {
	display:flex;
	flex-flow:column;
}

#loginPage > main > form.login {
	margin: 20px 0;
	display:grid;
	grid-template-columns: auto 1fr;
	background: #fff2;
	border: 4px solid #fff;
	border-radius: 8px;
	padding:15px;

    font-size: 20px;
    font-family: 'Permanent Marker', cursive;
	color:#fff;
}

#loginPage > main > form.login > p {
	margin:0 0 15px 0;
	padding:0;
	grid-column: 1 / 3;
}
#loginPage > main > form.login > label {
	grid-column: 1 / 2;
	align-self:center;
	justify-self:end;
	color:#fffc;
}
#loginPage > main > form.login > input {
	grid-column: 2 / 3;
	margin: 5px 0 5px 5px;
}
#loginPage > main > form.login > input[type="submit"] {
	grid-column: 1 / 3;
	margin: 10px 0 0 0;
	align-self:center;
	justify-self:center;
}