/* =========================
   COLOURS
   =========================
Colour Themes */
:root {
  --body-background-color: #1c1a20;
  --content-background-color: #29272d;
  --content-text-color-primary: #ffffff;
  --content-text-color-muted: #6c6775;
  --content-text-color-muted-transparent: #67678E77;
  --content-text-color-orange: #f9aa6d;
  --content-text-color-yellow: #f9e66d;
  --content-text-color-green: #6df976;
  --content-text-color-blue: #6dbbf9;
  --content-text-color-pink: #f96df1;
  --section-white-border-color: #ffffff;
}
/* Colour Application */
.text-grey {
  color: var(--content-text-color-muted);
}
.text-white {
  color: var(--content-text-color-primary);
}
.text-orange {
  color: var(--content-text-color-orange);
}
.text-yellow {
  color: var(--content-text-color-yellow);
}
.text-green {
  color: var(--content-text-color-green);
}
.text-blue {
  color: var(--content-text-color-blue);
}
.text-pink {
  color: var(--content-text-color-pink);
}

/* =========================
   FONTS
   =========================
This is for loading the custom font */
@font-face {
  font-family: 'RobotoMonoRegular';
  src: url('fonts/RobotoMono-Regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* =========================
   GLOBAL STYLES
   =========================
Removes default browser spacing and ensures full width */
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}
/* Ensures full viewpoint height */
html {
  height: 100%;
  scroll-behavior: smooth;
}


/* =========================
   FORMAT / CENTERING
   =========================
Sets layout, colors, font, and centers content horizontally. */
body {
  min-height: 100%;
  background-color: var(--body-background-color);
  color: var(--content-text-color-primary);
  justify-content: center;
  font-family: 'RobotoMonoRegular', monospace;
  overflow-y: scroll;
  display: grid;
  grid-template-columns: 1fr 800px 1fr;
}


/* =========================
   LINKS
   =========================
Sets colour for links */
a {
  color: var(--content-text-color-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  padding-bottom: 3px;
}
/* Removes underline from links unless hovered. */
.link-concealed:not(:hover) {
  text-decoration: none;
}


/* =========================
   TYPOGRAPHY
   =========================
Styling for Headings and Paragraphs */
h1, h2 {
  margin: 0 0 0.2em 0;
  font-size: 1em;
  color: #CC668C;
  font-weight: normal;
}
p {
  margin: 0 0 0.4em 0;
  line-height: 1.7;
}
/* Centers text, hide elements, prevent text selection */
.centered {
  text-align: center;
}
.invisible {
  visibility: hidden;
}
.no-select {
  user-select: none;
}


/* =========================
   PAGE SIZE & COLOUR
   =========================
Sets the background colour */
#content {
  width: calc(100% - 40px);
  padding: 20px;
  background-color: var(--content-background-color);
  position: relative;
  grid-column: 2;
  z-index: 2;
}
/* Sets the size of the background colour */
@media (min-width: 800px) {
  #content {
    width: 800px;
  }
}


/* =========================
   GREETING STYLING
   =========================
Space below greeting section */
#content > .post-greeting-speech {
  margin-bottom: 50px;
}


/* =========================
   SECTION STYLING
   =========================
General Section Styling */
#content > section {
  border-radius: 2px;
  padding: 10px 10px 12px 10px;
  margin-bottom: 30px;
}
/* Makes the h2 appear like a label sitting on the border */
#content > section > h2 {
  display: inline-flex;
  position: absolute;
  margin-top: -1.5em;
  background: var(--content-background-color);
  padding: 0 6px;
  margin-left: 5px;
}
/* Remove margin from last element in any sections */
#content > section :last-child {
  margin-bottom: 0;
}
/* Section divider line (Alternative to seperators) */
#content > section > hr {
  background: none;
  border: none;
  height: 0;
  margin: 10px 0 6px 0;
  border-top: 1px dotted var(--content-text-color-muted);
}


