/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Anton&family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Baskervville+SC:wght@400..700&family=Carrois+Gothic+SC&family=Oswald:wght@200..700&family=Saira+Extra+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* define global style variables */
:root {
  --bg-color: black;
  --font-color: floralwhite;
  --accent-color: plum;
  --nav-hover-bg-color: floralwhite;
  --nav-hover-text-color: plum;
  --nav-active-text-color: black;
  --nav-active-bg-color: plum;
  --font-header: "Amatic SC", "Saira Extra Condensed", "Barlow Semi Condensed", helvetica, sans-serif;
  --font-nav-bars: "Barlow Semi Condensed", helvetica, sans-serif;
  --font-main: "Barlow Semi Condensed", helvetica, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--bg-color);
  max-width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Takes full viewport height */
  min-height: 100dvh; /* Handles dynamic mobile viewports cleanly */
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1; 
}

.hidden {
  display: none !important;
}

/* header */
header {
  /* background-color: var(--bg-color); */
  padding: 0.1rem 1rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr; 
  align-items: center;
  border-bottom: 0.15rem solid var(--accent-color);

  #header-name {
    position: relative;
    color: var(--font-color);
    font-family: var(--font-header);
    text-decoration: none;
    z-index: 15;
    white-space: nowrap;
    margin-left: 1rem;

    color: var(--font-color);
    font-size: 3rem;
  }
}

header::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background-image: url('../images/Texturelabs_Paper_178M.jpg');

  /* background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),
    url('../images/Texturelabs_Paper_178M.jpg'); */

  background-repeat: repeat;
  background-position: 0 -100px;  
  mix-blend-mode: screen;
  opacity: 0.7; 
  
  pointer-events: none; 
}

#header-img {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  z-index: -1;
  /* clip-path: inset(0 20% 0 0); 
  transform: translateX(25%); */
  /* height: clamp(50%, 50vw, 60%); */
  /* height: 50%;
  width: 180px;
  max-width: 50%;
  object-fit: cover; 
  object-position: center;  */
  margin: 0.5rem;
  opacity: 50%;


  width: clamp(180px, 25vw, 300px);            
  /* max-width: 250px;        */
  aspect-ratio: 9 / 16;    
  object-fit: cover;      
  object-position: center;
}

/* About */

#about-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;       /* Adds space between the image and text */
  align-items: center; /* Vertically centers text next to the image */
  margin: 1.5rem;
}

#about-img {
  display: block;
  width: 200px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-width: 70%; 
  /* margin-top: 1rem; */
  flex: 1 1 350px;
  /* clip-path: inset(0% 0% 0% 0%); */
}

#about-text {
  color: var(--font-color);
  font-family: var(--font-main);
  font-size: clamp(1rem, 1.2rem, 1.5rem);
  /* margin-left: 5%;
  margin-right: 5%; */
  flex: 2 1 400px;
}

/* nav menu */
/* nav {
  border-bottom: 0.15rem solid var(--accent-color);
} */

#burger-nav {
  display: none;
  /* justify-content: center;
  background-color: var(--accent-color);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; */
  /* z-index: 10;
  justify-content: center;
  align-items: center; */

  /* transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0); */
}

#burger-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
 
  justify-content: center;
  background-color: var(--accent-color);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  z-index: -1;

  /* transform: translateY(-100%); */
  /* transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0); */
  transition: opacity 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

/* #burger-links::before {
  content: "";
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background-image: url('../images/textured-paper.png');
  background-repeat: repeat;
  
  mix-blend-mode: multiply;
  opacity: 0.6; 
  
  pointer-events: none; 
} */

#burger-links::before {
  content: "";
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background-image: url('../images/Texturelabs_Paper_178M.jpg');
  background-repeat: repeat;
  
  mix-blend-mode: screen;
  opacity: 0.6; 
  
  pointer-events: none; 
}

#burger-nav.menu-active #burger-links{
  /* transform: translateY(0); */
  opacity: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 10;
}

body:has(#burger-nav.menu-active) {
  overflow-y: hidden;
}

body:has(#burger-nav.menu-active) #header-name {
  color: var(--bg-color);
}

#burger-links a {
  text-decoration: none;
  color: var(--bg-color);
  font-size: 2.5rem;
  font-family: var(--font-nav-bars);
}

