/* -------------------------------------------------- */
/* FONT IMPORT                                        */
/* -------------------------------------------------- */
@font-face {
  font-family: "ACES04";
  src: url(fonts/ACES04.woff2) format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ACES07";
  src: url(fonts/ACES07_Regular.woff2) format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------- */
/* GLOBAL STYLES                                      */
/* -------------------------------------------------- */
:root {
  --bg-tint: rgba(188, 185, 167, 0.85);
  --fg: #31302A;
}

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); /* old browsers */
  clip-path: inset(50%); /* modern browsers */
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: absolute;
  top: 10px; /* visible position */
  left: 10px;
  width: auto;
  height: auto;
  padding: 8px;
  background: #000;
  color: #fff;
  clip: auto;
  clip-path: none;
  z-index: 100;
  white-space: normal;
}

html, body {
  height: 100%;
  margin: 0;
  cursor: url(images/cursor_default.webp) 16 16, auto;
}

body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0;
  min-height: 100vh;
  position: relative;
  font-family: "ACES07", sans-serif;
  font-size: clamp(16px, 2vw, 24px); 
  background-image: url('images/Background_Logo.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

p {
  cursor: url(images/cursor_text.webp) 16 16, text;
}

a {
  cursor: url(images/cursor_pointer.webp) 0 0, pointer;
}

*:not(.unselectable)::selection {
  background-color: #434658; 
  color: #CECFD5; 
  text-shadow:
    0 0 2px #CECFD5,
    0 0 4px #CECFD5;
}

*:not(.unselectable)::-moz-selection {
  background-color: #434658;
  color: #CECFD5;
  text-shadow:
    0 0 2px #CECFD5,
    0 0 4px #CECFD5;
}

/* Disable selection glow for .unselectable elements */
.unselectable::selection,
.unselectable *::selection {
  background: none;
  color: inherit;
  text-shadow: none;
}

.unselectable::-moz-selection,
.unselectable *::-moz-selection {
  background: none;
  color: inherit;
  text-shadow: none;
}

@media (pointer: coarse) {
  body { cursor: auto; }
}

.unselectable {
  user-select: none;          /* Standard */
  -webkit-user-select: none;  /* Chrome, Safari, Opera */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* Internet Explorer/Edge */
  filter: none;
}

.clickable {
  cursor: url(images/cursor_pointer.webp) 0 0, pointer;
}

.text {
  cursor: url(images/cursor_text.webp) 16 16, text;
}

.grabbable {
  cursor: url(images/cursor_grab.webp) 16 16, grab;
}

.window-content-inner p {
  display: inline-block;
}

input::placeholder {
  font-family: "ACES07";
  letter-spacing: 3px;
  color: rgba(188, 185, 167, 0.5);
  opacity: 1;
}

input:-webkit-autofill {
  background-color: rgba(188, 185, 167, 0.85);
  color: #31302A
}

input:-webkit-autofill::placeholder {
  color: rgba(188, 185, 167, 0.85);
}

textarea::placeholder {
  font-family: "ACES07";
  letter-spacing: 3px;
  color: rgba(188, 185, 167, 0.5);
  opacity: 1;
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #31302A;

}

::-webkit-scrollbar-thumb {
  background: #676452;
      cursor: url(images/cursor_pointer.webp) 0 0, pointer;
}

::-webkit-scrollbar-thumb:hover {
  background: #8a876e;
}

/* Small Desktop */
@media (max-width: 1200px) {
}

.socials {
  color: rgba(188, 185, 167, 0.85);
  position: fixed;
  top: 2vh;
  left: 2vh;

  z-index: 9998;
  display: flex;
  gap: 18px;
}

.icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.socials a {
    color: rgba(188, 185, 167, 0.85);
    transition: color .25s, transform .25s;
}

.socials a:hover {
    color: white;
    transform: translateY(-4px);
}

.socials img {
  width: 24px;
  height: 24px;
  display: block;
}

/* -------------------------------------------------- */
/* LOADING SCREEN                                     */
/* -------------------------------------------------- */
#loadingScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;  
  pointer-events: all;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

#loadingScreen.fade-out {
    opacity: 0;
    pointer-events: none;
}

#loadingScreen.visible {
  opacity: 1;
}

#loadingScreen.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.loading-logo {
  width: 100px;
  height: 124px;
  margin: 0 20px 20px 0;
  transform-style: preserve-3d;
  animation: spinY 1.5s linear infinite;
}

