/* fonts */

@import url("https://fonts.googleapis.com/css2?family=Archivo&family=Archivo:wdth,wght@110,900&family=Luxurious+Script&family=Noto+Music&display=swap");

body {
  font-family: "Archivo", sans-serif;
  font-weight: 400;
}

/* basic */

:root {
  --bg: #000;
  --c1: #e9e9ff;
  --c2: #c9f;
  --sea: linear-gradient(to right, transparent 0%, transparent 10%, #209 50%);
  --border14: solid 0.14rem var(--c1);
  font-size: min(14px, 2.5svw);
  --h1-before-content: "𝄡"; /* need this to control it with JS*/
  --h3-radius: 0; /* need this to control it with JS*/
  --jacket-height: 26em; /* need this to control it with JS*/
  --jacket-opacity: 1; /* need this to control it with JS*/
  --bio-display: block; /* need this to control it with JS*/
  --shelf-fontsize: 1em; /* need this to control it with JS*/
}

html {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

::selection {
  color: var(--bg);
  background-color: var(--c1);
}

body {
  padding: 0 4vmin;
}

a {
  color: inherit;
  text-decoration: underline;
}
a:hover {
  color: var(--c2);
}

/* header */

h1,
h2,
h3 {
  font-weight: 900;
  font-variation-settings: "wdth" 110, "wght" 900;
}

h1 {
  margin: 0;
  font-size: 5.4rem;
  letter-spacing: -0.3rem;
  color: var(--bg);
  -webkit-text-stroke: 0.1rem var(--c1);
  text-stroke: 0.1rem var(--c1);
}
h1::before,
h1 text {
  color: var(--c1);
  font-weight: normal;
  -webkit-text-stroke: initial;
  text-stroke: initial;
}
h1::before {
  content: var(--h1-before-content);
  font-family: "Noto Music";
  font-size: 4rem;
}
h1 text /* OZett's */ {
  padding: 0 0.6rem 0 0.8rem;
  vertical-align: text-top;
  font-family: "Luxurious Script", cursive;
}

h2 {
  margin: 4rem 0 1rem 0;
  padding: 0 0.1rem;
  font-size: 1.5rem;
  letter-spacing: -0.1rem;
  text-shadow: var(--bg) 0.1rem 0 0, var(--bg) -0.2px 0 0;
  background: linear-gradient(
    var(--c1) 0%,
    var(--c1) calc(0% + 0.1rem),
    var(--bg) calc(0% + 0.1rem),
    var(--bg) calc(25% - 0.025rem),
    var(--c1) calc(25% - 0.025rem),
    var(--c1) calc(25% + 0.075rem),
    var(--bg) calc(25% + 0.075rem),
    var(--bg) calc(50% - 0.05rem),
    var(--c1) calc(50% - 0.05rem),
    var(--c1) calc(50% + 0.05rem),
    var(--bg) calc(50% + 0.05rem),
    var(--bg) calc(75% - 0.075rem),
    var(--c1) calc(75% - 0.075rem),
    var(--c1) calc(75% + 0.025rem),
    var(--bg) calc(75% + 0.025rem),
    var(--bg) calc(100% - 0.1rem),
    var(--c1) calc(100% - 0.1rem),
    var(--c1) calc(100% - 0rem)
  );
  border: solid 0 var(--c1);
  border-width: 0 0.3px;
}
h2 text {
  font-family: "Noto Music";
  font-size: 0.9em;
}

/* jacket/list switch */

aside {
  display: inline-block;
  position: sticky;
  top: 4%;
  left: 0%;
  z-index: 2;
}
.switchbox {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  background-color: var(--bg);
  border: var(--border14);
  /* transform: rotate(90deg); */
}
.switch {
  display: none;
}
.switchball {
  display: inline-block;
  position: relative;
  top: 0.1em;
  width: 2em;
  height: 1em;
  background-color: var(--bg);
  border: var(--border14);
  cursor: pointer;
}
.switchball::before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  background-color: var(--c1);
  transition: 0.1s;
  content: "";
}
.switch:checked + .switchball {
  background-color: var(--c2);
}
.switch:checked + .switchball::before {
  transform: translateX(100%);
}
.switch:hover + .switchball::before {
  transform: translateX(20%);
}
.switch:checked:hover + .switchball::before {
  transform: translateX(80%);
}

/* shelf having tracks */

#shelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* feed children */
  font-size: var(--shelf-fontsize);
}

/* track */

label:has(.track) > input {
  display: none;
}

.track {
  margin-bottom: 1em;
}

h3 {
  display: inline-block;
  margin: 0;
  box-sizing: border-box; /* need for the width calculation */
  width: calc(26em - 5em);
  /* width calculation
  +26em  --jacket-height
  -0.6em padding-right
  -1.2em padding-left
  -1.2em disc.width
  -0.1em disc.padding-right
  -0.1em disc.padding-left
  -0.9em disc.border-right
  -0.9em disc.border-left
  */
  padding: 0.6em 0.6em 0.6em 1.2em;
  position: relative;
  left: -0.6em;
  border: var(--border14);
  border-left: none;
  border-radius: 0 10em 10em 0;
  border-bottom-right-radius: var(--h3-radius);
  transition: all ease-in-out 0.2s;
}
.track:hover h3,
.track:hover .bio {
  background: var(--sea);
}

.disc {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  font-family: "Noto Music";
  font-size: 1em;
  text-align: center;
  line-height: 1.2em;
  color: #000;
  border-radius: 100%;
  background: var(--c2);
  padding: 0.1em;
  border: solid 0.9em #000;
  box-shadow: 0 0 0 0.14em var(--c1);
  user-select: none;
}
.track:hover {
  .disc {
    transform: rotate(21600deg);
    transition: transform linear 60s;
  }
}

.jacket,
.bio {
  margin: 0 0 0 1.2em;
  width: var(--jacket-height);
  box-sizing: border-box;
  border: var(--border14);
  transition: all ease-in-out 0.2s;
}
.jacket {
  background: center/100% no-repeat;
  height: var(--jacket-height);
  opacity: var(--jacket-opacity);
}
.bio {
  border-top: none;
  padding: 0.1em 0.3em 0.3em 0.3em;
  border-radius: 0 0 1em 1em;
  display: var(--bio-display);
}
.bio > ul {
  margin: 0;
  padding-inline-start: 1.1em;
}
.biolink {
  display: inline-block;
  margin: 0.1em;
  padding: 0 0.2em;
  border: var(--border14);
  border-radius: 1em;
  color: var(--bg);
  background: var(--c1);
  text-decoration: none;
}
.biolink:hover {
  color: var(--bg);
  background: var(--c2);
}

/* radioz */

#radioz {
  width: min(100%, 70em);
  border: var(--border14);
  border-radius: 1em;
  overflow: hidden;
  /* for singer */
  position: relative;
}
#radioz > div {
  aspect-ratio: 4/1;
  outline: var(--border14);
  background: center/100% no-repeat url("../static/o/7.png");
}
#radioz > span {
  display: block;
  margin: 0.2em;
}
#singer {
  position: absolute;
  right: 0;
  bottom: 22%;
  width: 6em;
  aspect-ratio: 1/1;
  transition: transform 0.1s;
  transform: rotate(10deg);
}
#singer > text {
  position: absolute;
  top: 32%;
  left: 18%;
  text-align: center;
  color: var(--bg);
  font-weight: 900;
  font-variation-settings: "wdth" 110, "wght" 900;
}
#singer > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#singer:hover {
  transform: rotate(-10deg);
}

/* footer */

footer {
  margin: 4rem 0;
}