@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');


/* ==========================================
   FOUNDATIONAL LAYOUTS
   CLEAN DARK STUDIO / PREMIUM THEME
   ========================================== */

:root {

  --layout-orange:
    #e56c18;

  --layout-amber:
    #f3a12b;

  --layout-gold:
    #ffc85a;

  --layout-yellow:
    #ffe09a;

  --layout-cream:
    #fff0d0;

  --layout-teal:
    #31555a;

  --layout-ocean:
    #243e49;

  --layout-steel:
    #3f5961;

  --layout-black:
    #030607;

  --layout-panel:
    #0f1113;

  --layout-panel-2:
    #13171a;

  --layout-muted:
    #cbbca7;

  --layout-text-soft:
    #b9cbcd;

}


/* ==========================================
   BASE
   ========================================== */

html {
  background:
    #000;
}


body {
  margin:
    0;

  min-height:
    100vh;

  position:
    relative;

  overflow-x:
    hidden;

  color:
    white;

  font-family:
    "Space Grotesk",
    sans-serif;

  background:

    radial-gradient(
      circle at 50% 160px,
      rgba(243, 161, 43, 0.08) 0%,
      rgba(243, 161, 43, 0.03) 22%,
      transparent 48%
    ),

    radial-gradient(
      circle at 15% 20%,
      rgba(229, 108, 24, 0.05) 0%,
      transparent 35%
    ),

    radial-gradient(
      circle at 85% 25%,
      rgba(49, 85, 90, 0.06) 0%,
      transparent 32%
    ),

    linear-gradient(
      180deg,
      #0a0a0a 0%,
      #0d0d0d 18%,
      #101214 45%,
      #0a0d0f 72%,
      #000 100%
    );
}


/* ==========================================
   SUBTLE PAGE GUIDE
   ========================================== */

body::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  pointer-events:
    none;

  background:

    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.015) 50%,
      transparent 100%
    )
    center 0 / 1px 100%
    no-repeat,

    linear-gradient(
      0deg,
      transparent 0%,
      rgba(255, 255, 255, 0.02) 50%,
      transparent 100%
    )
    center 420px / 100% 1px
    no-repeat,

    radial-gradient(
      ellipse at top,
      rgba(255, 200, 90, 0.04) 0%,
      transparent 50%
    ),

    radial-gradient(
      ellipse at bottom,
      rgba(49, 85, 90, 0.04) 0%,
      transparent 50%
    );
}


/* ==========================================
   CONTENT LAYER
   ========================================== */

.back-link,
.album-page,
.site-footer {
  position:
    relative;

  z-index:
    2;
}


button,
input,
select,
textarea {
  font-family:
    "Space Grotesk",
    sans-serif;
}


h1,
h2 {
  font-weight:
    600;
}


.track-name,
.streaming-links a {
  font-weight:
    500;
}


/* ==========================================
   TOP BACK LINK
   ========================================== */

.back-link {
  display:
    inline-block;

  margin:
    25px;

  padding:
    14px 22px;

  color:
    white;

  text-decoration:
    none;

  font-size:
    14px;

  letter-spacing:
    3px;

  border:
    1px solid
    rgba(255, 255, 255, 0.40);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.02);

  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}


.back-link:hover {
  color:
    #111;

  background:
    white;

  border-color:
    white;

  transform:
    translateY(-1px);
}


/* ==========================================
   ALBUM PAGE
   ========================================== */

.album-page {
  min-height:
    90vh;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  text-align:
    center;

  padding:
    40px 20px;
}


/* ==========================================
   ALBUM HEADER
   ========================================== */

.album-header {
  width:
    100%;

  max-width:
    1100px;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  gap:
    70px;

  margin-bottom:
    60px;

  position:
    relative;

  padding:
    30px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(255, 255, 255, 0.06);

  border-radius:
    24px;

  background:

    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.01)
    );

  box-shadow:

    0 20px 60px
    rgba(0, 0, 0, 0.35),

    inset 0 0 0 1px
    rgba(255, 255, 255, 0.02);
}