@keyframes spinY {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

.loading-text {
  color: #fff;
  font-family: "ACES04";
  font-size: 2rem;
  letter-spacing: 5px;
  display: flex;
  align-items: center;
}

.dots {
  display: inline-block;
  width: 3ch; /* reserve space for up to 3 dots */
  text-align: left;
}

/* -------------------------------------------------- */
/* LANGUAGE SWITCHER                                  */
/* -------------------------------------------------- */
#languageSwitcher {
  transition: opacity 0.5s ease;
} 

/* -------------------------------------------------- */
/* BACKGROUND LAYERS                                  */
/* -------------------------------------------------- */
body::before,
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
}

body::before {
  background-image: url('images/Background_Grid.webp');
  background-repeat: repeat;
  animation: moveGrid 30s ease-in-out infinite;  
}

body::after {
  background-image: url('images/Background_Vignette.webp');
  scale: 110%;
  background-size: cover;          /* <-- always fills viewport */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  animation: pulseVignette 2s ease-in-out infinite alternate;
  transform: translate(var(--vignette-x, 0), var(--vignette-y, 0)); /* remove scale */
  transition: transform 0.2s ease-out; 
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
  will-change: transform, filter;
}

@keyframes moveGrid {
  0%   { background-position: 0 0; }
  50%  { background-position: 500px 100px; }
  100% { background-position: 0 0; }
}

@keyframes pulseVignette {
  0% {
    filter: drop-shadow(0 0 10px rgba(23, 112, 153, 0.438));
    opacity: 0;
  }
  100% {
    filter: drop-shadow(0 0 40px rgba(49, 170, 226, 0.9));
    opacity: 0.15;
  }
}

.lang-switch {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.lang-btn {
  background: transparent;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.button-container .ui-button {
  padding: 0 5px; /* adjust horizontal padding */
  box-sizing: border-box; /* include padding in width calculation */
  text-align: center;
  white-space: nowrap;
}

.lang-btn img {
  width: 18px;
  height: 12px;
}

.lang-btn.active {
  border: 2px solid rgba(188, 185, 167, 0.85); 
  opacity: 1;
}

[data-i18n] {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.fading {
  opacity: 0;
}

.scramble {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

.scramble.fade-in {
  opacity: 1;
}


/* -------------------------------------------------- */
/* WINDOW SYSTEM                                      */
/* -------------------------------------------------- */
.window {
  position: absolute;
  top: 100px;
  left: calc(30% + 100px);
  max-width: calc(100% - 40px);
  z-index: 5;
}

.window-header {
  position: relative;
  z-index: 1;
  background-color: rgba(188, 185, 167, 0.85);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform-origin: left;
  transform: scaleX(0);
  animation: pushInX 0.5s ease-in-out forwards;
  overflow: visible; 
}

@keyframes pushInX {
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

.window-content-upper {
  position: relative;
  padding: 0 16px 0 16px;
  background-color: rgba(188, 185, 167, 0.85);
  overflow: hidden;
  transform-origin: top;
  transform: scaleY(0);
  animation: pushInY 0.5s ease-in-out forwards;
  animation-delay: 0.35s;
  text-align: justify;
}

.window-content-inner {
  position: relative;
  padding: 16px;
  background-color: rgba(188, 185, 167, 0.85);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    20px 100%,
    0 calc(100% - 20px)
  );
  overflow: hidden;
  transform-origin: top;
  transform: scaleY(0);
  animation: pushInY 0.5s ease-in-out forwards;
  animation-delay: 0.35s;
  text-align: justify;
}

@keyframes pushInY {
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.window.active {
  z-index: 10;
}

.window.closing {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.empty {
  padding: 10px;
}

/* home */
#homeBox {
  width: 700px;
}
/* music.mp3 */
#musicBox {
  width: 500px;
}
.musicFolderBtn{
  background-color: #31302A;
  color: rgb(188, 185, 167);
  letter-spacing: 3px;
  width: fit-content;
  text-align: center;
  margin: 10px auto 0 auto;
  padding: 3px 10px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.musicFolderBtn:hover {
  transform: scale(1.05);
  opacity: 1;
}
.musicFolderBtn:active  {
  transform: scale(0.95);
  opacity: 0.7;
}

/* music.folder */
#musicFolderWindow {
  display: flex;
  position: absolute;
  width: 550px;
  top: 50px;
  left: 650px;
  z-index: 10;
  max-height: 90vh;
  flex-direction: column;
  box-sizing: border-box;
  opacity: 1;
  transform: scale(1); /* initial scale */
  transition: opacity 0.3s ease, transform 0.3s ease; /* fade + shrink */
}

/* Open state */
#musicFolderWindow.open {
  opacity: 1;
  transform: scale(1);
}

/* Closing / shrink + fade */
#musicFolderWindow.closing {
  opacity: 0;
  transform: scale(0.8); /* same as other windows */
}

#musicFolderWindow .window-header {
  flex: 0 0 auto;
  padding: 5px 10px;
  user-select: none;
}

#musicFolderWindow .window-content-inner {
  overflow-y: auto;
  max-height: calc(100vh - 120px);
}

