:root {
  --aspectratio: 16 / 9;
  --invaspectratio: 9 / 16;
  --minfontsize: 12px;
  --tinyfontsize: var(--fontsize);
  --smallfontsize: var(--fontsize);
  --mediumfontsize: var(--fontsize);
  --largefontsize: var(--fontsize);
  --creditsfontfactor: 0.78;
/*  --width: 1280px;*/
/*  --height: 720px;*/
  --width: 100dvw;
  --height: 100dvh;
}

html, body, * {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
/*  background-color: teal;*/
  
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body.layout {
  background-color: teal;
}
body.black {
  background-color: #333;
}
body.pink {
  background-color: #ff0066;
}

#main-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  
/*  width: 100vw;*/
  width: var(--width);
  font-size: calc(15/16 * 1dvw); /* 12px / 1280px * 100vw = 0.9375vw */
  height: auto;
  aspect-ratio: 16/9;
  font-family: "Liberation Sans", "Arial", sans-serif;
  background-color: white;
  overflow: hidden;
}

@media (min-aspect-ratio: 16/9) {
  #main-content {
    width: auto;
/*    height: 100vh;*/
    height: var(--height);
    font-size: calc(15/16 * 16/9 * 1dvh);
  }
}

#intro {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 6;
/*  background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1) );*/
}

#myviz {
  transform-origin: left;
}

#info {
  position: absolute;
  bottom: 1%;
  left: 1%;
  height: 14%;
  width: 98%;
  transition: bottom 1s, height 1s;
}
#info.layout {
  background-color: #ff000020;
}
#info.left {
  bottom: -21%;
  height: 33%;
}

.main-col {
  position: absolute;
  height: 98%;
  bottom: 1%;
}
.main-col.layout {
  background-color: #ff000020;
}

/*.hline {*/
/*  position: absolute;*/
/*  border-top: .1px solid #000;*/
/*}*/

/*#line0 {*/
/*  width: 30%;*/
/*  left: 10%;*/
/*}*/

/*#line12 {*/
/*  width: 37.8%;*/
/*  left: 12.6%;*/
/*}*/

.text-box {
  transition: width 1s, right 1s;
}
.resizable-text.smooth {
  transition: font-size 1s;
}
.text-box.left {
  font-size: calc(1em / 0.82);
}

#box0 {
  width: 42%;
  padding-right: 0.5%;
/*  overflow-y: scroll;*/
  align-content: end;
  text-align: justify;
  
  line-height: 1.2em;
}
#box0.small {
/*  font-size: var(--smallfontsize);*/
/*  text-align: justify;*/
}
#box0.medium {
/*  font-size: var(--mediumfontsize);*/
/*  text-align: left;*/
}
#box0.large {
/*  font-size: var(--largefontsize);*/
/*  text-align: left;*/
}
#box0.left {
  width: 37%;
  font-size: calc(1em / 0.82);
}
#box0.left.small {
/*  font-size: calc(var(--smallfontsize) * 1 / 0.82);*/
}
#box0.left.medium {
/*  font-size: calc(var(--mediumfontsize) * 1 / 0.82);*/
}
#box0.left.large {
/*  font-size: calc(var(--largefontsize) * 1 / 0.82);*/
}


#box12 {
  position: absolute;
/*  right: 16%;*/
  right: 12%; /* crop */
  width: 42%;
  padding-right: 0.5%;
  text-align: right;
  transition: right 1s, width 1s;
/*  overflow-y: scroll;*/
  align-content: end;
}
#box12.left {
/*  right: 36%;*/
  right: 27%; /* crop */
  width: 35%;
}

#box1 {
  font-size: calc(1em * 2);
  line-height: 1em;
/*  transition: font-size 1s;*/
/*  text-decoration: overline;*/
}
#box1.small {
/*  font-size: calc(var(--smallfontsize) * 2);*/
}
#box1.medium {
/*  font-size: calc(var(--mediumfontsize) * 2);*/
}
#box1.large {
/*  font-size: calc(var(--largefontsize) * 2);*/
}
#box1.left {
  font-size: calc(1em * 2 / 0.82);
}
#box1.left.small {
/*  font-size: calc(var(--smallfontsize) * 2 / 0.82);*/
}
#box1.left.medium {
/*  font-size: calc(var(--mediumfontsize) * 2 / 0.82);*/
}
#box1.left.large {
/*  font-size: calc(var(--largefontsize) * 2 / 0.82);*/
}

#box2 {
  padding-top: 1%;
  white-space: pre-line;