#burger-links a:hover {
  color: var(--font-color);
  animation: squiggle-anim .7s steps(1) infinite;
}

.icon {
  text-decoration: none;
}

#burger-nav a.icon {
  /* background: black; */
  display: block;
  position: absolute;
  right: 2rem;
  top: 2.5rem;
  color: var(--accent-color);
  font-size: 2rem;
  z-index: 15;
}

@media (hover: hover) {
  #burger-nav a.icon:hover {
    animation: squiggle-anim .7s steps(1) infinite;
  }
}

#burger-nav.menu-active a.icon {
  color: var(--bg-color);
}

#burger.nav a {
  position: relative;
}

#burger-nav.menu-active .fa-bars {
  display: none;
}

#burger-nav .fa-bars {
  position: relative;
  text-decoration: none;
}

#burger-nav .fa-x {
  position: relative;
  display: none;
}

#burger-nav.menu-active .fa-x {
  display: block;
}

#nav-sep {
  border: 0.07rem solid var(--accent-color);              
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* background-color: var(--bg-color); */
  display: flex;
  position: relative;
}

nav li a{
  font-family: var(--font-nav-bars);
  color: var(--font-color);
  font-size: 1.4rem;
  text-decoration: none;
  display: block;
  padding: 0.5rem 1rem;
  transition: 0.3s;
  position: relative;

  &:not(.active):hover {
    /* background-color: var(--nav-hover-bg-color); */
    color: var(--nav-hover-text-color);
    animation: squiggle-anim .7s steps(1) infinite;
  }

  &.active {
    background-color: var(--nav-active-bg-color);
    color: var(--nav-active-text-color);
    /* border: 0.15rem solid var(--accent-color);
    border-bottom-color: transparent;

    position: relative;
    margin-bottom: -2px;            
    top: 2px;                     */
    /* background-image: url('../images/Texturelabs_Paper_178M.jpg');
    background-repeat: repeat;
    background-blend-mode: screen; */
  }
}

.nav-tabs {
  position: relative;
  --pseudo-delay: 0s; 
}

.nav-tabs::before {
  content: "";
  position: absolute;
  /* Inset creates the border thickness (e.g., 3px thickness) */
  inset: 0; 
  border: 3px solid transparent; 
  /* border-radius: 8px; */
  pointer-events: none;
  outline-offset: -0.3rem;
  padding-bottom: 1.5rem;

  animation-duration: 0.5s, 0.75s;
  animation-timing-function: linear;
  animation-direction: forwards;
  animation-play-state: paused;
  animation-fill-mode: forwards;
  clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%);
  animation-delay: var(--pseudo-delay);
}

.nav-tabs.in:not(.active)::before {
  border: 3px solid var(--accent-color);
  outline: 3px solid color-mix(in srgb, var(--font-color) 25%, transparent);
  animation-name: draw-right-border, squiggle-anim;
  animation-iteration-count: 1, infinite;
  animation-play-state: running;
}

.nav-tabs.out:not(.active)::before {
  border: 3px solid var(--accent-color);
  outline: 3px solid color-mix(in srgb, var(--font-color) 25%, transparent);
  animation-name: draw-right-border-rev, squiggle-anim;
  animation-iteration-count: 1, infinite;
  animation-play-state: running;
}

.nav-tabs::after {
  content: "";
  position: absolute;
  /* Inset creates the border thickness (e.g., 3px thickness) */
  inset: 0; 
  border: 3px solid transparent; 
  /* border-radius: 8px; */
  pointer-events: none;
  outline-offset: -0.3rem;
  padding-bottom: 1.5rem;

  animation-duration: 0.5s, 0.75s;
  animation-timing-function: linear;
  animation-direction: forwards;
  animation-play-state: paused;
  animation-fill-mode: forwards;
  clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%);
  animation-delay: var(--pseudo-delay);
}

.nav-tabs.in:not(.active)::after {
  border: 3px solid var(--accent-color);
  outline: 3px solid color-mix(in srgb, var(--font-color) 25%, transparent);
  animation-name: draw-left-border, squiggle-anim;
  animation-iteration-count: 1, infinite;
  animation-play-state: running;
}

.nav-tabs.out:not(.active)::after {
  border: 3px solid var(--accent-color);
  outline: 3px solid color-mix(in srgb, var(--font-color) 25%, transparent);
  animation-name: draw-left-border-rev, squiggle-anim;
  animation-iteration-count: 1, infinite;
  animation-play-state: running;
}