/* Inner layout */
.folder-content {
  font-size: 20px;
  color: #31302A;
}

.track-category {
  background-color: #31302A;
  border: none;
  color: rgb(188, 185, 167);
  font-family: "ACES04";
  font-size: 25px;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.track-row,
.notes-panel {
  display: none;
  text-align: left;
  overflow: hidden;
  max-height: 0;        /* collapsed */
  transition: max-height 0.4s ease; /* smooth drop */
}

.track-row.open,
.notes-panel.open {
  display: block; /* opens when "open" class is added */
  max-height: 750px;
}

.notes-panel {
  margin: 0 0 10px 40px;
  line-height: 1.5;
  border: 1px solid #676452;
  border-radius: 2px;
  filter:contrast(0.7);
}

.notes-panel p {
  margin: 0 10px 0 10px;
  line-height: 1.5;
}

.track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 10px 0;
}

.track-name {
  margin-left: 20px;
}

.notes-btn {
  background: none;
  border: none;
  color: #31302A;
  font-family: "ACES04";
  font-size: 14px;
  padding: 2px 6px;
  letter-spacing: 3px;
}

.notes-btn:hover {
  text-decoration: underline;
}

.arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.arrow.arrow-rotated {
  transform: rotate(90deg);
}

.track-play-btn {
  width: 30px;
  height: 30px;
  background-color: transparent;
  border: none;
}

.pause-icon, .play-icon {
  position: relative;
  bottom: -11px;
  margin-top: -55px;
  scale: 0.6;
  height: auto;
  width: auto;
}

.pause-icon {
  display: none;
}

/* projects */
#projectsBox {
  width: 700px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 150px); /* fixed width for each column */
  grid-auto-rows: 150px;                   /* matches thumbnail height */
  gap: 10px;
  padding: 10px;
  max-height: calc(2 * 150px + 20px);      /* 2 rows visible by default */
  overflow-y: auto;
  background-color: #676452;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    20px 100%,
    0 calc(100% - 20px)
  );
}

.projects-thumbnail {
  display: block;
  width: 150px;
  height: 150px;
}

.thumbnail-window {
  width: 440px; 
  max-height: 80vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  line-height: 30px;
}

.thumbnail-button {
  display: inline-block;
  background: none !important;
  border: none;
  padding: 0;
  margin: 0;
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  transition: transform 0.15s ease, filter 0.15s ease;
  clip-path: none !important;
}

.thumbnail-button img {
  margin: 0;
  width: 150px;
  height: 150px;
  object-fit: cover;
  pointer-events: none;
  transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.projects-grid > .thumbnail-button {
  width: 150px;
  height: 150px;
  max-width: 150px;
  max-height: 150px;
}

.thumbnail-button:not(.selected):hover img {
  transform: scale(0.95);
  filter: blur(1px) brightness(0.85);
}

.thumbnail-button:active img {
  transform: scale(0.90, 0.85);
  filter: brightness(0.75);
}

.thumbnail-button.clicked img {
  animation: thumbnail-click-bounce 0.25s ease-out;
}

@keyframes thumbnail-click-bounce {
  0%   { transform: scale(0.90, 0.85); }
  40%  { transform: scale(1.03, 1.07); } /* stretch */
  100% { transform: scale(1.00, 1.00); } /* restore */
}

.thumbnail-button.selected img {
  transform: scale(0.90);
  filter: blur(2px) brightness(0.70);
  opacity: 0.9;
}

.projects-thumbnail {
  height: 100px;
  width: 100px;
  margin: 10px;
}

.video-container {
  position: relative;
  width: 100%;
  max-height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.video-container iframe {
  width: 100%;
  height: 280px;
  border: none;
  pointer-events: auto; /* allow clicks */
}

/* about */
#aboutBox {
  width: 710px;
}

.personal-info{
  letter-spacing: 3px;
  word-spacing: 0.3em;
}

#me {
  width: 300px;
  float: right;
  margin-left: 20px;
  margin-bottom: 10px;
  border: 2px solid #5f5d4b;
}