/*  transition: font-size 1s;*/
}
#box2.small {
/*  font-size: var(--smallfontsize);*/
}
#box2.medium {
/*  font-size: var(--mediumfontsize);*/
}
#box2.large {
/*  font-size: var(--largefontsize);*/
}
#box2.left {
  font-size: calc(1em / 0.82);
}
#box2.left.small {
/*  font-size: calc(var(--smallfontsize) * 1 / 0.82);*/
}
#box2.left.medium {
/*  font-size: calc(var(--mediumfontsize) * 1 / 0.82);*/
}
#box2.left.large {
/*  font-size: calc(var(--largefontsize) * 1 / 0.82);*/
}

#box3 {
  position: absolute;
/*  width: 16%;*/
  width: 12%; /* crop */
/*  right: 0%;*/
  right: 0%; /* crop */
  transition: width 1s;
}
#box3.left {
/*  width: 36%;*/
  width: 27%; /* crop */
}

#legend {
  position: absolute;
  top: 86%;
  left: -1.5%;
  width: 15%;
  height: 2%;
  z-index: 11;
  transition: width 1s, height 1s, left 1s, top 1s;
}
#legend.left {
  height: calc(2% / 0.82);
  width: calc(15% / 0.82);
  top: 100%;
  left: -2%;
  font-size: calc(1em / 0.82);
}
/*#box12.left .legend-text {*/
/*  top: -65%;*/
/*}*/

.legend-row {
  position: absolute;
  width: 50%;
  height: 100%;
}

#legend-row-2 {
  left: 50%;
}

.legend-color {
  position: absolute;
  width: 20%;
  height: 20%;
  border-radius: 4px;
  top: 30%;
}

.legend-text {
  position: absolute;
  top: -25%;
  right: 0%;
  width: 75%;
  height: 100%;
/*  line-height: 1.3em;*/
}

#legend-text-1 {
  left: 60%;
}

#legend-color-1 {
  background-color: #ff0066;
  left: 35%;
}
#legend-color-2 {
  background-color: #333;
}

.piece-img {
  position: absolute;
  max-width: 100%;
/*  max-height: 100%;*/
  height: 100%; /* crop */
  visibility: hidden;
  
  object-fit: cover; /* crop */
  object-position: center; /* crop */
  
  border-top-left-radius: 100px 2px;
  border-top-right-radius: 2px 100px;
  border-bottom-right-radius: 100px 2px;
  border-bottom-left-radius: 2px 100px;
  border:solid 2px #41403E;
}
.piece-img.visible {
  visibility: visible;
}

.draggable {
  z-index: 10;
}

#interface {
  position: absolute;
  height: 100%;
  width: 100%;
}

#interface-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  transform-origin: top right;
  transition: left 1s, scale 1s;
}
#interface-content.left {
  scale: 0.82;
}

#menu-icon {
  position: absolute;
  top: 0.5%;
  left: calc(var(--invaspectratio) * 0.5%);
  width: 2%;
/*  height: calc(var(--aspectratio) * 2%);*/
  aspect-ratio: 1;
  background-image: url('icon/dots-three-circle2.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.5s;
  z-index: 4;
}
#menu-icon:hover {
  opacity: 1;
}

#side-panel {
  position: absolute;
  left: -16%;
  width: 16%;
  height: 100%;
  opacity: 0;
  transition: left 1s, opacity 1s;
}
#side-panel.visible {
  left: 1%;
  opacity: 1;
}
#side-panel.layout {
  background-color: #ff000080;
}

#video {
  position: absolute;
  top: 6%;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  z-index: 4;
  
  background-color: #ccc;
}

#yt-video {
  position: absolute;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  pointer-events: none;
  z-index: -1;
}

/*.video-link {*/
/*  position: absolute;*/
/*  background: #ff000000;*/
/*  z-index: 5;*/
/*}*/

#video-link {
  position: absolute;
  top: -1%;
  left: -1%;
  width: 102%;
  height: 102%;
  background: #ff000000;
}

#credits {
  position: absolute;
  bottom: 1%;
  text-align: left;
  padding: 0;
/*  overflow-y: scroll;*/
  max-height: calc(36% * 0.82);
  text-align: justify;
  font-size: calc(1em * var(--creditsfontfactor));
  
  color: #606060;
  line-height: 1.2em;
}
#credits.small {
/*  font-size: calc(var(--smallfontsize) * var(--creditsfontfactor));*/
/*  text-align: justify;*/
}
#credits.medium {
/*  font-size: calc(var(--mediumfontsize) * var(--creditsfontfactor));*/
/*  text-align: justify;*/
}
#credits.large {
/*  font-size: calc(var(--largefontsize) * var(--creditsfontfactor));*/
/*  text-align: left;*/
}