/* ==========================================
   ALBUM INFO
   ========================================== */

.album-info {
  width:
    430px;

  max-width:
    100%;

  text-align:
    left;
}


.album-info h1 {
  margin:
    0 0 12px;

  color:
    var(--layout-cream);

  font-size:
    clamp(
      36px,
      3.35vw,
      48px
    );

  line-height:
    1.02;

  letter-spacing:
    3.2px;

  text-shadow:

    0 0 16px
    rgba(255, 190, 73, 0.16),

    0 0 40px
    rgba(243, 161, 43, 0.07);
}


.album-title-line {
  display:
    block;

  white-space:
    nowrap;
}


/* ==========================================
   ARTIST
   ========================================== */

.artist-name {
  margin:
    0 0 40px;

  font-size:
    18px;

  letter-spacing:
    3px;
}


.artist-name a,
.artist-name a:visited {
  color:
    white;

  text-decoration-color:
    rgba(243, 161, 43, 0.68);

  text-underline-offset:
    4px;

  transition:
    color 0.3s ease,
    text-shadow 0.3s ease,
    text-decoration-color 0.3s ease;
}


.artist-name a:hover {
  color:
    var(--layout-gold);

  text-decoration-color:
    var(--layout-gold);

  text-shadow:
    0 0 12px
    rgba(255, 200, 90, 0.32);
}


/* ==========================================
   WHERE TO LISTEN
   ========================================== */

.get-music {
  margin-bottom:
    20px;

  color:
    rgba(255, 216, 145, 0.76);

  text-transform:
    uppercase;

  font-size:
    12px;

  letter-spacing:
    4px;
}


/* ==========================================
   STREAMING LINKS
   ========================================== */

.streaming-links {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


.streaming-links a {
  position:
    relative;

  display:
    block;

  width:
    100%;

  padding:
    13px 18px;

  box-sizing:
    border-box;

  overflow:
    hidden;

  color:
    white;

  text-align:
    center;

  text-decoration:
    none;

  letter-spacing:
    1.5px;

  border:
    1px solid
    rgba(243, 161, 43, 0.31);

  border-radius:
    999px;

  background:

    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.015)
    );

  box-shadow:
    inset 0 0 15px
    rgba(255, 255, 255, 0.015);

  transition:
    transform 0.30s ease,
    border-color 0.30s ease,
    background 0.30s ease,
    box-shadow 0.30s ease;
}


.streaming-links a::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    -120%;

  width:
    100%;

  height:
    100%;

  background:

    linear-gradient(
      110deg,
      transparent 20%,
      rgba(255, 211, 120, 0.17) 50%,
      transparent 80%
    );

  transition:
    left 0.50s ease;

  pointer-events:
    none;
}


.streaming-links a:hover {
  transform:
    translateX(5px);

  border-color:
    rgba(255, 200, 90, 0.74);

  background:

    linear-gradient(
      135deg,
      rgba(229, 108, 24, 0.10),
      rgba(49, 85, 90, 0.06)
    );

  box-shadow:

    0 0 18px
    rgba(229, 108, 24, 0.12),

    inset 0 0 18px
    rgba(255, 200, 90, 0.045);
}


.streaming-links a:hover::before {
  left:
    120%;
}


/* ==========================================
   ALBUM ART
   ========================================== */

.album-art-side {
  display:
    flex;

  justify-content:
    center;

  position:
    relative;

  padding:
    15px;

  background:

    linear-gradient(
      rgba(255, 200, 90, 0.55),
      rgba(255, 200, 90, 0.55)
    )
    left top / 22px 1px
    no-repeat,

    linear-gradient(
      rgba(255, 200, 90, 0.55),
      rgba(255, 200, 90, 0.55)
    )
    left top / 1px 22px
    no-repeat,

    linear-gradient(
      rgba(255, 200, 90, 0.55),
      rgba(255, 200, 90, 0.55)
    )
    right top / 22px 1px
    no-repeat,

    linear-gradient(
      rgba(255, 200, 90, 0.55),
      rgba(255, 200, 90, 0.55)
    )
    right top / 1px 22px
    no-repeat,

    linear-gradient(
      rgba(72, 113, 122, 0.45),
      rgba(72, 113, 122, 0.45)
    )
    left bottom / 22px 1px
    no-repeat,

    linear-gradient(
      rgba(72, 113, 122, 0.45),
      rgba(72, 113, 122, 0.45)
    )
    left bottom / 1px 22px
    no-repeat,

    linear-gradient(
      rgba(72, 113, 122, 0.45),
      rgba(72, 113, 122, 0.45)
    )
    right bottom / 22px 1px
    no-repeat,

    linear-gradient(
      rgba(72, 113, 122, 0.45),
      rgba(72, 113, 122, 0.45)
    )
    right bottom / 1px 22px
    no-repeat;
}