.about-paragraph {
  text-align: left;
  line-height: 1.5;
  text-align: justify;
}

/* ========================== */
/* CONTACT SECTION */
/* ========================== */

#contactBox {
  width: 600px;
  max-width: 90vw;
  padding: 10px;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    20px 100%,
    0 calc(100% - 20px)
  );

}

#contactBox .window-header {
  padding: 5px 10px;
  user-select: none;
  display: flex;
  align-items: center;
}

#contactBox .window-content-inner {
  padding: 10px;
  line-height: 1.4;
}

#contactBox .window-content-inner p {
  margin-bottom: 1em;
}

#contactBox form {
  display: flex;
  flex-direction: column;
}

#contactBox form input[type="email"],
#contactBox form textarea {
  font-size: 0.85rem;
  font-family: "ACES07";
  padding: 6px 8px;
  border: 1px solid #e0dfd5;
  background-color: #676452;
  color: #e0dfd5;
  resize: vertical;
}

#contactBox form textarea {
  resize: none;
  min-height: 140px;
  max-height: 300px;
}

#contactBox form input[type="submit"] {
  background-color: #e0dfd5;
  color: #9c977c;
  font-size: 0.9rem;
  font-weight: bold;
  border: none;
  padding: 6px 12px;
  margin-top: 5px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

#contactBox form input[type="submit"]:hover {
  transform: scale(0.97);
  filter: brightness(0.9);
}

#contactBox .empty {
  height: 10px;
}

@media screen and (max-width: 600px) {
  #contactBox {
    width: 90vw;
  }
}

.submitBtn {
  background-color: #e0dfd5;
  color: #676452;
  font-family: "ACES04";
  letter-spacing: 4px;
  font-size: 5rem;
  border: none;
  padding: 6px 12px;
  margin-top: 5px;
  margin-bottom: 20px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.submitBtn:hover {
  transform: scale(0.97);
  filter: brightness(0.9);
}

.submitBtn:active {
  animation: submit-click-bounce 0.25s ease-out;
}

@keyframes submit-click-bounce {
  0%   { transform: scale(0.90, 0.85); }
  40%  { transform: scale(1.03, 1.07); } /* stretch */
  100% { transform: scale(1.00, 1.00); } /* restore */
}

#message, #email {
  margin-bottom: 1em;
}

.hidden-div {
  display: none;
}

/* -------------------------------------------------- */
/* BUTTONS (Left Menu)                                */
/* -------------------------------------------------- */
button[data-target] {
  font-family: "ACES04";
  color: var(--fg);
  height: 200px;
  width: 200px;
  background-image: url(images/Icons.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  outline: none;
  margin: 10px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: transform 0.3s ease, clip-path 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

/* Hover */
button[data-target]:hover {
  filter: brightness(0.7);
  transform: scale(1.05);
}

/* Active / Expanded state */
button[data-target].expanded {
  transform: scale(1.1);
  clip-path: polygon(50% -10%, 110% 50%, 50% 110%, -10% 50%);
  opacity: 1;
}

/* Closing / retract state */
button[data-target].closing {
  transform: scale(1);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  opacity: 0.6;
}

/* Individual button placements */
#homeBtn { 
  position: fixed;
  top: 16.67%;
  transform: translateY(-20%);
  font-size: 180%;
  margin-left: 50px;
}

#musicBtn {
  position: fixed;
  top: 33.33%;
  transform: translateY(-40%);
  font-size: 160%;
  margin-left: 200px;
}

#projectsBtn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 100%;
  margin-left: 50px;
}

#aboutBtn {
  position: fixed;
  top: 66.66%;
  transform: translateY(-66.66%);
  font-size: 160%;
  margin-left: 200px;
}