/* =========================
   SECTION BOARDER COLOURS
   =========================
Sets a boarder on section w\ different colours */
#content > section.section-grey {
  border: 2px solid var(--content-text-color-muted);
}
#content > section.section-grey > h2 {
  color: var(--content-text-color-muted);
}
#content > section.section-white {
  border: 2px solid var(--section-white-border-color);
}
#content > section.section-white > h2 {
  color: var(--section-white-border-color);
}
#content > section.section-orange {
  border: 2px solid var(--content-text-color-orange);
}
#content > section.section-orange > h2 {
  color: var(--content-text-color-orange);
}
#content > section.section-yellow {
  border: 2px solid var(--content-text-color-yellow);
}
#content > section.section-yellow > h2 {
  color: var(--content-text-color-yellow);
}
#content > section.section-green {
  border: 2px solid var(--content-text-color-green);
}
#content > section.section-green > h2 {
  color: var(--content-text-color-green);
}
#content > section.section-blue {
  border: 2px solid var(--content-text-color-blue);
}
#content > section.section-blue > h2 {
  color: var(--content-text-color-blue);
}
#content > section.section-pink {
  border: 2px solid var(--content-text-color-pink);
}
#content > section.section-pink > h2 {
  color: var(--content-text-color-pink);
}




/* =========================
   SEPARATORS & SPACING
   =========================
Puts separator in the center and gives it a colour */
#content > .separator {
  color: var(--content-text-color-muted);
  text-align: center;
  margin-bottom: 30px;
}
#content > p {
  margin-bottom: 30px;
}


/* =========================
   NAVIGATION
   =========================
Center the navigation links */
#content > section.navigation > p {
  margin:0;
  padding:0;
  text-align: center;
  word-spacing: 100%;
}
/* Sets default colour to muted and then sets the colour when you hover over it */
#content > section.navigation > p > a {
  color: var(--content-text-color-muted);
}
/* Sets the hover colour */
#content > section.navigation > p > a.hover-primary:hover {
  color: var(--content-text-color-primary);
}
#content > section.navigation > p > a.hover-orange:hover {
  color: var(--content-text-color-orange);
}
#content > section.navigation > p > a.hover-yellow:hover {
  color: var(--content-text-color-yellow);
}
#content > section.navigation > p > a.hover-green:hover {
  color: var(--content-text-color-green);
}
#content > section.navigation > p > a.hover-blue:hover {
  color: var(--content-text-color-blue);
}
#content > section.navigation > p > a.hover-pink:hover {
  color: var(--content-text-color-pink);
}
/* Sets the colour of the link if its the active page */
#content > section.navigation > p > a.active-primary {
  color:var(--content-text-color-primary)
}
#content > section.navigation > p > a.active-orange {
  color:var(--content-text-color-orange)
}
#content > section.navigation > p > a.active-yellow {
  color:var(--content-text-color-yellow)
}
#content > section.navigation > p > a.active-green {
  color:var(--content-text-color-green)
}
#content > section.navigation > p > a.active-blue {
  color:var(--content-text-color-blue)
}
#content > section.navigation > p > a.active-pink {
  color:var(--content-text-color-pink)
}


/* =========================
   INFO BOXES
   =========================
Adding Images to the LEFT of text boxes */
.infobox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.infobox > img {
  width: 300px;
  height: auto;
  flex-shrink: 0;
  margin: 4px 15px 0 0;
  padding-bottom: 20px;
  overflow: hidden;
}
.infobox-text > a {
  display: block;
}
/* Adding Images normally to info boxes */
.imagebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}
.imagebox > img {
  max-width: 100%;
  height: auto;
}
.imagebox > h2 {
  margin-bottom: 20px;
}
.imagebox > p {
  margin-bottom: 20px;
}
/* Infobox */
.infobox ol {
  list-style: none;
  counter-reset: track;
  padding-left: 0;
  margin: 0.5em 0;
}
.infobox ol li {
  counter-increment: track;
  display: flex;
  gap: 1.2em;
  margin-bottom: 0.4em;
}
.infobox ol li::before {
  content: counter(track) ".";
  width: 2ch;
  flex-shrink: 0;
  text-align: right;
  color: var(--content-text-color-yellow);
}
.section-pink .infobox ol li::before {
  color: var(--content-text-color-pink);
}

.section-blue ol li::marker {
  color: var(--content-text-color-blue);
}


.infobox-text > .comment-box {
  margin-top: 15px;
  margin-bottom: 0;
}
.infobox-text {
  flex: 1;
}
section.section-yellow {
  border: 2px solid var(--content-text-color-yellow);
}
section.section-yellow > h2 {
  color: var(--content-text-color-yellow);
}
section {
  border-radius: 2px;
  padding: 10px 10px 12px 10px;
  margin-bottom: 30px;
}
section > h2 {
  display: inline-flex;
  position: absolute;
  margin-top: -1.5em;
  background: var(--content-background-color);
  padding: 0 6px;
  margin-left: 5px;
}


