/* ========================================================
 *   F O N T S
 * ----------------------------------------- */
/*
Self-hosting instead of this in the <head>:
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
*/

/* montserrat-200 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('./fonts/montserrat-v31-latin-200.woff2') format('woff2'), /* Modern */
       url('./fonts/montserrat-v31-latin-200.ttf') format('truetype'); /* Legacy */
}

/* montserrat-200italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 200;
  src: url('./fonts/montserrat-v31-latin-200italic.woff2') format('woff2'), /* Modern */
       url('./fonts/montserrat-v31-latin-200italic.ttf') format('truetype'); /* Legacy */
}

/* montserrat-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/montserrat-v31-latin-300.woff2') format('woff2'), /* Modern */
       url('./fonts/montserrat-v31-latin-300.ttf') format('truetype'); /* Legacy */
}

/* montserrat-300italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('./fonts/montserrat-v31-latin-300italic.woff2') format('woff2'), /* Modern */
       url('./fonts/montserrat-v31-latin-300italic.ttf') format('truetype'); /* Legacy */
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/montserrat-v31-latin-regular.woff2') format('woff2'), /* Modern */
       url('./fonts/montserrat-v31-latin-regular.ttf') format('truetype'); /* Legacy */
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/montserrat-v31-latin-700.woff2') format('woff2'), /* Modern */
       url('./fonts/montserrat-v31-latin-700.ttf') format('truetype'); /* Legacy */
}

/* montserrat-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/montserrat-v31-latin-700italic.woff2') format('woff2'), /* Modern */
       url('./fonts/montserrat-v31-latin-700italic.ttf') format('truetype'); /* Legacy */
}

/* montserrat-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('./fonts/montserrat-v31-latin-900.woff2') format('woff2'), /* Modern */
       url('./fonts/montserrat-v31-latin-900.ttf') format('truetype'); /* Legacy */
}

/* montserrat-900italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  src: url('./fonts/montserrat-v31-latin-900italic.woff2') format('woff2'), /* Modern */
       url('./fonts/montserrat-v31-latin-900italic.ttf') format('truetype'); /* Legacy */
}


/* ========================================================
 *   L A N G U A G E S
 * ----------------------------------------- */

.active-lang-en .lang-es { display: none; }
.active-lang-es .lang-en { display: none; }


/* ========================================================
 *   M A I N
 * ----------------------------------------- */

body {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	padding: 0;
	margin: 0;
	background-color: #1C1C1E;
	color: #ECEAE6;
	font-size: 14px;
	line-height: 1.9em;
}

strong { font-weight: 700; }

li {
	line-height: 1.3em;
	padding-bottom: 0.6em;
}


/*-= LINKS =----------------------*/

