:root {
  --bg-color: #1F1C2C;
  --bg-contrast-lite: rgba(255, 255, 255, .3);
  --text-primary: rgba(255,255,255,.75); 
  --text-bold: rgba(255,255,255,.95); ;
  --text-lite: #f9f9f9;
  --link-color: #D91E53;
  --text-muted: grey; 
  --font-body: 18px;
  --font-body-md: 16px;
  --font-body-sm: 14px;
  --font-xs: 12px;
  --fixed-height-container: calc(98vh - 50px);
  --img-width-xs-b: 48px;
  --img-width-xs: 100px;
  --img-width-sm: 140px;
  --img-width-md: 240px;
  --img-width-lg: 360px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,'Helvetica Neue', sans-serif; --font-monospace: 'SFMono-Regular', Andale Mono, Consolas, 'Liberation Mono', Menlo, monospace; --font-serif: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif; 
}


.small {font-size: var(--font-body-sm);}
.x-small {font-size: var(--font-xs);}
.text-monospace {font-family: monospace;}

strong {color: var(--text-bold);}

.inline-div-block > div {display: inline-block; float: left;}
.inline-div-block > div p {width: 80px; text-align: center; font-size: 0.75rem; line-height: 0.9rem;}
.inline-div-block img {border: none !important;}

article {
  /*width: 50%;*/
  margin-left: auto;
  margin-right: auto;
}
.marginnote {
  float: right;
  width: 20%;
  margin-right: -21%;
  position: relative;
  transform: translateY(-30%);
}

aside > p, li, span {font-size: .9rem; line-height: 1.2rem;}

pre {
	background: var(--bg-contrast-lite);
	color: var(--text-lite);
	border-radius: 8px;
	width: 100%;
	padding: 12px;

}

body {
	background: var(--bg-color);
}

p.text-lite {color: var(--text-lite);}

a {color: var(--link-color);}

a > p {color: var(--link-color); text-decoration:underline;}

p, span, li {color: var(--text-primary);}

p, li {line-height: 1.5rem;}

span.title {color: var(--text-lite);}
span.subtitle {color: var(--text-muted);}

.text-muted {color: var(--text-muted);}

hr {border-top: 4px solid var(--link-color);}

.blockquote {
	border: 1px dotted #2b2b2b;
	width: 25%;
	padding: 8px;
	margin: 8px;
}

nav {
	padding: .25% 1%;
}

ul.nav-items > li {
	display: inline;
	margin-right: 16px;
}

ul.list-spacing > li {
	padding-bottom: 12px;
}

li.list-spacing {
	margin-bottom: 0.75rem;
}

.list-items > li {
	margin-left: 0 !important;
}

.img-icon {
	padding: 12px;
}