/* =========================
   MUSIC PLAYER
   =========================
Fake Media Player */
#content > .player-container {
  display: flex;
  justify-content: center;
}
.track-player {
  flex: 1;
  max-width: 320px;
}
.track-player > .track-time-panel {
  display: flex;
  width: 100%;
}
.track-player > .track-time-panel > .time-bar {
  flex: 1;
  background: var(--content-text-color-primary);
  height: 2px;
  margin: 0.6em 9px 0 9px;
  position: relative;
}
.track-player > .track-time-panel > .time-bar > .current-position {
  width: 8px;
  height: 8px;
  background: var(--content-text-color-primary);
  position: absolute;
  left: 0;
  top: -3px;
  margin-left: -4px;
}
.track-img {
  width: 400px;
  height: auto;
  flex-shrink: 0;
  margin-right: 20px;
  margin-bottom: 20px;
  padding-bottom: 4px;
  overflow: hidden;
}

/* =========================
   ALBUM SHOWCASE
   =========================
Albumbox */
.albumbox {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  padding: 10px; 
  box-sizing: border-box;
}
/* Row that contains all album items */
.albumbox .album-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; 
  gap: 20px;
}
/* Each album item (image + text) */
.albumbox .album-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: calc((100% - 20px) / 2);
  box-sizing: border-box;
}
.albumbox .album-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.albumbox .album-item .text-block {
  text-align: left;
  width: 100%;
  margin-top: 0.5em;
}
.albumbox .album-item .text-block ol {
  list-style: none;
  counter-reset: track;
  padding-left: 0;
  margin: 0.5em 0;
}
.albumbox .album-item .text-block ol li {
  counter-increment: track;
  display: flex;
  gap: 1.2em;
  margin-bottom: 0.4em;
}
.albumbox .album-item .text-block ol li::before {
  content: counter(track) ".";
  width: 2ch;
  flex-shrink: 0;
  text-align: right;
  color: var(--content-text-color-yellow);
}
.albumbox .album-item .text-block a {
  margin-bottom: 0.4em;
  display: block;
}




/* =========================
   BACKGROUND IMAGES
   =========================
Adds images to the left and right of content */
.side {
  position: relative;
  z-index: 1;
}
.floating-art {
  position: absolute;
  z-index: 0;
}
.top-left { top: 35%; left: 25%; width: 500px; }
.top-right { top: 10%; right: 25%; width: 400px; }

.bottom-left { top: 80%; left: 25%; width: 500px; }
.bottom-right { top: 60%; right: 25%; width: 500px; }

@media (max-width: 1700px) {
  .side {
    display: none;
  }
}



/* =========================
   ART PAGE
   =========================
*/
#content > section > h2.palette-heading {
  position: static;
  display: block;
  width: 740px;
  margin: 0 auto 0.5rem auto;
  padding: 0;
  box-sizing: border-box;
}
.palette {
  width: 740px;
  margin: 1rem auto 0 auto;
  gap: 0.5rem;
  display: flex;
}
.palette-colour {
  inline-size: 100%;
  flex: 1;
}
.colorblock {
  padding-block: 1rem;
  margin-block:.0625rem;
  border-radius: 4px;
  max-width: 100%;
}
.showcase-img {
  display: block;
  width: calc(100%);
  margin: 0 auto 20px auto;
  box-sizing: border-box;
}


/* =========================
   ART CONTAINER
   =========================
*/
#content > .art-container {
  display: flex;
  justify-content: center;
}
.art-content {
  flex: 1;
  max-width: 320px;
}
.art-img {
  width: 400px;
  height: auto;
  flex-shrink: 0;
  margin-right: 20px;
  overflow: hidden;
}
/* =========================
   TRIO ART GALLERY - RECT
   =========================
*/
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.gallery-item {
  flex: 1 1 calc(33.333% - 20px);
  box-sizing: border-box;
}
.gallery-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
}
@media (max-width: 800px) {
  .gallery-item {
    flex: 1 1 100%;
  }
}
/* =========================
   TRIO ART GALLERY - SQUARE
   =========================
*/
.gallery2-item {
  flex: 1 1 calc(33.333% - 20px);
  box-sizing: border-box;
}
.gallery2-img {
  width: 100%;
  max-width: 250px;
  height: auto;
  display: block;
  margin-bottom: 20px;
}
.gallery2-img:hover {
  outline: 3.5px solid var(--content-text-color-blue);
}
@media (max-width: 800px) {
  .gallery-item {
    flex: 1 1 100%;
  }
}
/* =========================
   PAGE NAV - GALLERY
   ========================= 
*/
body {
  display: grid;
  grid-template-columns: 1fr 800px 1fr;
}
.page-nav {
  --nav-colour: var(--content-text-color-blue);
  position: fixed;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);

  width: 220px;

  padding: 15px;

  background: rgba(41, 39, 45, 0.85);

  border: 2px solid var(--nav-colour);
  border-radius: 4px;

  z-index: 1;
}
.page-nav h2 {
  margin-bottom: 10px;
  color: var(--nav-colour);
}
.page-nav a {
  display: block;
  margin-bottom: 8px;

  color: var(--content-text-color-muted);
  text-decoration: none;
}
.page-nav a:hover {
  color: var(--nav-colour);
}