#nav-instagram {
  fill: var(--bg-color);
  transition: fill 0.3s, transform 0.5s;
  will-change: transform;

  svg {
    transition: 0.5s;
    width: 1.3rem;
    height: auto;
  }
}

@media (hover: hover) {
  #nav-instagram:hover {
    fill: var(--font-color);
    animation: squiggle-anim .7s steps(1) infinite;
    transform: scale(1.1);

    /* svg {
      transform: scale(1.1);
    } */
  }
}

/* discography */
#discog-bg {
  background-color: floralwhite;
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.5rem;
  margin: clamp(1rem, 1rem + 1vw, 2rem);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
  padding: 0.5rem;
  position: relative;
}

#discog-bg::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background-image: url('../images/paper-2.png');
  background-repeat: repeat;
  mix-blend-mode: multiply;
  opacity: 0.35; 
  
  pointer-events: none; 
}

/* div.discog-gallery {
  background-color: floralwhite;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  border-radius: 0.5rem;
  margin: 1rem;
  gap: 0.5rem;
  padding: 0.5rem;
} */

div.discog-gallery {
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 0.5rem; */

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(100%/5 + 0.1%, 225px, 100%), 1fr));
  gap: 1rem; 
  padding: 0.5rem;
  position: relative;
}

div.discog-item {
  position: relative;
  width: minmax(0, 100%); /*calc(25% - 0.5rem);*/
  object-fit: cover; 
  object-position: center;
}

discog-item.hide {
  opacity: 0;
  /* display: none; */
  transform: scale(.85);
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  visibility: collapse;
}

discog-item.hide img {
  opacity: 0;
  transform: scale(.85);
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  visibility: collapse;
}

discog-item.hide div {
  /* opacity: 0; */
  transform: scale(.85);
  position: absolute;
}

div.discog-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.5s ease, transform 0.5s ease;
  aspect-ratio: 1 / 1;
  object-fit: cover;   
}

div.discog-item-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 75%);
  pointer-events: none;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  container-type: inline-size; 
  /* clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); */
  /* background: linear-gradient(225deg, rgba(0,0,0,0%), rgba(0,0,0,75%) 15%); */
}

div.discog-item-info-text {
  white-space: pre-line;
  color: var(--font-color);
  font-size: 6cqi;
  position: relative;
  overflow: hidden;
  margin: 1rem;
}

div.discog-item-border {
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: 0.5s ease-in-out;
}

discog-item {
  display: contents;
}

@media (hover: hover) {
  div.discog-item:hover img {
    filter: grayscale(75%);
  }
}

@media (hover: hover) {
  div.discog-item:hover .discog-item-info {
    height: 35%;
  }
}

@media (hover: none) {
  div.discog-item .discog-item-info {
    height: 30%;
  }
}

@media (hover: hover) {
  div.discog-item:hover .discog-item-border {
    outline: 0.25rem solid var(--accent-color);
    outline-offset: -0.25rem;
  }
}

span.artist-title-text {
  color: var(--font-color);
  font-family: var(--font-main);
}

span.roles-text {
  color: var(--font-color);
  font-size: 5.5cqi;
  font-style: italic;
  font-family: var(--font-main);
}

span.artist-list-text {
  color: black;
  font-weight: bold;
  font-family: var(--font-main);
  /* text-transform: uppercase; */
}

span.title-list-text {
  color: black;
  font-family: var(--font-main);
  /* text-transform: uppercase; */
}

span.roles-list-text {
  color: black;
  font-style: italic;
  font-family: var(--font-main);
  /* text-transform: uppercase; */
}

span.sep-list-text {
  color: var(--accent-color);
  -webkit-text-stroke: 0.08rem currentColor; 
}

.discog-heading {
  color: var(--accent-color);
  font-family: var(--font-main);
}

#discog-list {
  list-style-type: none;
  padding-left: 0.5rem;  
  margin-left: 0;   
}

#discog-list li {
  font-size: clamp(0.8rem, 0.9rem + 1vw, 1.2rem);
}

#discog-list h3 {
  font-size: clamp(1rem, 1.1rem + 2vw, 1.5rem);
}

#discog-list li:not(:last-child) {
  margin-bottom: 0.5rem;
}

