/*!
Theme Name: playlists
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: playlists
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/
body {
  margin: 0;
  padding: 1em; }
  @media screen and (min-width: 40em) {
    body {
      padding: 2em; } }
html {
  --bg-color: #17181d;
  background: var(--bg-color);
  font-family: "ISOv0.6-Regular", sans-serif;
  color: #cfbca2; }

img {
  width: 100%;
  height: auto; }

p {
  margin-top: 0; }

/*

#B9E486

 #B1D9FB

 #F6EE75

 #E5B5F8

 #F9DCA9

#D9D8FD
	
*/
.nav-menu li {
  position: relative;
  --the-link-color: #bfa987;
  /*		
		&:nth-child(4n-1) {
			--the-link-color: #B1D9FB;
		}
		&:nth-child(4n-2) {
			--the-link-color: #F6EE75;
		}
		&:nth-child(4n-3) {
			--the-link-color: #D9D8FD;
		}
		&:nth-child(4n-3) {
			--the-link-color: #F9DCA9
		}
*/ }
  .nav-menu li a {
    color: var(--the-link-color);
    transition: 0.4s all ease; }
    .nav-menu li a:visited {
      color: var(--the-link-color); }
    .nav-menu li a:after {
      position: absolute;
      bottom: 0;
      left: calc(50% - 0.2rem);
      content: '';
      width: 0.4rem;
      height: 0.4rem;
      background: transparent;
      border-radius: 50%;
      bottom: -1.6rem;
      opacity: 1;
      transition: 0.4s background ease; }
  .nav-menu li.current-menu-item a:after {
    background: var(--the-link-color); }
  .nav-menu li.current-menu-item a,
  .nav-menu li a:hover,
  .nav-menu li a:focus {
    --the-link-color: #fff; }

.main-navigation {
  margin: 2em 0;
  text-align: center; }

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0; }
  @media screen and (max-width: 40em) {
    .nav-menu {
      display: grid;
      grid-template-columns: 1fr 1fr; } }
  .nav-menu li {
    margin: 1em 0;
    padding: 0; }
    @media screen and (min-width: 40em) {
      .nav-menu li {
        display: inline;
        margin: 0 2em 0 0; }
        .nav-menu li:last-child {
          margin: 0; } }
  .nav-menu a {
    font-weight: 100;
    transition: 0.4s text-shadow ease;
    font-size: clamp(3rem, 7vw, 7rem);
    font-family: "VCGosh-ExtraCondensedBold"; }
    .nav-menu a:hover {
      background-size: 40% 100%; }
    @media screen and (min-width: 40em) {
      .nav-menu a {
        font-size: 4em; } }
.home .main-navigation {
  text-align: center; }

.masthead {
  font-size: 1em; }

