@font-face {	
	font-family: 'Over the Rainbow'; /*a name to be used later*/
	src: url('/font/OvertheRainbow-Regular.ttf'); /*URL to font*/
}


body {
	margin: 0px;
	background-image: url(/img/background_Jayn_Sparkle.jpg);
	background-positionX: 50%;
	background-positionY: 50%;
	background-repeat: no-repeat;
	background-size: cover;
		
	position: absolute;
	inset: 0 0 0 0;
}

main {

	font-family: "Over the Rainbow", cursive;
	background-image: url(/img/notebook.svg);
	background-repeat: no-repeat;
	background-color: transparent;
	max-width: initial;
	
	position: relative;
	padding: initial;

	width: 7.5in ;
	height: 5.667in;
	background-size: 7.5in 6in;
	line-height: .227in;

	font-size: 12pt;

	margin: initial;
	visibility: hidden;
}

nav
{
	width: 200px;
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	text-align: center;

	display: flex;
	flex-direction: column;
	justify-content: center;

	background-color: #0F0F0F;

	z-index: 2;
}

nav > a
{
	font-size: 20pt;
	text-decoration: none;
	display: block;

	padding: 20px 0px;

	font-weight: bold;
}

nav > a.selected
{
	background-color: #303030;
}

nav > a:hover { background-color: #404040; }



body > div:not(.commentContainer) {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 200px;
	right: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.left {
	position: absolute;
	width: 3.25in;
	left: .35in;
	top: .32in;
}
.right {
	position: absolute;
	width: 3.25in;
	left: 3.95in;
	top: .32in;
}

.hr {
	display: block;
	width: 100%;
	height: 0px;

	position: relative;
	bottom: 6px;
}
.hr > div {
	width: 100%;
	height: 2px;
	background-color: black;
}


#next-page-target,  #next-page-img,  #previous-page-target,  #previous-page-img {
	height: .5in;
	width: .5in;
	position: absolute;
	background-size: .5in .5in;
	bottom: .15in;
	z-index: 2;
	cursor: pointer;
}

#next-page-target,  #next-page-img {
	right: .333in;
}

#next-page-img {
	background-image: url(/img/icon/rt.svg);
}

#previous-page-target,  #previous-page-img {
	left: .333in;
}

#previous-page-img {
	background-image: url(/img/icon/lt.svg);
}

p {
	margin: 0px;
	padding: 0px;
}


ul, .mobile ul { /*See Swear words for good test */
	line-height: .22in;
	margin: 0px;
}

ol, .mobile ol{ /*See MLP episode rankings for test*/
	line-height: .226in;
	margin: 0px;
}


/* Music stuff */

#album-art {
	height: 212px;
	display: block;
	margin: auto;
	margin-bottom: 6px;
}


.album-track .play-icon {
	text-align: center;
	flex-grow: 0;
	flex-shrink: 0;
	width: 12px;
	height: 12px;
}

.nosplit {
	margin: 0px;
}


h1, h2, h3, h1, h2, h3 {
	font-size: 12pt;
	margin: 0px;
	border-bottom: none;
}

.song-row, .song-row {
	height: 65px;
	margin-bottom: 0px;
}

.song-row img.album-art {
	height: 65px;
	width: 65px;
	margin-right: 6px;
}

.card-img, .mobile .card-img {
	width: 100%;
	height: 152px;
}

.youtubeThumb, .mobile .youtubeThumb
{
	height: 152px;
	width: 287px;
}

.icon, .mobile .icon
{
	width: 15px;
	height: 15px;
	margin-right: 10px;
}

.youtubeFrame iframe, .mobile .youtubeFrame iframe
{
	height: 152px;
	width: 287px;
}
.youtubeFrame {
	margin-bottom: 16px;
}