#play-pause-container {
  position: absolute;
  top: 0.8%;
  left: calc(var(--invaspectratio) * 4.1%);
  width: 1.65%;
/*  height: calc(var(--aspectratio) * 1.65%);*/
  aspect-ratio: 1;
/*  scale: 1;*/
/*  transition: top 1s linear, left 1s linear, scale 1s linear;*/
/*  transform: scale(1);*/
/*  transition: top 1s linear, left 1s linear, transform 1s linear;*/
  transition: top 1s linear, left 1s linear, width 1s linear, height 1s linear, transform 1s linear;
  z-index: 6;
}
#play-pause-container.welcome {
/*  scale: 5;*/
/*  transform: scale(5);*/
/*  width: 1.65%;*/
/*  height: calc(var(--aspectratio) * 1.65%);*/
  width: calc(8.25%);
/*  height: calc(var(--aspectratio) * 8.25%);*/
  transform: translate(-40%, -40%);
  
  left: 5%;
  top: 50%;
}
#play-pause-container.intro {
/*  scale: 5;*/
/*  transform: scale(5);*/
  width: calc(8.25%);
/*  height: calc(var(--aspectratio) * 8.25%);*/
  transform: translate(-40%, -40%);
  
/*  left: 50%;*/
/*  top: 50%;*/
  left: 49.2%;
  top: 48.5%;
}

#play-pause-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('icon/play-pause-circle.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  transition: opacity 0.5s;
  z-index: 4;
  opacity: 0.3;
  border-radius: 50%;
  background-color: white;
}
#play-pause-icon:hover {
  opacity: 1;
}
#play-pause-container.welcome #play-pause-icon {
  opacity: 0.5;
}
#play-pause-container.intro #play-pause-icon {
  opacity: 1;
}

.scrollable {
  scrollbar-width: thin;
  scrollbar-color: #808080 #ffffff00;
}

.scrollable::-webkit-scrollbar {
    background-color: #ffffff00;
    width: 0.2em;
}
.scrollable::-webkit-scrollbar-thumb {
    background-color: #808080;
    height: 1em;
}

.resizable-text.small {
/*  font-size: var(--smallfontsize);*/
}
.resizable-text.medium {
/*  font-size: var(--mediumfontsize);*/
}
.resizable-text.large {
/*  font-size: var(--largefontsize);*/
}

/* Welcome */
#interface {
  position: absolute;
  height: 100%;
  width: 100%;
  transform-origin: 50% 50%;
  transition: scale 1s linear, filter 0.5s linear, opacity 0.5s linear;
}
#interface.welcome {
  scale: 0.8;
}
#interface.intro {
  opacity: 0.5;
}

#mysvg.welcome {
  cursor: none;
  pointer-events: none;
}

.band {
  position: absolute;
  width: 100%;
  height: 0%;
  background-color: black;
  transition: height 1s linear;
  z-index: 20;
}
#top-band {
  top: 0;
}
#bottom-band {
  bottom: 0;
}
.band.welcome {
  height: 10%;
}
/*#play-pause-icon.welcome {*/
/*  bottom: 11%;*/
/*}*/
#side-panel.welcome {
  opacity: 0;
  cursor: none;
  pointer-events: none;
}
#side-panel.welcome.visible {
  opacity: 1;
}
#menu-icon.welcome {
  cursor: none;
  pointer-events: none;
}

#fake-cursor {
  position: absolute;
  width: 1dvw;
/*  height: calc(22/15 * 1vw);*/
/*  top: 75%;*/
/*  left: 30%;*/
  bottom: 1%;
  left: 3%;
  opacity: 0;
  z-index: 10;
  transition: opacity 1s;
  
  
/*  opacity: 1;*/
/*  z-index: 100;*/
}

@media (min-aspect-ratio: 16/9) {
  #fake-cursor {
    width: calc(16/9 * 1dvh);
/*    height: calc(16/9 * 22/15 * 1vh);*/
  }
}

#fake-cursor.visible {
  opacity: 1;
}

#custom-tooltip {
  position: absolute;
  background: #000000cc;
  color: white;
  padding: 0.5% 1%;
  border-radius: 5px;
  white-space: nowrap;
/*  display: none; /* Hidden by default */
  visibility: hidden;
  font-size: 0.7em;
  z-index: 10;
}

#date-range.highlighted {
  font-weight: bold;
  background-color: orange;
}

#info, #box3, img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-drag: none;
  user-select: none;
/*  pointer-events: none;*/
}