@keyframes bmw {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

html, html * {
  box-sizing: border-box; }

.masthead {
  margin-left: 7.4em; }

a {
  text-decoration: none; }

.records {
  margin-top: 3em;
  padding: 1em; }
  @media screen and (min-width: 40em) {
    .records {
      display: grid;
      grid-gap: 2em;
      grid-template-columns: 1fr 1fr; } }
  @media screen and (min-width: 60em) {
    .records {
      grid-gap: 2.3em;
      grid-template-columns: 1fr 1fr 1fr; } }
/*
h1 {
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px; width: 1px;
	overflow: hidden;
	position: absolute !important;
}
*/
.record {
  line-height: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font-size: 100%; }
  .record:after {
    position: absolute;
    border-radius: 50%;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(#200 0%, #200 0.78125%, #271d14 0.78125%, #271d14 1.5625%, #200 1.5625%, #200 2.34375%, #271d14 2.34375%, #271d14 3.125%, #200 3.125%, #200 3.90625%, #271d14 3.90625%, #271d14 4.6875%, #200 4.6875%, #200 5.46875%, #271d14 5.46875%, #271d14 6.25%, #200 6.25%, #200 7.03125%, #271d14 7.03125%, #271d14 7.8125%, #200 7.8125%, #200 8.59375%, #271d14 8.59375%, #271d14 9.375%, #200 9.375%, #200 10.15625%, #271d14 10.15625%, #271d14 10.9375%, #200 10.9375%, #200 11.71875%, #271d14 11.71875%, #271d14 12.5%, #200 12.5%, #200 13.28125%, #271d14 13.28125%, #271d14 14.0625%, #200 14.0625%, #200 14.84375%, #271d14 14.84375%, #271d14 15.625%, #200 15.625%, #200 16.40625%, #271d14 16.40625%, #271d14 17.1875%, #200 17.1875%, #200 17.96875%, #271d14 17.96875%, #271d14 18.75%, #200 18.75%, #200 19.53125%, #271d14 19.53125%, #271d14 20.3125%, #200 20.3125%, #200 21.09375%, #271d14 21.09375%, #271d14 21.875%, #200 21.875%, #200 22.65625%, #271d14 22.65625%, #271d14 23.4375%, #200 23.4375%, #200 24.21875%, #271d14 24.21875%, #271d14 25%, #200 25%, #200 25.78125%, #271d14 25.78125%, #271d14 26.5625%, #200 26.5625%, #200 27.34375%, #271d14 27.34375%, #271d14 28.125%, #200 28.125%, #200 28.90625%, #271d14 28.90625%, #271d14 29.6875%, #200 29.6875%, #200 30.46875%, #271d14 30.46875%, #271d14 31.25%, #200 31.25%, #200 32.03125%, #271d14 32.03125%, #271d14 32.8125%, #200 32.8125%, #200 33.59375%, #271d14 33.59375%, #271d14 34.375%, #200 34.375%, #200 35.15625%, #271d14 35.15625%, #271d14 35.9375%, #200 35.9375%, #200 36.71875%, #271d14 36.71875%, #271d14 37.5%, #200 37.5%, #200 38.28125%, #271d14 38.28125%, #271d14 39.0625%, #200 39.0625%, #200 39.84375%, #271d14 39.84375%, #271d14 40.625%, #200 40.625%, #200 41.40625%, #271d14 41.40625%, #271d14 42.1875%, #200 42.1875%, #200 42.96875%, #271d14 42.96875%, #271d14 43.75%, #200 43.75%, #200 44.53125%, #271d14 44.53125%, #271d14 45.3125%, #200 45.3125%, #200 46.09375%, #271d14 46.09375%, #271d14 46.875%, #200 46.875%, #200 47.65625%, #271d14 47.65625%, #271d14 48.4375%, #200 48.4375%, #200 49.21875%, #271d14 49.21875%, #271d14 50%, #200 50%, #200 50.78125%, #271d14 50.78125%, #271d14 51.5625%, #200 51.5625%, #200 52.34375%, #271d14 52.34375%, #271d14 53.125%, #200 53.125%, #200 53.90625%, #271d14 53.90625%, #271d14 54.6875%, #200 54.6875%, #200 55.46875%, #271d14 55.46875%, #271d14 56.25%, #200 56.25%, #200 57.03125%, #271d14 57.03125%, #271d14 57.8125%, #200 57.8125%, #200 58.59375%, #271d14 58.59375%, #271d14 59.375%, #200 59.375%, #200 60.15625%, #271d14 60.15625%, #271d14 60.9375%, #200 60.9375%, #200 61.71875%, #271d14 61.71875%, #271d14 62.5%, #200 62.5%, #200 63.28125%, #271d14 63.28125%, #271d14 64.0625%, #200 64.0625%, #200 64.84375%, #271d14 64.84375%, #271d14 65.625%, #200 65.625%, #200 66.40625%, #271d14 66.40625%, #271d14 67.1875%, #200 67.1875%, #200 67.96875%, #271d14 67.96875%, #271d14 68.75%, #200 68.75%, #200 69.53125%, #271d14 69.53125%, #271d14 70.3125%, #200 70.3125%, #200 71.09375%, #271d14 71.09375%, #271d14 71.875%, #200 71.875%, #200 72.65625%, #271d14 72.65625%, #271d14 73.4375%, #200 73.4375%, #200 74.21875%, #271d14 74.21875%, #271d14 75%, #200 75%, #200 75.78125%, #271d14 75.78125%, #271d14 76.5625%, #200 76.5625%, #200 77.34375%, #271d14 77.34375%, #271d14 78.125%, #200 78.125%, #200 78.90625%, #271d14 78.90625%, #271d14 79.6875%, #200 79.6875%, #200 80.46875%, #271d14 80.46875%, #271d14 81.25%, #200 81.25%, #200 82.03125%, #271d14 82.03125%, #271d14 82.8125%, #200 82.8125%, #200 83.59375%, #271d14 83.59375%, #271d14 84.375%, #200 84.375%, #200 85.15625%, #271d14 85.15625%, #271d14 85.9375%, #200 85.9375%, #200 86.71875%, #271d14 86.71875%, #271d14 87.5%, #200 87.5%, #200 88.28125%, #271d14 88.28125%, #271d14 89.0625%, #200 89.0625%, #200 89.84375%, #271d14 89.84375%, #271d14 90.625%, #200 90.625%, #200 91.40625%, #271d14 91.40625%, #271d14 92.1875%, #200 92.1875%, #200 92.96875%, #271d14 92.96875%, #271d14 93.75%, #200 93.75%, #200 94.53125%, #271d14 94.53125%, #271d14 95.3125%, #200 95.3125%, #200 96.09375%, #271d14 96.09375%, #271d14 96.875%, #200 96.875%, #200 97.65625%, #271d14 97.65625%, #271d14 98.4375%, #200 98.4375%, #200 99.21875%, #271d14 99.21875%, #271d14 100%);
    background-size: contain;
    z-index: -2; }
  .record img {
    width: 100%;
    transition: 0.4s ease all; }

.shine-container {
  display: none; }
  @media screen and (min-width: 40em) {
    .shine-container {
      display: block;
      position: absolute;
      border-radius: 50%;
      overflow: hidden;
      height: 100%;
      width: 100%; } }
.shine-container .shine-blur {
  filter: blur(20px) !important;
  border: calc(16.5vw - 2em) solid #fff;
  border-left-color: transparent;
  border-right-color: transparent;
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  mix-blend-mode: overlay; }

.record-title {
  font-weight: normal;
  font-size: 1.2rem;
  color: #fff; }
  @media screen and (min-width: 40em) {
    .record-title {
      left: 0;
      opacity: 0;
      position: absolute;
      transition: all ease 0.6s;
      top: 0;
      z-index: 99; } }
.record-container {
  position: relative; }
  .record-container.has-border {
    border: 1px solid #444; }
  .record-container a:hover,
  .record-container a:focus,
  .record-container a:active {
    border: none;
    position: relative; }
    .record-container a:hover .record-title,
    .record-container a:focus .record-title,
    .record-container a:active .record-title {
      opacity: 1; }
    .record-container a:hover .record,
    .record-container a:focus .record,
    .record-container a:active .record {
      box-shadow: 0 0 2em #30f;
      animation: bmw 1.2s linear infinite;
      will-change: transform;
      border-radius: 50%; }
      .record-container a:hover .record img,
      .record-container a:focus .record img,
      .record-container a:active .record img {
        border-radius: 50%;
        transform: scale(0.4); }

.records {
  overflow: hidden; }

path, polygon {
  fill: #f00; }

.masthead__container {
  overflow: hidden;
  position: relative; }
  .masthead__container:after {
    content: '';
    position: absolute;
    height: 2px;
    border-top: 1px solid #fff;
    /* left: 100%; */
    left: 6em;
    right: 4em;
    top: 50%;
    opacity: 0.1; }

.about-link {
  background: var(--bg-color);
  margin: 0;
  position: relative;
  z-index: 10;
  padding: 0 1rem; }

.masthead__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; }

.csi-link {
  position: relative;
  position: absolute;
  right: 0; }
  .csi-link a {
    color: #fff;
    font-size: 1.2em;
    display: inline-block; }

@keyframes sweep {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

details {
  transition: 0.4s all ease;
  padding: 1em 4em;
  max-width: 54em;
  margin: 0 auto; }
  details a {
    transition: 0.4s all ease; }
    details a:link, details a:visited {
      background: #fff;
      color: #000; }
      details a:link:hover, details a:visited:hover {
        background: #17181d;
        color: #b4b7bd; }
  details summary {
    color: #f0a;
    position: relative;
    transition: 0.4s opacity ease; }
    details summary:hover {
      color: #fff; }
    details summary:before {
      position: absolute;
      margin-left: -1em;
      -webkit-text-stroke: 1px;
      position: absolute;
      content: "+";
      font-weight: normal;
      transition: 0.4s all ease; }
  details p {
    color: #000;
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.4; }
  details[open] {
    padding: 1em;
    background: #b4b7bd;
    box-shadow: 0 0.4em 1em #000; }
    @media screen and (min-width: 40em) {
      details[open] {
        padding: 1em 4em 4em; } }
    details[open] summary {
      margin-bottom: 2em;
      color: #000; }
      details[open] summary:before, details[open] summary:after {
        transform: rotate(45deg) scale(1.1); }
  details summary {
    display: block;
    margin-bottom: 1em;
    transition: 0.4s all ease;
    text-align: center; }
    details summary ~ * {
      animation: sweep .5s ease-in-out; }
    details summary:hover {
      cursor: pointer; }
    details summary:focus {
      color: #fff;
      outline: 1px dotted #f00; }
    details summary::-webkit-details-marker {
      display: none; }

/*
	Mailchimp signup
	================		
	
	This is for the form I use across all my sites.	
*/
/*	Layout
	======

html {
	--mailchimp-signup--ui-padding: 1em;
}	
.email-signup {
	box-shadow: inset 0 0.1em 0.2em rgba(0,0,0,0.4);
	background: #8f949e;
	padding: var(--mailchimp-signup--padding, 1em);
	border: 1px solid #000;

	border-top-color: #444;
	border-left-color: #ccc;
	border-right-color: #ccc;
	border-bottom-color: #ddd;
	
	form {
		margin-bottom: 0.6em;
	}
	input.email {
		padding: var(--mailchimp-signup--ui-padding, 0.4em 0.6em);
		width: 100%;
	}
	input.button {
		padding: var(--mailchimp-signup--ui-padding, 0.4em 0.6em);
	}
	.mc-field-group {
		flex: 1;
		position: relative;
	}
	#mc_embed_signup_scroll {
		position: relative;
		
		@include medium() {
			display: flex;
		}
	}
}

/*	Theming
	======= */
/*
	
:root {
	--mailchimp-signup--bg: transparent;
	--mailchimp-signup--ui-padding: 1rem;
}

.email-signup {
	input {
		background: transparent;
		border: 1px solid transparent;
		font-family: $monospace;
		font-size: 1.4em;
		appearance: none;
		-webkit-appearance: none;
		width: 100%;
	}
}
form {
	border: 6px solid #0f0;
	background: transparent;
}
#mc_embed_signup {
	color: #9e8496;
	
	p {
		font-family: $monospace;
	}
}

input[type="submit"] {
	background: #0f0;
	border: 6px solid #8f949e;
	transition: 0.4s background ease;
	
	&:hover {
		background: #fff;
		cursor: pointer;
	}
}

::-webkit-input-placeholder { // Chrome/Opera/Safari
  color: #bbb;
}
::-moz-placeholder { // Firefox 19+
  color: #bbb;
}
:-ms-input-placeholder { // IE 10+
  color: #bbb;
}
:-moz-placeholder { // Firefox 18-
  color: #bbb;
}

.email-signup {
	margin-top: 2em;
	padding: 1em;
	
	p {
		font-size: 1em;
	}
	form {
		margin-bottom: 0;
	}
	label {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
	}
}
.mce-responses {
	position: relative;
}
//	Do not remove the div. MailChimp brilliantly uses the SAME CLASS on
//	the input, so I have to scope it to the error div.
div.mce_inline_error {
	border: none;
	position: absolute;
	bottom: 100%;
	right: 0;
	background-color: #f00 !important;
	box-shadow: 0.4em 0.4em 0 #000;
	margin-left: 1em;
}
#mc_embed_signup input.mce_inline_error {
	border: none;
}
div#mce-success-response {
	background-color: #00f !important;
	z-index: 10;
	padding: 1em;
	width: 100%;
	top: 0;
	height: 100%;
	left: 0;
	color: #fff;
	margin: 0;
	position: absolute;
}
*/
.csi-link {
  display: inline-block;
  color: #fff;
  animation: colorchange 10s linear 0s infinite;
  position: relative;
  display: block; }
  .csi-link svg {
    width: 3em;
    height: 3em; }
  .csi-link:hover polygon, .csi-link:hover path {
    fill: #fff; }

@keyframes colorchange {
  0% {
    filter: hue-rotate(0deg) brightness(100%); }
  20% {
    filter: hue-rotate(72deg) brightness(180%); }
  50% {
    filter: hue-rotate(180deg) brightness(180%); }
  100% {
    filter: hue-rotate(360deg) brightness(100%); } }

/*
@keyframes colorchange {
	0% {
		fill: rgb(255, 0, 0);
	}
	16.6% {
		fill: rgb(255, 0, 255);
	}
	33.3% {
		fill: rgb(0, 100, 255);
	}
	50% {
		fill: rgb(0, 255, 255);
	}
	66.6% {
		fill: rgb(0, 255, 0);
	}
	83.3% {
		fill: rgb(255, 255, 0);
	}
	100% {
		fill: rgb(255, 0, 0);
	}
}
*/
.site-title {
  transition: 0.4s opacity ease; }
  .site-title:link, .site-title:visited {
    font-weight: bold;
    color: #fff; }
    .site-title:link:hover, .site-title:visited:hover {
      opacity: 0.6; }

div#about {
  padding: 8em 4em 4em;
  text-align: center;
  color: #888;
  transition: 0.4s opacity ease; }
  div#about a:link, div#about a:visited {
    border-bottom: 1px solid #888;
    color: #fff; }
    div#about a:link:hover, div#about a:visited:hover {
      opacity: 0.6; }

.menu-toggle {
  display: none; }

a {
  color: #95ffb7;
  background-image: linear-gradient(180deg, transparent 95%, currentColor 0);
  background-size: 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: all .4s ease;
  transition: all .4s ease; }
  a:hover, a:focus {
    color: #fff; }

a:hover {
  background-size: 100% 100%; }

.archive .page-header {
  margin: 1rem 0 6rem 0; }

.archive .supertitle {
  display: block;
  font-family: "ISOv0.6-Regular", sans-serif;
  text-transform: uppercase; }

.archive .main-title {
  background-image: linear-gradient(180deg, transparent 98%, currentColor 0);
  background-size: 8rem 100%;
  background-repeat: no-repeat;
  display: block;
  font-family: "VCGosh-ExtraCondensedBold";
  font-size: 6rem;
  padding-bottom: 1rem;
  line-height: 1; }

.wp-block-archives-list.wp-block-archives {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1rem;
  row-gap: 0.4rem; }
  .wp-block-archives-list.wp-block-archives a {
    display: block;
    padding: 0.1rem 0;
    font-family: "ISOv0.6-Regular", sans-serif;
    font-size: 1.2rem; }

.single-post article {
  display: flex;
  gap: 2rem;
  margin-top: 3rem; }

.single-post .entry-title {
  font-weight: normal;
  margin: 0; }

.single-post .post-thumbnail {
  width: 40rem; }

.single-post .site-main {
  max-width: 60rem;
  margin: 0 auto; }

.archive.date:not(.is-month) .page-header {
  display: none; }

.page-template-default .entry-content {
  font-family: "Calendas Plus";
  font-size: 1.4rem;
  line-height: 1.3; }

.page-about .main-navigation {
  margin: 4rem 0; }

.page-about .wp-block-archives-list.wp-block-archives {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  margin-top: 2rem; }
  .page-about .wp-block-archives-list.wp-block-archives a {
    display: block; }

.icon-spotify {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 2rem 0; }
  .icon-spotify a {
    color: #1DB954; }
  .icon-spotify .svg-spotify {
    width: 1.4rem; }
    .icon-spotify .svg-spotify path {
      fill: #1DB954; }