.album-art {
  width:
    500px;

  max-width:
    100%;

  height:
    auto;

  box-shadow:

    0 28px 85px
    rgba(0, 0, 0, 0.50),

    0 -10px 42px
    rgba(243, 161, 43, 0.08),

    0 20px 52px
    rgba(36, 62, 73, 0.12);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}


.album-art:hover {
  transform:
    scale(1.018);

  box-shadow:

    0 34px 100px
    rgba(0, 0, 0, 0.58),

    0 -12px 55px
    rgba(255, 188, 70, 0.12),

    0 28px 68px
    rgba(49, 85, 90, 0.16);
}


/* ==========================================
   TRACK LIST
   ========================================== */

.track-list {
  width:
    100%;

  max-width:
    700px;

  margin-top:
    60px;

  text-align:
    left;

  position:
    relative;
}


.track-list::before {
  content:
    "";

  position:
    absolute;

  top:
    30px;

  left:
    50%;

  width:
    115%;

  height:
    calc(100% + 60px);

  transform:
    translateX(-50%);

  z-index:
    -1;

  border-radius:
    26px;

  background:

    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0.008)
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.04);

  box-shadow:

    0 20px 50px
    rgba(0, 0, 0, 0.18),

    inset 0 0 30px
    rgba(255, 255, 255, 0.01);

  pointer-events:
    none;
}


.track-list h2 {
  margin-bottom:
    25px;

  color:
    var(--layout-cream);

  text-align:
    center;

  font-size:
    28px;

  letter-spacing:
    5px;

  text-shadow:
    0 0 16px
    rgba(255, 184, 70, 0.12);
}


/* ==========================================
   TRACKS
   ========================================== */

.track {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    40px 1fr 300px;

  align-items:
    center;

  gap:
    20px;

  margin-bottom:
    8px;

  padding:
    16px 14px;

  box-sizing:
    border-box;

  position:
    relative;

  border:
    1px solid
    rgba(255, 255, 255, 0.05);

  border-radius:
    12px;

  background:

    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.022),
      rgba(36, 62, 73, 0.045)
    );

  box-shadow:
    inset 0 0 24px
    rgba(0, 0, 0, 0.09);

  transition:
    transform 0.30s ease,
    border-color 0.30s ease,
    background 0.30s ease,
    box-shadow 0.30s ease;
}


.track::after {
  content:
    "";

  position:
    absolute;

  left:
    12%;

  right:
    12%;

  bottom:
    -5px;

  height:
    1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(255, 190, 73, 0.12),
      transparent
    );

  opacity:
    0;

  transition:
    opacity 0.30s ease,
    left 0.30s ease,
    right 0.30s ease;
}


.track:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(243, 161, 43, 0.18);

  background:

    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.032),
      rgba(49, 85, 90, 0.065)
    );

  box-shadow:

    0 0 22px
    rgba(31, 67, 77, 0.10),

    inset 0 0 22px
    rgba(49, 85, 90, 0.025);
}


.track:hover::after {
  opacity:
    1;

  left:
    5%;

  right:
    5%;
}


.track-number {
  color:
    rgba(255, 196, 86, 0.80);

  font-size:
    14px;

  font-weight:
    bold;

  letter-spacing:
    1px;
}


.track-name {
  font-size:
    18px;

  transition:
    color 0.30s ease,
    text-shadow 0.30s ease;
}