#discog-list h3:first-of-type {
  margin-top: 0;
}

#discog-list li.hide {
  display: none;
}

#discog-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0.5rem;
}

#discog-filters {
  display: flex;
  /* justify-content: space-between; */
  gap: 2rem;
  margin-right: auto;
  padding-left: clamp(1.5rem, 1.5rem + 1vw, 2.5rem);
  flex-grow: 2;
}

#discog-filters .active {
  color: var(--font-color);
}

.filter-btn {
  /* background-color: var(--bg-color); */
  background-color: transparent;
  color: var(--accent-color);
  border: none;
  font-family: var(--font-nav-bars);
  font-size: 1.2rem;
  cursor: pointer;
  position: relative;
}

.filter-btn:not(.active):hover {
  animation: squiggle-anim .7s steps(1) infinite;
}

.filter-btn:not(.active):hover::before,
.filter-btn:not(.active):hover::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 50%
}

.filter-btn:hover::before {
  left: -.03rem;
  text-shadow: .3rem 0 var(--font-color);
  clip-path: inset(10% 0 85% 0);
  animation: squiggle-anim 1.5s infinite steps(2) alternate;
}

.filter-btn:hover::after {
  left: .03rem;
  text-shadow: -.3rem 0 black;
  clip-path: inset(80% 0 5% 0);
  animation: squiggle-anim 2s infinite steps(1) alternate-reverse;
}

#discog-filter-drop-down {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  gap: 2rem;
  margin-right: auto;
  margin-left: 1.5rem;
  background-color: var(--bg-color);
  color: var(--accent-color);
  border: 0.08rem solid var(--accent-color);
  border-radius: 0.25rem;
  padding: 0.25rem;
  font-family: var(--font-main);
  font-size: 0.9rem;

  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="24" height="24" fill="black"></rect> <path d="M17 9.5L12 14.5L7 9.5" stroke="plum" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>');
  background-repeat: no-repeat;
  background-position: right 0px top 50%;
  background-size: 18px auto;
  padding-right: 20px;

  &:focus {
    outline: none;
  }
}

@media (hover: hover) {
  #discog-filter-drop-down:hover {
    animation: squiggle-anim .7s steps(1) infinite;
  }

  #discog-filter-drop-down:hover::before,
  #discog-filter-drop-down:hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 100%
  }

  #discog-filter-drop-down:hover::before {
    left: -.03rem;
    text-shadow: .3rem 0 var(--font-color);
    clip-path: inset(10% 0 85% 0);
    animation: squiggle-anim 1.5s infinite steps(2) alternate;
  }

  #discog-filter-drop-down:hover::after {
    left: .03rem;
    text-shadow: -.3rem 0 black;
    clip-path: inset(80% 0 5% 0);
    animation: squiggle-anim 2s infinite steps(1) alternate-reverse;
  }
}

#discog-views-sort {
  display:flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
  padding-right: clamp(1.5rem, 1.5rem + 1vw, 2.5rem);
}

#discog-gallery-view-btn {
  fill: var(--font-color);
  background-color: black;
  transition: 0.3s;
  display: flex;
  align-items: center;
  border-radius: 25%;
  border: none;
  padding: 0.2rem;
  position: relative;

  svg {
    transition: 0.5s;
    width: 1.5rem;
    height: 1.5rem;
  }
}

#discog-gallery-view-btn:not(.active):hover {
  fill: var(--accent-color);
  animation: squiggle-anim .7s steps(1) infinite;
}

#discog-gallery-view-btn:not(.active):hover::before,
#discog-gallery-view-btn:not(.active):hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 25%;
}

#discog-gallery-view-btn:hover::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="floralwhite" viewBox="0 0 36 36" version="1.1"  preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>grid-view-line</title><path class="clr-i-outline clr-i-outline-path-1" d="M14,4H6A2,2,0,0,0,4,6v8a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V6A2,2,0,0,0,14,4ZM6,14V6h8v8Z"></path><path class="clr-i-outline clr-i-outline-path-2" d="M30,4H22a2,2,0,0,0-2,2v8a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V6A2,2,0,0,0,30,4ZM22,14V6h8v8Z"></path><path class="clr-i-outline clr-i-outline-path-3" d="M14,20H6a2,2,0,0,0-2,2v8a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V22A2,2,0,0,0,14,20ZM6,30V22h8v8Z"></path><path class="clr-i-outline clr-i-outline-path-4" d="M30,20H22a2,2,0,0,0-2,2v8a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V22A2,2,0,0,0,30,20ZM22,30V22h8v8Z"></path><rect x="0" y="0" width="36" height="36" fill-opacity="0"/></svg>');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply; 
  mix-blend-mode: overlay;
  animation: squiggle-anim 1.5s infinite steps(2) alternate;
}