.page-nav-blue {
  --nav-colour: var(--content-text-color-blue);
}
.page-nav-pink {
  --nav-colour: var(--content-text-color-pink);
}
.page-nav-green {
  --nav-colour: var(--content-text-color-green);
}
.page-nav-yellow {
  --nav-colour: var(--content-text-color-yellow);
}
.page-nav-orange {
  --nav-colour: var(--content-text-color-orange);
}
.page-nav-white {
  --nav-colour: var(--content-text-color-primary);
}
@media (max-width: 1700px) {
  .page-nav {
    display: none;
  }
}


/* =========================
   LIGHTBOX OVERLAY
   ========================= 
*/
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9999;
}
/* ACTIVE STATE */
.lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
/* CONTENT WRAPPER */
.lightbox-content {
  display: flex;
  gap: 30px;
  max-width: 90vw;
  max-height: 90vh;
  align-items: center;
}
/* IMAGE */
.lightbox-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.lightbox-img {
  max-width: 70vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  background: #111;
}
/* INFO PANEL */
.lightbox-info {
  width: 260px;
  color: var(--content-text-color-primary);
  background: var(--content-background-color);
  border: 1px solid var(--content-text-color-blue);
  padding: 15px;
  border-radius: 6px;
}
.lightbox-info h2 {
  margin-top: 0;
  color: var(--content-text-color-blue);
}
.lightbox-info a {
  color: var(--content-text-color-blue);
  word-break: break-word;
}
/* CLOSE BUTTON */
.lightbox-close {
  position: fixed;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: var(--content-text-color-primary);
  cursor: pointer;
  z-index: 10000;
  transition: color 0.2s ease;
}
.lightbox-close:hover {
  color: var(--content-text-color-pink);
}
@media (max-width: 900px) {
  .lightbox-content {
    flex-direction: column;
    text-align: center;
  }
  .lightbox-info {
    width: 100%;
    max-width: 500px;
  }
  .lightbox-img {
    max-width: 90vw;
    max-height: 60vh;
  }
}

@media (max-width: 800px) {
  body {
    display: block;
  }
}

@media (max-width: 768px) {
  /* =========================
     GLOBAL MOBILE SAFETY
     ========================= */
  html, body {
    overflow-x: hidden;
  }
  body {
    grid-template-columns: 1fr;
    display: block;
  }
  * {
    box-sizing: border-box;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  #content {
    width: 100%;
    max-width: 100%;
    padding: 15px;
  }
  .infobox,
  .art-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .infobox > img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 0 10px 0;
  }
  .infobox-text,
  .art-content {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .art-img img,
  .showcase-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
  .art-img {
    width: 100%;
    max-width: 320px;
    margin-right: 0;
  }
  #content > section > h2.palette-heading {
    width: 100%;
    max-width: 100%;
  }
  .palette {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
  }
  .palette-colour {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
  }
  #content > section.navigation > p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    word-spacing: normal;
  }
  .albumbox .album-row {
    flex-direction: column;
  }
  .albumbox .album-item {
    width: 100%;
  }
  .gallery-item {
    flex: 1 1 100%;
  }
  p,
  small,
  a,
  span,
  .art-content,
  .lightbox-info {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  h1,
  h2 {
    font-size: 1.1rem;
  }
  .side {
    display: none;
  }
  .player-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .track-img {
    width: 100%;
    max-width: 400px;
    margin-right: 0;
  }
  .track-player {
    width: 100%;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  #content > section > h2,
  section > h2 {
    position: static;
    display: block;
    margin: 0 0 10px 0;
    padding: 0;
    background: none;
  }
}