.track:hover .track-name {
  color:
    white;

  text-shadow:
    0 0 12px
    rgba(95, 143, 153, 0.20);
}


/* ==========================================
   ORIGINAL AUDIO
   ========================================== */

.track audio {
  width:
    100%;

  height:
    40px;
}


.track audio:not([controls]) {
  display:
    none;
}


/* ==========================================
   CUSTOM AUDIO PLAYER
   ========================================== */

.custom-audio-player {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    46px 45px 1fr 45px;

  align-items:
    center;

  gap:
    10px;

  padding:
    10px 12px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(76, 117, 126, 0.20);

  border-radius:
    14px;

  background:

    linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.33),
      rgba(16, 35, 42, 0.50)
    );

  box-shadow:
    inset 0 0 18px
    rgba(0, 0, 0, 0.26);
}


/* ==========================================
   PLAY BUTTON
   ========================================== */

.custom-play-button {
  position:
    relative;

  width:
    44px;

  height:
    44px;

  border:
    1px solid
    rgba(243, 161, 43, 0.50);

  border-radius:
    50%;

  background:

    linear-gradient(
      180deg,
      rgba(229, 108, 24, 0.15),
      rgba(36, 62, 73, 0.24)
    );

  color:
    transparent;

  font-size:
    0;

  cursor:
    pointer;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.custom-play-button::before {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    52%;

  width:
    0;

  height:
    0;

  transform:
    translate(-42%, -50%);

  border-top:
    7px solid transparent;

  border-bottom:
    7px solid transparent;

  border-left:
    11px solid
    var(--layout-gold);
}


.custom-play-button:hover {
  transform:
    scale(1.08);

  border-color:
    rgba(255, 200, 90, 0.90);

  background:

    linear-gradient(
      180deg,
      rgba(229, 108, 24, 0.25),
      rgba(49, 85, 90, 0.30)
    );

  box-shadow:

    0 0 14px
    rgba(243, 161, 43, 0.18),

    0 5px 18px
    rgba(49, 85, 90, 0.18);
}


/* PAUSE ICON */

.track.playing
.custom-play-button::before {
  width:
    4px;

  height:
    14px;

  top:
    50%;

  left:
    42%;

  transform:
    translate(-50%, -50%);

  border:
    none;

  background:
    var(--layout-gold);
}


.track.playing
.custom-play-button::after {
  content:
    "";

  position:
    absolute;

  width:
    4px;

  height:
    14px;

  top:
    50%;

  left:
    58%;

  transform:
    translate(-50%, -50%);

  background:
    var(--layout-gold);
}


/* ==========================================
   AUDIO TIME
   ========================================== */

.current-time,
.duration {
  color:
    rgba(201, 218, 220, 0.68);

  font-size:
    12px;

  text-align:
    center;
}


/* ==========================================
   PROGRESS BAR
   ========================================== */

.progress-bar {
  width:
    100%;

  height:
    4px;

  appearance:
    none;

  -webkit-appearance:
    none;

  border-radius:
    10px;

  background:

    linear-gradient(
      90deg,
      rgba(255, 200, 90, 0.42),
      rgba(229, 108, 24, 0.31) 38%,
      rgba(49, 85, 90, 0.46) 72%,
      rgba(36, 62, 73, 0.55)
    );

  outline:
    none;

  cursor:
    pointer;
}


.progress-bar::-webkit-slider-thumb {
  width:
    12px;

  height:
    12px;

  -webkit-appearance:
    none;

  border:
    none;

  border-radius:
    50%;

  background:
    var(--layout-gold);

  cursor:
    pointer;

  box-shadow:

    0 0 9px
    rgba(255, 184, 60, 0.45),

    0 0 18px
    rgba(49, 85, 90, 0.20);
}


.progress-bar::-moz-range-thumb {
  width:
    12px;

  height:
    12px;

  border:
    none;

  border-radius:
    50%;

  background:
    var(--layout-gold);

  cursor:
    pointer;
}


/* ==========================================
   PLAYING TRACK
   ========================================== */

.track.playing {
  border-color:
    rgba(104, 151, 160, 0.30);

  background:

    linear-gradient(
      135deg,
      rgba(229, 108, 24, 0.06),
      rgba(49, 85, 90, 0.12)
    );

  box-shadow:

    0 0 26px
    rgba(36, 83, 94, 0.10),

    inset 0 0 22px
    rgba(49, 85, 90, 0.030);
}


.track.playing::after {
  opacity:
    1;

  left:
    3%;

  right:
    3%;
}


.track.playing .track-number {
  color:
    var(--layout-gold);
}


.track.playing .track-name {
  color:
    white;

  font-weight:
    bold;
}


/* ==========================================
   ABOUT
   ========================================== */

.album-description {
  width:
    100%;

  max-width:
    700px;

  margin:
    90px auto 40px;

  padding-top:
    25px;

  text-align:
    center;

  position:
    relative;
}


.album-description::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    50%;

  width:
    230px;

  height:
    1px;

  transform:
    translateX(-50%);

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(243, 161, 43, 0.40),
      transparent
    );
}


