html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}
body { font-size: 24px; }
h1.projectTitle { margin: 0; font-weight: inherit; }
#video-info h3 { text-align: center; }

.bgImage {
  background-image: url("/css/zee-small.jpg");
  background-color: #cccccc;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.divPlacement { position: absolute; padding-top: 0; top: 40px; }
.divSize { height: auto; width: 100vw; }
.black { border: solid 2px black; }
.green { border: solid 2px green; }
.red { border: solid 2px red; }
.orange { border: solid 2px orange; }
button { font-size: 18px; display: block; }

.divMenu {
  position: relative;
  margin: auto;
  z-index: 100;
  font-size: 24px;
  text-align: center;
  background: azure;
}
.menu_wrap { width: 50px; margin: auto; }
.menu_icon { width: 40px; height: 6px; background: black; margin: 6px 0; }
#menu_enter:hover .menu_icon { background: #8DFF62 !important; }
.fixed { position: fixed; top: 30px; height: 100%; }
.absolute { position: absolute; height: calc(100% - 30px); overflow-y: auto; }
.projectsMenu { z-index: 100; padding-left: 10px; font-size: 24px; }

#canvas-container { margin: auto; padding: 0; height: 92px; width: 350px; }
#playhead-canvas { height: 100px; width: 100%; position: relative; }

#page2 .sound-media {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
  gap: 24px;
  align-items: start;
}
#page2 .sound-audio,
#page2 .sound-clips { min-width: 0; }
#page2 .sound-audio iframe { display: block; width: 100%; border: 0; }
#sound-art-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
#page2 .sound-clip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}
#page2 .sound-clip-list button {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#page2 .sound-clip-list button[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}
#menu a.menuButton[href="#soundart"] { text-decoration: none; }
@media (max-width: 700px) {
  #page2 .sound-media { grid-template-columns: minmax(0, 1fr); }
}

#audio-container { margin: auto; position: relative; width: 100%; height: 40px; }
#audioplayer {
  position: relative;
  max-width: 100%;
  background-color: rgba(0,0,0,0.5);
  background-size: 100vw;
  height: 100vh;
  margin: auto;
}
.playlist_color { color: white; }
audio { top: 0; width: 100%; }
#audioplaylist {
  position: relative;
  max-width: 100%;
  margin: auto;
  width: 350px;
  font-size: 1.2em;
  padding: 10px;
}
#audio-background {
  border: 4px black solid;
  border-radius: 10px;
  width: 350px;
  max-width: 100%;
  margin: auto;
}

.videoPlaylist {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 100%;
  font-size: 1.2em;
  padding: 10px;
}
#videoplaylist button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
#videoplaylist button.activeVideo,
#videoplaylist button:hover {
  color: #595958;
  background-color: #8DFF62;
}
#videoplaylist button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
/* Keep descriptions available to JavaScript, but hide playlist tooltips. */
#videoplaylist .tooltiptext { display: none; }
#video-info {
  margin: 14px 0 24px;
  padding: 0 12px;
}
#video-info-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
}
#video-info-description {
  margin: 0;
  padding: 0;
  max-width: 65ch;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: left;
  hyphens: none;
}
#video-info-description:empty { display: none; }
#videoplayer {
  width: 375px;
  border: 2px solid black;
  border-radius: 10px;
  position: relative;
  max-width: 90vw;
  margin: auto;
}
video.video {
  display: block;
  margin: auto;
  max-width: 100%;
  height: 300px;
}
.video-title { text-align: center; }
#perfvideo { display: block; margin: auto; max-width: 100%; }

.tooltip { position: relative; display: block; }
.tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  color: white;
  background-color: rgba(0,0,0,0.8);
  text-align: center;
  border-radius: 6px;
  position: absolute;
  top: 0;
  padding-left: 10px;
  z-index: 1;
}
.tooltip:hover .tooltiptext { visibility: visible; }
.active, .activeVideo, .videoFile:hover,
.activeAudio, .audioFile:hover, .menuButton:hover {
  color: #595958;
  background-color: #8DFF62 !important;
}

.projectTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.7em;
  font-weight: bold;
  text-align: center;
  color: #8DFF62;
  background-color: black;
  padding: 20px;
  font-family: "Comic Sans MS", cursive, sans-serif;
}
.projectTitle h1 { margin: 0 0 10px 0; font: inherit; }
.projectTitle img {
  display: block;
  max-width: 100%;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
}
.projectType { font-size: 1em; font-weight: bold; padding: 8px 10vw; text-align: left; }
.projectLength { font-size: 1em; font-weight: bold; padding: 8px 10vw; }
.projectSubtitle { font-size: 1em; padding: 8px 10vw; text-align: left; }
.projectContent { text-align: justify; hyphens: auto; padding: 8px 0; }
.projectContent p { padding: 0 10vw; }
.line {
  background-color: rgba(141, 255, 98, 0.3);
  border-top: 6px dotted rgba(141, 255, 98, 1);
  height: 6px;
  width: auto;
  position: relative;
  z-index: -1;
  margin: 0 10vw;
}
.projectHeight { height: auto; min-height: 100vh; }
.showHide { height: auto; min-height: 100vh; width: 100vw; }
.project { display: inline-block; padding: 0 8px 0 0; background-color: orange; }
.hide { display: none; }
.show { display: block; }
.page {
  -webkit-transition: height .3s ease;
  height: auto;
  overflow: auto;
  width: 100vw;
  min-height: 100vh;
  padding: 8px 12px 8px 0;
}
.hv100 { min-height: 100vh; }
.projectsGrid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 10px; }
.projectsFlex { display: flex; justify-content: center; gap: 10px; }
.pictureMenu { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
#archiveContent { overflow: auto; height: auto; }
.menuTitle {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  color: #8DFF62;
  background-color: darkgray;
  font-family: "Arial";
}
.menuTitle p { position: relative; z-index: 1; }
.pointer { cursor: pointer; }

/* Backgrounds: standard gradients preserve the existing colours. */
.gray1 {
  background: rgb(125,126,125);
  background: linear-gradient(to right, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
}
.gray2 {
  background: linear-gradient(to right, rgba(149,149,149,1) 0%, rgba(90,90,90,0.48) 20%, rgba(13,13,13,0.65) 46%, rgba(1,1,1,0.68) 50%, rgba(10,10,10,0.7) 53%, rgba(78,78,78,0.85) 76%, rgba(56,56,56,0.92) 87%, rgba(27,27,27,1) 100%);
}
.gray3 {
  background: rgb(125,126,125);
  background: radial-gradient(ellipse at center, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
}
.sky1 {
  background: linear-gradient(to right, rgba(201,149,136,1) 0%, rgba(221,208,169,0.48) 24%, rgba(226,223,177,0.41) 30%, rgba(224,234,207,0.25) 44%, rgba(223,239,220,0.24) 50%, rgba(154,203,206,0.24) 53%, rgba(78,78,78,0.21) 76%, rgba(56,56,56,0.2) 87%, rgba(174,164,167,0.19) 95%, rgba(247,232,236,0.48) 100%);
}
.sky2 {
  background: linear-gradient(to bottom, rgba(247,232,236,0.55) 0%, rgba(226,223,177,0.51) 14%, rgba(161,221,209,0.48) 24%, rgba(148,221,215,0.48) 26%, rgba(195,229,158,0.5) 40%, rgba(217,164,139,0.5) 44%, rgba(239,98,119,0.3) 48%, rgba(134,201,154,0.34) 53%, rgba(247,232,236,0.42) 63%, rgba(134,201,154,0.45) 67%, rgba(134,201,154,0.47) 70%, rgba(154,203,206,0.53) 78%, rgba(154,203,206,0.56) 82%, rgba(206,219,223,0.6) 87%, rgba(247,232,236,0.6) 91%);
}
.white1 {
  background: linear-gradient(to right, rgba(255,255,255,0.65) 0%, rgba(251,129,113,0) 10%, rgba(247,28,0,0.06) 18%, rgba(138,247,142,0.11) 24%, rgba(147,248,151,0.12) 26%, rgba(255,255,255,0.24) 49%, rgba(255,255,255,0.24) 50%, rgba(255,255,255,0.3) 67%, rgba(255,255,255,0.28) 71%, rgba(249,176,119,0.13) 100%);
}

.projectcontainer {
  display: grid;
  gap: 16px;
  padding: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: start;
}
.projectitem {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow: hidden;
}
a.projectitem,
a.projectitem:visited,
a.projectitem:hover,
a.projectitem:active { text-decoration: none; color: inherit; }
.projectimage {
  width: 100%;
  max-height: 70%;
  object-fit: cover;
  height: calc(300px - 60px);
}
.projecttext {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 60px;
  background-color: rgba(255,255,255,0.8);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

/* WaveSurfer */
#waveform { cursor: pointer; position: relative; }
#hover {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
  height: 100%;
  width: 0;
  mix-blend-mode: overlay;
  background: rgba(255,255,255,0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}
#waveform:hover #hover { opacity: 1; }
#time, #duration {
  position: absolute;
  z-index: 11;
  top: 50%;
  margin-top: -1px;
  transform: translateY(-50%);
  font-size: 11px;
  background: rgba(0,0,0,0.75);
  padding: 2px;
  color: #ddd;
}
#time { left: 0; }
#duration { right: 0; }