@import url("../styles.css");
.outer {
	padding: 10px;
	width: 450px;
	border: 0px solid #8d9dad;
	border-radius: 5px;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--main);
	background-color: #ffffff;
	margin: 0% auto;
	transform: scale(1.2);
	transform-origin: top center;
}
#playerblock {
	width: 100%;
	padding: 20px 0px 10px 0px;
	text-align: center;
	line-height: 1;
	border: 1px solid #8d9dad;
	border-radius: 10px;
	margin-top: 6px;
}
#formblock {
	width: 100%;
	padding: 20px 0px 0px 0px;
	border: 0px solid #D0E7FF;
	border-radius: 0px;
	text-align: left;
}
h1 {
	font-family: var(--serif);
	font-size: 175%;
	text-transform: capitalize;
	line-height: 25%;
	letter-spacing: -.3px;
	text-align: center;
	margin: 0% auto;
	display: block;
}
.credits {
	font-family: var(--sans);
	font-size: 9pt;
	text-align: center;
	text-transform: capitalize;
	line-height: 100%;
	display: block;
	margin: 10pt auto;
}
.artist {
	font-family: var(--sans);
	font-size: 10pt;
	text-align: center;
	text-transform: capitalize;
	line-height: 100%;
	display: block;
	margin: 5px auto;
}
.subtitle {
	font-family: var(--sans);
	font-size: 9pt;
	text-align: center;
}
.rights, .patent {
	display: inline-block;
	font-family: var(--sans);
	font-size: 8pt;
	margin: 0px auto;
	text-align: center;
	text-transform: capitalize;
	line-height: 1.2;
}
.misc {
	font-family: var(--sans);
	font-size: 8pt;
	margin: 30px auto 15px;
	padding: 0px;
	text-align: center;
	letter-spacing: 0px;
}
.player {
	margin: auto;
	display: block;
	width: 100%;
}
.spacer {
	height: 10px;
	display: block;
}
.edge {
	border-top-width: 0px;
	padding-bottom: 10px;
	border-top-style: dotted;
	padding-top: 10px;
	border-top-color: #82C0FF;
	text-align: center;
	vertical-align: middle;
}
.title {
	text-align: center;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: bold;
}
.title a {
	border-bottom: 2px solid var(--main);
}
#lyrics {
	font-family: var(--serif);
	color: var(--main);
	background-color: #FFFFFF;
	margin: 5% 10%;
	border: 0px dotted #D6EAFF;
}
p {
	margin: 6px 0px;
}
.sect {
	display: inline-block;
	font-family: var(--sans);
	font-size: 8pt;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	font-style: normal;
	color: var(--main);
	border: thin solid var(--main);
	padding: 2px 4px;
}
p .sect {
	margin: 10px 0px 6px 0px;
}
.verse, .chorus, .bridge, .coda {
	font-family: var(--serif);
	font-size: 12pt;
	text-align: left;
	white-space: nowrap;
}
.verse {
	font-style: normal;
	margin-left: 0pt;
}
.chorus {
	font-style: italic;
	margin-left: 20pt;
}
.bridge, .coda {
	font-style: normal;
	margin-left: 20pt;
}
.cue, .subcue {
	font-family: var(--sans);
	font-size: 10pt;
	font-style: italic;
}
.cue {
	margin-left: 45pt;
}
.subcue {
	margin-left: 70pt;
}

/* ----- DUET STYLING ----- */
:root {
 --she:#FFE2E7;
 --he:#D3EDFD;
 --both:#F3E1F3;
}
.block .she, .block .he, .block .both {
	padding:2px 5px;
}
.he {
	background-color:var(--he);
}
.she {
	background-color:var(--she);
}
.both {
	background-color:var(--both);
}
/* -------------------------- */
.copyright {
	font-family: var(--sans);
	font-size: 8pt;
	margin: 30px auto 15px;
	padding: 0px;
	text-align: center;
	letter-spacing: 0px;
}
 .datestamp::before {
 font-family: var(--serif);
 font-size: 12px;
 font-weight: bold;
 color: var(--main);
 content: "Last Updated: ";
}
.datestamp {
	margin: 10px auto;
	text-align: center;
	font-family: monospaced;
	font-size: 12px;
	font-weight: bold;
	color: var(--main);
	border: 0px solid var(--main);
	width: 250px;
	padding: 5px;
}
/*---------- MOBILE SPECIFIC ----------*/
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.outer {
 transform: scale(1);
 transform-origin: top center;
}
}
z