#discog-gallery-view-btn:hover::after {
  background-image: url('data:image/svg+xml;utf8,<svg fill="black" viewBox="0 0 36 36" version="1.1"  preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>grid-view-line</title><path class="clr-i-outline clr-i-outline-path-1" d="M14,4H6A2,2,0,0,0,4,6v8a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V6A2,2,0,0,0,14,4ZM6,14V6h8v8Z"></path><path class="clr-i-outline clr-i-outline-path-2" d="M30,4H22a2,2,0,0,0-2,2v8a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V6A2,2,0,0,0,30,4ZM22,14V6h8v8Z"></path><path class="clr-i-outline clr-i-outline-path-3" d="M14,20H6a2,2,0,0,0-2,2v8a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V22A2,2,0,0,0,14,20ZM6,30V22h8v8Z"></path><path class="clr-i-outline clr-i-outline-path-4" d="M30,20H22a2,2,0,0,0-2,2v8a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V22A2,2,0,0,0,30,20ZM22,30V22h8v8Z"></path><rect x="0" y="0" width="36" height="36" fill-opacity="0"/></svg>');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply; 
  mix-blend-mode: overlay;
  animation: squiggle-anim 2s infinite steps(1) alternate-reverse;
}

#discog-gallery-view-btn.active {
  background-color: var(--accent-color);
  fill: var(--bg-color);
  box-shadow: inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.3); 
}

#discog-list-view-btn {
  stroke: var(--font-color);
  background-color: black;
  transition: 0.3s;
  display: flex;
  align-items: center;
  border-radius: 25%;
  border: none;
  padding: 0.2rem;
  position: relative;

  svg {
    transition: 0.5s;
    width: 1.5rem;
    height: 1.5rem;
  }
}

#discog-list-view-btn:not(.active):hover {
  stroke: var(--accent-color);
  animation: squiggle-anim .7s steps(1) infinite;
}

#discog-list-view-btn:not(.active):hover::before,
#discog-list-view-btn:not(.active):hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 25%;
}

#discog-list-view-btn:hover::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 6.00067L21 6.00139M8 12.0007L21 12.0015M8 18.0007L21 18.0015M3.5 6H3.51M3.5 12H3.51M3.5 18H3.51M4 6C4 6.27614 3.77614 6.5 3.5 6.5C3.22386 6.5 3 6.27614 3 6C3 5.72386 3.22386 5.5 3.5 5.5C3.77614 5.5 4 5.72386 4 6ZM4 12C4 12.2761 3.77614 12.5 3.5 12.5C3.22386 12.5 3 12.2761 3 12C3 11.7239 3.22386 11.5 3.5 11.5C3.77614 11.5 4 11.7239 4 12ZM4 18C4 18.2761 3.77614 18.5 3.5 18.5C3.22386 18.5 3 18.2761 3 18C3 17.7239 3.22386 17.5 3.5 17.5C3.77614 17.5 4 17.7239 4 18Z" stroke="floralwhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply; 
  mix-blend-mode: overlay;
  animation: squiggle-anim 1.5s infinite steps(2) alternate;
}

#discog-list-view-btn:hover::after {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 6.00067L21 6.00139M8 12.0007L21 12.0015M8 18.0007L21 18.0015M3.5 6H3.51M3.5 12H3.51M3.5 18H3.51M4 6C4 6.27614 3.77614 6.5 3.5 6.5C3.22386 6.5 3 6.27614 3 6C3 5.72386 3.22386 5.5 3.5 5.5C3.77614 5.5 4 5.72386 4 6ZM4 12C4 12.2761 3.77614 12.5 3.5 12.5C3.22386 12.5 3 12.2761 3 12C3 11.7239 3.22386 11.5 3.5 11.5C3.77614 11.5 4 11.7239 4 12ZM4 18C4 18.2761 3.77614 18.5 3.5 18.5C3.22386 18.5 3 18.2761 3 18C3 17.7239 3.22386 17.5 3.5 17.5C3.77614 17.5 4 17.7239 4 18Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply; 
  mix-blend-mode: overlay;
  animation: squiggle-anim 2s infinite steps(1) alternate-reverse;
}