.album-description h2,
.album-details h2 {
  margin-bottom:
    25px;

  color:
    var(--layout-cream);

  font-size:
    28px;

  letter-spacing:
    5px;
}


.album-description p {
  color:
    var(--layout-muted);

  font-size:
    18px;

  line-height:
    1.7;
}


/* ==========================================
   ALBUM DETAILS
   ========================================== */

.album-details {
  width:
    100%;

  max-width:
    700px;

  margin:
    60px auto 80px;

  text-align:
    center;
}


.album-details p {
  margin:
    5px 0;

  color:
    var(--layout-text-soft);

  font-size:
    16px;

  line-height:
    1.8;
}


.album-details strong {
  color:
    var(--layout-gold);
}


/* ==========================================
   UNIVERSAL LEVIAS MUSIC HUB
   ========================================== */

.levias-social-hub {
  width:
    100%;

  max-width:
    900px;

  margin:
    100px auto 70px;

  padding:
    1px;

  box-sizing:
    border-box;

  position:
    relative;

  border-radius:
    28px;

  background:

    linear-gradient(
      135deg,
      rgba(255, 40, 40, 0.55),
      rgba(120, 0, 0, 0.18) 28%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(110, 0, 0, 0.18) 72%,
      rgba(255, 35, 35, 0.45)
    );

  box-shadow:

    0 30px 90px
    rgba(0, 0, 0, 0.50),

    0 0 35px
    rgba(160, 0, 0, 0.08);
}


.levias-hub-inner {
  width:
    100%;

  padding:
    55px 55px 45px;

  box-sizing:
    border-box;

  position:
    relative;

  overflow:
    hidden;

  border-radius:
    27px;

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(150, 0, 0, 0.12),
      transparent 35%
    ),

    radial-gradient(
      circle at 50% 100%,
      rgba(90, 0, 0, 0.08),
      transparent 38%
    ),

    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.98),
      rgba(2, 2, 2, 0.99)
    );
}


.levias-hub-inner::before {
  content:
    "";

  position:
    absolute;

  top:
    -170px;

  left:
    50%;

  width:
    500px;

  height:
    300px;

  transform:
    translateX(-50%);

  background:

    radial-gradient(
      circle,
      rgba(220, 0, 0, 0.11),
      transparent 68%
    );

  pointer-events:
    none;
}


.levias-hub-brand {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  justify-content:
    center;

  align-items:
    baseline;

  gap:
    9px;

  margin-bottom:
    50px;

  text-align:
    center;

  letter-spacing:
    7px;
}


.levias-hub-small {
  color:
    white;

  font-size:
    18px;

  font-weight:
    600;
}


.levias-hub-main {
  color:
    #d51f1f;

  font-size:
    18px;

  font-weight:
    700;
}


.levias-hub-accent {
  position:
    absolute;

  left:
    50%;

  bottom:
    -16px;

  width:
    52px;

  height:
    2px;

  transform:
    translateX(-50%);

  border-radius:
    999px;

  background:

    linear-gradient(
      90deg,
      transparent,
      #e22b2b,
      transparent
    );

  box-shadow:
    0 0 14px
    rgba(220, 30, 30, 0.45);
}