a {
    color: #F4A26B;
    text-decoration: none;
		border-bottom: 1px solid #674B3A;
}
a:link { color: #F4A26B; }
a:visited, 
a:visited > span { 
	/* color: #a77B5A; */
	color: #c4723B; 
}
a:visited:hover, 
a:visited:hover > span { color: #F4A26B; }
a:hover, 
a:hover > span {
	color: #F4A26B;
	border-bottom: 1px solid #F4A26B;
}
a:active { color: #F4A26B; }


/*-= MAIN BLOCKS =----------------------*/

#toolbar {
	font-size: 80%;
	border-bottom: 1px solid #d0d0d0; 
	background-color: #3C3C3E;
	color: #ffffff;
	padding: 0;
	position: fixed;
	top: 0;
	width: 100%;
	height: 2.5em;
}
#content {
	padding: 3em 3em 3em 3em;
}
footer {
	padding: 0em 3em 0.3em;
	line-height: 1.2em;
	border-top: 1px solid #3C3C3E;
	color: rgb(134, 133, 132);
}

/*-= HEADER =----------------------*/

/*#toolbar strong { font-weight: 700; }*/
#toolbar .logo { 
	font-size: 110%; 
	display: block; 
	padding: 0.1em 0 0 3.5em; 
}
.lang-switcher { 
	display: block !important; 
	text-align: right; 
	float: right; 
	padding: 0.1em 4em 2em 0.1em; 
}
.lang-switcher a:visited { color: #F4A26B; }
.theme-switcher { 
	display: block !important; 
	text-align: right; 
	float: right; 
	padding: 0.1em 2em 2em 0.1em; 
}
.theme-switcher a:visited { color: #F4A26B; }


/*-= PRIMARY ALTERATIONS =--------------*/

li::marker { color: #6C6C6E; }

h1 { 
	font-weight: 900; 
	font-size: 214%; 
	color: #fff;
}
h1 .smaller { 
	font-size: 70%; 
	font-weight: 300; 
	line-height: 1.0em; 
}
h2 { 
	font-weight: 900; 
	font-size: 170%; 
	margin-top: 1em;
	color: #fff;
}
h3 { 
	margin-top: 0; 
	color: #fff;
}

hr { 
	margin: 3em 0 2em; 
	clear: both; 
	border-bottom: 1px solid #6c6c6e;
}
hr.minor { margin: 1em 0 1em 0; height: 1px; border: 0; border-bottom: 1px dotted #3c3c3e; }

.compact {
	line-height: 1.3em;
	margin-bottom: 0.6em;
}

.weight-black { 
	font-weight: 900;
}


/*-= ABOVE THE FOLD =----------------------*/

div.header-img-container {
display: flex; 
align-items: flex-center; 
align-content: center; 
max-height: 400px; 
overflow: hidden; 
margin: 1em -3em 0 -3em; 
padding: 0 3em; 
background-color: #4C2A43; 
background: linear-gradient(180deg,rgba(76, 42, 67, 1) 0%, rgba(52, 17, 41, 1) 100%); 
border-top: 2px solid #101010; 
border-bottom: 1px solid #101010; 
border-right: none; 
border-left: none;
}
div.header-img-container > div {
	margin: -10% auto 0; 
	width: 100%;
}
div.header-img-container > div > img {
	width: 100%; 
	max-width: 700px; 
	margin: auto;
}

div.main-bio { 
	padding: 0 17% 0 0; 
	max-width: 600px; 
	font-size: 127%; 
	font-weight: 200;
	line-height: 1.4em; 
}

.inset { margin-left: 2em; margin-top: 2em; padding-left: 1em; border-left: 1px solid #404040; }




.responsive-2col {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
	margin-left: 1em;
}
.responsive-2col .col {
	padding: 0 4% 0 0;
	width: 96%;
	flex: 46%;
}
.responsive-2col .col hr { display: none; }
@media (max-width: 900px) {
	.responsive-2col {
    flex-direction: column;
  }
	.responsive-2col .col hr { display: block; }
	.responsive-2col .col {
		flex: 96%;
		max-width: 100%;
	}
}

.responsive-3col {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
	margin-left: 1em;
}
.responsive-3col .col hr { display: none; }
.responsive-3col .col {
	padding: 0 4% 0 0;
	width: 96%;
	/* flex: 46%; */
	flex: 29%;
	margin-bottom: 1em;
}
@media (max-width: 1200px) {
	.responsive-3col .col {
    flex: 45%;
		max-width: 45%;
  }
}
@media (max-width: 700px) {
	.responsive-3col {
    flex-direction: column;
  }
	.responsive-3col .col hr { display: block; }
	.responsive-3col .col {
		flex: 96%;
		max-width: 100%;
		margin-bottom: 0;
	}
}



/*-= ALBUMS =----------------------*/

/* div.album { padding: 0 0 1em; } */

img.album-cover {
	min-width: 100px; 
	max-width: 40%; 
	float: right; 
	margin: 0 0 1em 1em; 
	max-height: 300px; 
	border: 1px solid #3c3c3e;
}


img.score {
	min-width: 100px; 
	max-width: 40%; 
	opacity: 80%;
	float: right; 
	margin: 0 0 1em 1em; 
	max-height: 300px; 
	border: 1px solid #3c3c3e;
	border-bottom-color: #000000;
}
img.score:hover { 
	border-top-width: 2px;
	border-bottom-width: 2px;
	margin-top: -2px;
	border-color: #F4A26B; 
	opacity: 100%;
}

/* ========================================================
 *   L I G H T   T H E M E 
 * ----------------------------------------- */

body.theme-light {
	background-color: #fefcfa;
	color: #1C1C1E;
}
body.theme-light hr { border-color: #dcdcde; }
body.theme-light hr.minor { border-color: #acacae; }


body.theme-light img.album-cover { 
	border-color: #dcdcde; 
}
body.theme-light img.score { 
	border-color: #dcdcde; 
	border-bottom-color: #acacae; 
}
body.theme-light img.score:hover { 
	border-top-width: 2px;
	border-bottom-width: 2px;
	margin-top: -2px;
	border-color: #9c9c9e; 
	border-bottom-color: #000000
}
/*
a {
    color: #F4A26B;
    text-decoration: none;
		border-bottom: 1px solid #674B3A;
}
a:link { color: #F4A26B; }
a:visited { color: #a77B5A; }
a:visited:hover { color: #F4A26B; }
a:hover, 
a:hover > span {
	color: #F4A26B;
	border-bottom: 1px solid #F4A26B;
}
a:active { color: #F4A26B; }
*/

body.theme-light a, 
body.theme-light a  > span {
	color: #F4A26B; 
	border-bottom: 1px solid #F4A26B;
}
body.theme-light a:link { 
	color: #F4A26B; 
}
body.theme-light a:visited,
body.theme-light a:visited > span { 
	color: #a77B5A; 
}
body.theme-light a:visited:hover,
body.theme-light a:visited:hover > span { 
	color: #000000; 
}
body.theme-light a:active { 
	color: #F4A26B; 
}
body.theme-light a:hover, 
body.theme-light a:hover > span {
	color: #000000;
	border-bottom: 1px solid #674B3A;
}
body.theme-light h1 { 
	color: #000;
}
body.theme-light h2 { 
	color: #000;
}
body.theme-light h3 { 
	color: #000;
}


body.theme-light #toolbar { 
	border-bottom: 1px solid #101010; 
	background-color: #9C9C9E;
}
body.theme-light #toolbar a,
body.theme-light #toolbar a > span { border-bottom: 1px solid #777; }
body.theme-light #toolbar a:hover, 
body.theme-light #toolbar a:hover > span{ border-bottom: 1px solid #333; }
body.theme-light #toolbar a:link { color: #000; }
body.theme-light #toolbar a:visited { color: #000; }
body.theme-light .theme-switcher a.theme-dark {}
body.theme-light .theme-switcher a.theme-light { font-weight: 700; }
body.theme-dark .theme-switcher a.theme-dark { font-weight: 700; }
body.theme-dark .theme-switcher a.theme-light {}


body.theme-light div.header-img-container {
	background: linear-gradient(180deg,rgba(106, 72, 97, 1) 0%, rgba(92, 57, 81, 1) 100%); 
}

body.theme-light footer {
	border-top: 1px solid #dcdcde;
}