#discog-list-view-btn.active {
  background-color: var(--accent-color);
  stroke: var(--bg-color);
  box-shadow: inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.3); 
}

#sort {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--bg-color);
  color: var(--accent-color);
  /* outline: 0.1rem solid var(--accent-color); */
  border: 0.08rem solid var(--accent-color);
  border-radius: 0.25rem;
  padding: 0.25rem;
  margin-left: 0.5rem;
  font-size: 0.9rem;
  font-family: var(--font-main);

  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <rect width="24" height="24" fill="black"></rect> <path d="M17 9.5L12 14.5L7 9.5" stroke="plum" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>');
  background-repeat: no-repeat;
  background-position: right 0px top 50%;
  background-size: 18px auto;
  padding-right: 20px;

  &:focus {
    outline: none;
  }
}

@media (hover: hover) {
  #sort:hover {
    animation: squiggle-anim .7s steps(1) infinite;
  }

  #sort:hover::before,
  #sort:hover::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 100%
  }

  #sort:hover::before {
    left: -.03rem;
    text-shadow: .3rem 0 var(--font-color);
    clip-path: inset(10% 0 85% 0);
    animation: squiggle-anim 1.5s infinite steps(2) alternate;
  }

  #sort:hover::after {
    left: .03rem;
    text-shadow: -.3rem 0 black;
    clip-path: inset(80% 0 5% 0);
    animation: squiggle-anim 2s infinite steps(1) alternate-reverse;
  }
}


/* .sort-controls {
  stroke: var(--accent-color);
  svg {
    width: 1.5rem;
    height: 1.5rem;
  }
} */

/* footer */
footer {
  background-color: var(--bg-color);
  /* background-image: linear-gradient(to bottom, var(--accent-color), var(--bg-color)); */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.15rem solid var(--accent-color);
  position: relative;
  padding-bottom: 1rem;
}

footer::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background-image: url('../images/Texturelabs_Paper_178M.jpg');
  background-repeat: repeat;
  
  mix-blend-mode: screen;
  opacity: 0.7; 
  pointer-events: none; 
}

#footer-socials, #footer-ghost {
  width: auto;
  padding: 1rem;
  flex: 1;
  display: flex;
  align-items: center;
  z-index: 1;
}

#footer-instagram {
  fill: var(--font-color);
  transition: fill 0.3s, transform 0.5s;
  position: relative;
  will-change: transform;

  svg {
    transition: 0.5s;
    width: 1.3rem;
    height: auto;
  }
}

#footer-instagram svg {
    transition: 0.5s;
    width: 1.3rem;
    height: auto;
}