#contactBtn {
  position: fixed;
  top: 83.33%;
  transform: translateY(-83.33%);
  font-size: 120%;
  margin-left: 50px;
}

/* -------------------------------------------------- */
/* CURSOR RIPPLE EFFECT                               */
/* -------------------------------------------------- */
#ripple-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.cursor-ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--ripple-color, rgba(255, 255, 255, 0.6));
  opacity: 0.81;
  animation: ripple 1s forwards;
  pointer-events: none;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) rotate(45deg) scale(var(--ripple-scale, 1.2));
    opacity: 0;
  }
}

/* -------------------------------------------------- */
/* FOOTER                                             */
/* -------------------------------------------------- */
footer {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1;
  font-family: "ACES04";
  width: auto;
}

#footerContainer {
  display:block;
}

footer img {
  display: block;
  height: auto;
}

.footer-content {
  position: absolute; 
  top: 0;
  right: 0;
  width: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  margin-top: 2em;
  margin-right: 0.5em;
}

.footer-title p {
  margin: 0;
  color: var(--fg);
  font-size: 24px;
}

footer .footer-title {
  white-space: nowrap;
  font-size: 16px;
  color: var(--fg);
}

#timeDisplay {
  display: flex;
  align-items: left;
  gap: 4px;
  letter-spacing: 3px;
}

#timeDisplay span {
  display: inline-block;
  min-width: 3.2em;
  text-align: right;
}

#timeDisplay .divider {
  min-width: auto;
  text-align: center;
  opacity: 0.5;
}

.footer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.footer-controls button {
  background: none;
  border: none;
}

audio#audioPlayer {
  display: none; 
}

.volume-control {
  display: flex;
  align-items: flex-end; 
  justify-content: center;
  gap: 6px;
  height: 45px;
  position: relative;
  top: -10px; 
}

#playPause { width: 2em; }
#playImg { display: none; }

/* Bars */
.bar {
  width: 19.5px;
  background-color: #676452;
  transition: background-color 0.2s, height 0.2s;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.bar.active::after {
  height: calc(100% - 20px);
}

.bar.muted::after {
  background-color: #676452;
  height: calc(100% - 20px);
}

.label {
  position: relative;
  bottom: -25px;
  color: #31302A;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  margin-top: 4px;
  user-select: none;
}

/* ========================== */
/* Media Buttons Animation */
/* ========================== */
#playPause, #nextBtn, #previousBtn {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Hover effect */
#playPause:hover, #nextBtn:hover, #previousBtn:hover {
  transform: scale(1.15);
  opacity: 1;
}

/* Click / active feedback */
#playPause:active, #nextBtn:active, #previousBtn:active {
  transform: scale(0.9);
  opacity: 0.7;
}

/* Optional: initial slightly transparent */
#playPause, #nextBtn, #previousBtn {
  opacity: 0.9;
}

#nextBtn, #previousBtn {
  width: auto;
  height: auto;
}

/* Example: make them grow upward visually */
.bar:nth-child(1) { height: 5px; }
.bar:nth-child(2) { height: 10px; }
.bar:nth-child(3) { height: 15px; }
.bar:nth-child(4) { height: 20px; }
.bar:nth-child(5) { height: 25px; }
.bar:nth-child(6) { height: 30px; }
.bar:nth-child(7) { height: 35px; }
.bar:nth-child(8) { height: 40px; }

.bar.active {
  background-color: #31302A;
}

/* Scrolling Text */
footer .scroll-container {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  max-width: 200px;
  margin-left: 8px;
  white-space: nowrap;
}

footer .scrolling-text {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}

footer .scrolling-text::after {
  content: attr(data-text);
  display: inline-block;
  white-space: nowrap;
}

footer .scroll-container:hover .scrolling-text {
  animation-play-state: paused !important;
}

@keyframes scroll-loop {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.copyright {
  color:rgba(188, 185, 167, 0.85);
  font-size:0.5em;
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: monospace;
  margin-left: 2vh;
}

/* -------------------------------------------------- */
/* Background Wrapper & Image                         */
/* -------------------------------------------------- */

#visualizer-wrapper {
  position: fixed;
  top: 0;
  right: 0;      /* right edge */
  width: 50vh;  /* rotated canvas width = screen height */
  height: 66vw; /* rotated canvas height = screen width */
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.5;
}

#visualizer {
  width: 100%;
  height: 84%;
  background: transparent;
  display: block;
}