.levias-hub-section {
  position:
    relative;

  z-index:
    2;

  text-align:
    center;
}


.levias-hub-label {
  margin:
    0 0 10px;

  color:
    #b32323;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    5px;
}


.levias-hub-section h2 {
  margin:
    0;

  color:
    white;

  font-size:
    28px;

  letter-spacing:
    5px;
}


.levias-hub-description {
  margin:
    14px auto 30px;

  color:
    rgba(255, 255, 255, 0.47);

  font-size:
    14px;

  line-height:
    1.6;

  letter-spacing:
    0.5px;
}


.levias-hub-links {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    12px;

  max-width:
    700px;

  margin:
    0 auto;
}


.levias-hub-links a,
.levias-hub-links button {
  position:
    relative;

  min-width:
    118px;

  padding:
    13px 21px;

  box-sizing:
    border-box;

  overflow:
    hidden;

  color:
    rgba(255, 255, 255, 0.88);

  background:

    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.015)
    );

  border:
    1px solid
    rgba(190, 35, 35, 0.38);

  border-radius:
    999px;

  text-decoration:
    none;

  font-size:
    14px;

  font-weight:
    600;

  letter-spacing:
    1.1px;

  cursor:
    pointer;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}


.levias-hub-links a:hover,
.levias-hub-links button:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(235, 45, 45, 0.78);

  background:
    rgba(130, 0, 0, 0.13);
}


.levias-hub-divider {
  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;

  gap:
    18px;

  max-width:
    620px;

  margin:
    52px auto;
}


.levias-hub-divider > span {
  height:
    1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(180, 35, 35, 0.42)
    );
}


.levias-hub-divider > span:last-child {
  background:

    linear-gradient(
      90deg,
      rgba(180, 35, 35, 0.42),
      transparent
    );
}


.levias-hub-divider-mark {
  width:
    34px;

  height:
    34px;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  border:
    1px solid
    rgba(200, 35, 35, 0.55);

  border-radius:
    50%;

  color:
    #dc2c2c;

  background:
    #050505;
}


.levias-share-section {
  padding-bottom:
    5px;
}


.levias-hub-return {
  margin-top:
    55px;

  padding-top:
    30px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.05);

  text-align:
    center;
}


.levias-hub-return a {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  min-width:
    150px;

  padding:
    13px 21px;

  color:
    rgba(255, 255, 255, 0.88);

  border:
    1px solid
    rgba(190, 35, 35, 0.38);

  border-radius:
    5px;

  text-decoration:
    none;

  font-size:
    14px;

  font-weight:
    600;

  letter-spacing:
    1.1px;
}


/* ==========================================
   FOOTER
   ========================================== */