@media (hover: hover) {
  #footer-instagram:hover {
    fill: var(--accent-color);
    animation: squiggle-anim .7s steps(1) infinite;
    transform: scale(1.1);

    /* svg {
      transform: scale(1.1);
    } */
  }

  #footer-instagram:not(.active):hover::before,
  #footer-instagram:not(.active):hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 25%;
  }

  #footer-instagram:hover::before {
    background-image: url('data:image/svg+xml;utf8,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><path fill="floralwhite" d="M295.42,6c-53.2,2.51-89.53,11-121.29,23.48-32.87,12.81-60.73,30-88.45,57.82S40.89,143,28.17,175.92c-12.31,31.83-20.65,68.19-23,121.42S2.3,367.68,2.56,503.46,3.42,656.26,6,709.6c2.54,53.19,11,89.51,23.48,121.28,12.83,32.87,30,60.72,57.83,88.45S143,964.09,176,976.83c31.8,12.29,68.17,20.67,121.39,23s70.35,2.87,206.09,2.61,152.83-.86,206.16-3.39S799.1,988,830.88,975.58c32.87-12.86,60.74-30,88.45-57.84S964.1,862,976.81,829.06c12.32-31.8,20.69-68.17,23-121.35,2.33-53.37,2.88-70.41,2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45S862,40.87,829.07,28.19c-31.82-12.31-68.17-20.7-121.39-23S637.33,2.3,501.54,2.56,348.75,3.4,295.42,6m5.84,903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29,2.53-202c2.08-48.71,10.23-75.21,17-92.84,9-23.39,19.84-40,37.29-57.57s34.1-28.39,57.43-37.51c17.62-6.88,44.06-15.06,92.79-17.38,52.73-2.5,68.53-3,202-3.29s149.31.21,202.06,2.53c48.71,2.12,75.22,10.19,92.83,17,23.37,9,40,19.81,57.57,37.29s28.4,34.07,37.52,57.45c6.89,17.57,15.07,44,17.37,92.76,2.51,52.73,3.08,68.54,3.32,202s-.23,149.31-2.54,202c-2.13,48.75-10.21,75.23-17,92.89-9,23.35-19.85,40-37.31,57.56s-34.09,28.38-57.43,37.5c-17.6,6.87-44.07,15.07-92.76,17.39-52.73,2.48-68.53,3-202.05,3.29s-149.27-.25-202-2.53m407.6-674.61a60,60,0,1,0,59.88-60.1,60,60,0,0,0-59.88,60.1M245.77,503c.28,141.8,115.44,256.49,257.21,256.22S759.52,643.8,759.25,502,643.79,245.48,502,245.76,245.5,361.22,245.77,503m90.06-.18a166.67,166.67,0,1,1,167,166.34,166.65,166.65,0,0,1-167-166.34" transform="translate(-2.5 -2.5)"/></svg>');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply; 
    mix-blend-mode: overlay;
    clip-path: inset(0 5% 20% 0);
    animation: squiggle-anim 1.5s infinite steps(2) alternate;
  }

  #footer-instagram:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000"><path fill="black" d="M295.42,6c-53.2,2.51-89.53,11-121.29,23.48-32.87,12.81-60.73,30-88.45,57.82S40.89,143,28.17,175.92c-12.31,31.83-20.65,68.19-23,121.42S2.3,367.68,2.56,503.46,3.42,656.26,6,709.6c2.54,53.19,11,89.51,23.48,121.28,12.83,32.87,30,60.72,57.83,88.45S143,964.09,176,976.83c31.8,12.29,68.17,20.67,121.39,23s70.35,2.87,206.09,2.61,152.83-.86,206.16-3.39S799.1,988,830.88,975.58c32.87-12.86,60.74-30,88.45-57.84S964.1,862,976.81,829.06c12.32-31.8,20.69-68.17,23-121.35,2.33-53.37,2.88-70.41,2.62-206.17s-.87-152.78-3.4-206.1-11-89.53-23.47-121.32c-12.85-32.87-30-60.7-57.82-88.45S862,40.87,829.07,28.19c-31.82-12.31-68.17-20.7-121.39-23S637.33,2.3,501.54,2.56,348.75,3.4,295.42,6m5.84,903.88c-48.75-2.12-75.22-10.22-92.86-17-23.36-9-40-19.88-57.58-37.29s-28.38-34.11-37.5-57.42c-6.85-17.64-15.1-44.08-17.38-92.83-2.48-52.69-3-68.51-3.29-202s.22-149.29,2.53-202c2.08-48.71,10.23-75.21,17-92.84,9-23.39,19.84-40,37.29-57.57s34.1-28.39,57.43-37.51c17.62-6.88,44.06-15.06,92.79-17.38,52.73-2.5,68.53-3,202-3.29s149.31.21,202.06,2.53c48.71,2.12,75.22,10.19,92.83,17,23.37,9,40,19.81,57.57,37.29s28.4,34.07,37.52,57.45c6.89,17.57,15.07,44,17.37,92.76,2.51,52.73,3.08,68.54,3.32,202s-.23,149.31-2.54,202c-2.13,48.75-10.21,75.23-17,92.89-9,23.35-19.85,40-37.31,57.56s-34.09,28.38-57.43,37.5c-17.6,6.87-44.07,15.07-92.76,17.39-52.73,2.48-68.53,3-202.05,3.29s-149.27-.25-202-2.53m407.6-674.61a60,60,0,1,0,59.88-60.1,60,60,0,0,0-59.88,60.1M245.77,503c.28,141.8,115.44,256.49,257.21,256.22S759.52,643.8,759.25,502,643.79,245.48,502,245.76,245.5,361.22,245.77,503m90.06-.18a166.67,166.67,0,1,1,167,166.34,166.65,166.65,0,0,1-167-166.34" transform="translate(-2.5 -2.5)"/></svg>');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply; 
    mix-blend-mode: overlay;
    clip-path: inset(20% 0 0 15%);
    animation: squiggle-anim 2s infinite steps(1) alternate-reverse;
  }
}