blockquote > p {margin: 8px 0 24px 24px; max-width: 300px;}
blockquote {border-left:2px solid #2b2b2b;}

img.img-align {
	padding: 12px;
}
img.review-thumbnail {width: 300px;}

img.img-spacing {padding: 12px;}

img.img-spacing-sm {padding: 4px;}

img.img-thumb-xs-b {width: var(--img-width-xs-b);} 

img.img-thumb-xs {width: var(--img-width-xs);} 

img.img-thumb-sm {width: var(--img-width-sm);}

img.img-thumb-md {width: var(--img-width-md);}

img.img-thumb-lg {width: 350px; margin-bottom: 8px;}

img.img-thumb-xl {width: 480px; margin-bottom: 8px;}

img.img-border {border: 1px solid #D91E538C;}

video {max-width: 100%;}


/*TYPOGRAPHY*/


p, a, span, figcaption, blockquote, ul, ol, li { color: var(--text-primary); }

h1, h2, h3, h4, h5, h6 { color: var(--link-color); }

h1.xl {font-size: 4rem; font-weight: 900;}

h2.h2-reviews {font-size: 3rem; font-weight: 900 !important;}

h1, h2, h3, h4 {font-weight: 900 !important;}

li.blog {font-size: 1.5rem;}

@media only screen and (width < 540px) {
	h1.xl {font-size: 3rem !important;}
	h2.h2-reviews {font-size: 2rem !important;}
}

article > h2 {
	max-width: 600px;
}

span.x-small {font-size: 0.75rem;}

p.small {
	font-size: 0.9rem;
	line-height: 1.2rem;
	margin-bottom: 2px;
}

p.x-small {
	font-size: 0.75rem;
	line-height: 1rem;
	margin-bottom: 2px;
}

article > p {
	max-width: 750px;
	margin: 24px 0%;
	font-size: 18px;
}

details {margin-bottom: 1.5rem;}


details > p {
	font-size: var(--font-body-md);
	margin-left: 3rem;
	margin-top: 8px;
}

a:hover {color: #f9f9f9;}

a.link-no-underline {text-decoration: none; color: var(--text-muted);}

article > ul {
	padding-left: 3rem;
}

article > ul li {
	margin: 14px 0;
	/*font-family: sans-serif;*/
	font-size: 18px;		
}

article img {border: 1px solid #D91E538C; max-width: 600px;}	

article > details, summary {
	color: var(--text-primary);
}

figure {
	font-size: smaller;
	font-style: italic;
}

span.post-date {
	font-family: monospace;
	font-size: 12px;
	line-height: 14px !important;
	color: var(--text-muted);
}

.span-labels {line-height: 0.9rem; max-width: var(--img-width-xs);}
.span-labels > span {font-size: 0.75rem;}

@media only screen and (width > 992px) {
	.row-padding-homepage {padding: 0 20% !important;}
	.row-padding-md {padding: 0 20% !important;}
}

.row-padding-v { margin-bottom: 3rem; }
.row-padding-h { margin-left: 1rem; margin-right: 1rem;}
.row-padding-h-r { margin: 0 1rem 0 0;}
.row-padding-md {
	padding: 2% 5%;
}

@media only screen and (width < 576px) {
	.marginnote {
		float: none;
		width: 75%;
		margin-left: 3rem;
		position: relative;
		transform: translateY(0);
	}

	.row-padding-md {
		padding: 2% 1%;
	}
	article > p {max-width: 500px;}
	.row-padding-h { margin-left: 0; margin-right: 0;}
	img.img-thumb-sm {width: 100px !important;}
	.blockquote {
		border: 1px dotted #2b2b2b;
		width: 50%;
		padding: 4px;
		margin: 4px;
	}
}
.col-padding-r {
	margin-right: 0.5vw;
}


.row-padding-sm {
	padding: 0 1%;
}

.p-small {
	font-size: 12px;
	margin-bottom: .5px;
}

ul {
	list-style-type: square;
	margin-left: 0px !important;
	padding-left: 0;
}

.track-list {border: 1px solid #2b2b2b; padding: 8px;}

img.img-fluid-sm {max-width: 200px;}

ul, ol {padding-left: 8px;}
ul.list-sidebar > li {font-size: 16px; margin-bottom: 10px;}
ol.list-sidebar > li {font-size: 16px; margin-bottom: 10px;}
ul.track-list > li {
	font-size: 10px; 
	list-style-type: none !important;
	margin-bottom: 10px;}

ul.list-sidebar {padding-top: 25px;}


@media screen and (width > 576px) {

	article > p, h2, h3, ul, ol, summary, details, figcaption, pre {max-width: 660px;} 
	article > ul, ol {padding-left: 3rem;}
	.col > p {max-width: 600px;}
}


.next-review-container > p {
	max-width: var(--img-width-xs);
}

.next-review-container > p:nth-of-type(2){color: var(--text-primary);}

.review-thumb-container {
	max-width: var(--img-width-sm);
	margin-right: 4px;
	/*min-height: 150px;*/
	/*width: var(--img-width-xs);*/
	/*margin: 0 8px;*/

}

.review-thumb-container img {
	max-width: 100%;
	border: 1px solid #D91E538C;
}

@media screen and (max-width: 600px) {

}


details summary { 
  cursor: pointer;
}

/*READ MORE: https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/*/
details summary > * {
  display: inline;
}

/*https://stackoverflow.com/questions/16495162/using-a-calc-to-create-an-auto-sized-element-according-to-aspect-ratio*/
.box {width: calc(25vh*1.778); height: 25vh; border: 4px solid #2b2b2b; margin: 8px;}

.box-reviews {
	background: url('../../../assets/icons/site-icons/vinyl.jpg') no-repeat center center;
	background-size: cover;
}

.box-gigs {
	background: url('../../../assets/icons/site-icons/gigs.jpg') no-repeat center center;
	background-size: cover;
}

.box-blog {
	background: url('../../../assets/icons/site-icons/cat-typing-ez.gif') no-repeat center center;
	background-size: cover;
}

/*video equivalent of background:cover: https://stackoverflow.com/questions/10797632/simulate-background-sizecover-on-video-or-img*/

.box-tv {
	background: url('../../../assets/icons/site-icons/bart-tv-gif.gif') no-repeat center center;
	background-size: cover;
}

#video-thumbnail {
	width: 100% !important;
	height: 24.5vh !important;
	object-fit: cover;
}

.object-cover {
	object-fit: cover;
	width: calc(25vh * 1.778);  
	height: 25vh !important; 
}

.label {
	position: absolute;
	margin-top: -60px;
	z-index: 9999999999;
}

.fixed-height {
	min-height: var(--fixed-height-container);
}

/*HOMEPAGE*/
.sections {
	padding: 1rem;
	border: 2px solid #2b2b2b;
	border-radius: 12px;
	margin: 1rem;
	min-width: 280px;
	min-height: 160px;
}

.section-body > p {color: var(--text-primary); line-height: 1.1rem;}