.site-footer {
  width:
    100%;

  padding:
    50px 20px;

  box-sizing:
    border-box;

  text-align:
    center;

  background:
    #000;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}


.site-footer .footer-logo {
  margin:
    0 0 15px;

  color:
    white;

  font-size:
    26px;

  letter-spacing:
    6px;
}


.site-footer p {
  margin:
    10px 0;

  color:
    #888;

  font-size:
    12px;

  letter-spacing:
    2px;
}


/* ==========================================
   PIXEL GUY
   ========================================== */

.pixel-guy-wrapper {
  position:
    fixed;

  right:
    22px;

  bottom:
    18px;

  width:
    160px;

  z-index:
    9999;

  display:
    none;

  flex-direction:
    column;

  align-items:
    flex-end;

  cursor:
    pointer;

  user-select:
    none;

  -webkit-user-select:
    none;

  touch-action:
    manipulation;

  opacity:
    0;

  transform:
    translateY(35px);

  transition:
    opacity 0.35s ease,
    transform 0.45s ease;
}


.pixel-guy-image {
  display:
    block;

  width:
    150px;

  height:
    auto;

  image-rendering:
    pixelated;

  -webkit-user-drag:
    none;

  filter:
    drop-shadow(
      0 8px 10px
      rgba(0, 0, 0, 0.45)
    );
}


.pixel-guy-bubble {
  position:
    absolute;

  right:
    118px;

  bottom:
    118px;

  width:
    max-content;

  min-width:
    170px;

  max-width:
    310px;

  padding:
    15px 18px;

  box-sizing:
    border-box;

  background:
    white;

  color:
    #111;

  border:
    3px solid #111;

  border-radius:
    18px;

  font-size:
    14px;

  font-weight:
    700;

  line-height:
    1.4;

  text-align:
    left;

  box-shadow:
    5px 6px 0
    rgba(0, 0, 0, 0.32);

  pointer-events:
    none;
}


.pixel-guy-bubble::after {
  content:
    "";

  position:
    absolute;

  right:
    18px;

  bottom:
    -14px;

  width:
    22px;

  height:
    22px;

  background:
    white;

  border-right:
    3px solid #111;

  border-bottom:
    3px solid #111;

  transform:
    rotate(45deg);
}


/* ==========================================
   TABLET / MOBILE
   ========================================== */

@media (max-width: 900px),
       (max-device-width: 900px) and (pointer: coarse) {

  .album-page {
    width:
      100%;

    padding:
      30px clamp(16px, 5vw, 40px);

    box-sizing:
      border-box;
  }


  .album-header {
    width:
      100%;

    max-width:
      700px;

    flex-direction:
      column;

    gap:
      45px;

    margin-bottom:
      45px;

    padding:
      24px;
  }


  .album-art-side {
    width:
      100%;

    order:
      1;
  }


  .album-art {
    width:
      clamp(
        220px,
        72vw,
        420px
      );
  }


  .album-info {
    width:
      100%;

    max-width:
      430px;

    text-align:
      center;

    order:
      2;
  }


  .album-info h1 {
    font-size:
      clamp(
        30px,
        8.2vw,
        45px
      );

    letter-spacing:
      clamp(
        1.5px,
        1vw,
        3px
      );
  }


  .streaming-links {
    width:
      100%;

    max-width:
      360px;

    margin:
      0 auto;
  }


  .track-list,
  .album-description,
  .album-details {
    width:
      100%;

    box-sizing:
      border-box;
  }


  .track-list::before {
    width:
      100%;
  }


  .track {
    grid-template-columns:
      35px minmax(0, 1fr);

    gap:
      10px;
  }


  .track-number {
    grid-column:
      1;
  }


  .track-name {
    grid-column:
      2;

    text-align:
      left;
  }


  .custom-audio-player {
    grid-column:
      1 / -1;

    grid-template-columns:
      44px 40px minmax(0, 1fr) 40px;

    gap:
      6px;

    margin-top:
      8px;
  }

}


/* ==========================================
   SMALL MOBILE
   ========================================== */

@media (max-width: 600px) {

  .album-header {
    padding:
      20px;
  }


  .album-info h1 {
    font-size:
      clamp(
        26px,
        7.2vw,
        35px
      );

    letter-spacing:
      1px;
  }


  .levias-social-hub {
    width:
      calc(100% - 10px);

    border-radius:
      22px;
  }


  .levias-hub-inner {
    padding:
      42px 20px 34px;

    border-radius:
      21px;
  }


  .levias-hub-section h2 {
    font-size:
      23px;
  }


  .levias-hub-links {
    gap:
      10px;
  }


  .levias-hub-links a,
  .levias-hub-links button {
    min-width:
      0;

    padding:
      12px 17px;

    font-size:
      13px;
  }


  .pixel-guy-wrapper {
    right:
      10px;

    bottom:
      10px;

    width:
      120px;
  }


  .pixel-guy-image {
    width:
      110px;
  }


  .pixel-guy-bubble {
    right:
      84px;

    bottom:
      86px;

    min-width:
      145px;

    max-width:
      min(
        235px,
        calc(100vw - 125px)
      );

    padding:
      12px 14px;

    font-size:
      12px;

    border-width:
      2px;

    border-radius:
      14px;
  }

}