footer #copyright {
  color: var(--font-color);
  font-family: var(--font-main);
  font-size: 0.8rem;
  text-align: center;
  flex: 0 1 auto; 
}

/* Nav Menu Animations */
@keyframes draw-right-border {
  /* Start: Bottom Center */
  0% {
    clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%);
  }
  /* Step 1: Slide left to the Bottom Left corner */
  15% {
    clip-path: polygon(50% 100%, 100% 100%, 100% 90%, 50% 100%);
  }
  /* Step 2: Slide up to the Top Left corner */
  66% {
    clip-path: polygon(50% 100%, 100% 100%, 100% 0%, 100% 0%);
  }
  /* Step 3: Slide right to finish at the Top Center */
  100% {
    clip-path: polygon(50% 100%, 100% 100%, 100% 0%, 50% 0%);
  }
}

@keyframes draw-right-border-rev {
  /* Start: Bottom Center */
  0% {
    clip-path: polygon(50% 100%, 100% 100%, 100% 0%, 50% 0%);
  }
  33% {
    clip-path: polygon(50% 100%, 100% 100%, 100% 0%, 100% 0%);
  }
  85% {
    clip-path: polygon(50% 100%, 100% 100%, 100% 90%, 50% 100%);
  }
  100% {
    clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%);
  }
}

@keyframes draw-left-border {
  /* Start: Bottom Center */
  0% {
    clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%);
  }
  /* Step 1: Slide left to the Bottom Left corner */
  15% {
    clip-path: polygon(50% 100%, 0% 100%, 0% 90%, 50% 100%);
  }
  /* Step 2: Slide up to the Top Left corner */
  66% {
    clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 0% 0%);
  }
  /* Step 3: Slide right to finish at the Top Center */
  100% {
    clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 50% 0%);
  }
}

@keyframes draw-left-border-rev {
  /* Start: Bottom Center */
  0% {
    clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 50% 0%);
  }
  33% {
    clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 0% 0%);
  }
  85% {
    clip-path: polygon(50% 100%, 0% 100%, 0% 90%, 50% 100%);
  }
  100% {
    clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%);
  }
}

/* media */

@media only screen and (max-width: 1250px) {
  /* header::before {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 100%),
                      url('../images/Texturelabs_Paper_178M.jpg');
  } */
}

/* mobile */
@media only screen and (max-width: 768px) {
  header #header-name {
    margin-left: 0rem;
  }

  /* header::before {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 100%),
                      url('../images/Texturelabs_Paper_178M.jpg');
  } */

  /* div.discog-item {
    width: calc(50% - 1rem);
  } */

  /* switch to burger menu */
  nav ul {
    display: none;
  }

  #burger-nav {
    display: flex;
  }
}

@media only screen and (max-width: 575px) {
  /* header::before {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 100%),
                      url('../images/Texturelabs_Paper_178M.jpg');
  } */
  
  #discog-filters {
    display: none;
  }

  #discog-filter-drop-down {
    display: flex;
  }
}

@media only screen and (max-width: 480px) {
  /* header::before {
    background-image: none;
  } */
  
  #discog-bg {
    margin-left: 0rem;
    margin-right: 0rem;
    border-radius: 0%;
  }
  
  #discog-filter-drop-down {
    margin-left: 0.5rem;
  }

  #discog-views-sort {
    padding-right: 0.5rem;
  }

  /* div.discog-item {
    width: calc(100% - 1rem);
  } */
}

.squigglevision {
  /* Apply the keyframe animation */
  animation: squiggle-anim 0.5s steps(1) infinite;
}

@keyframes squiggle-anim {
  0%   { filter: url(#squiggle-1); }
  20%  { filter: url(#squiggle-2); }
  40%  { filter: url(#squiggle-3); }
  60%  { filter: url(#squiggle-4); }
  80%  { filter: url(#squiggle-5); }
  100% { filter: url(#squiggle-1); }
}