:root {
  --aspectratio: 16 / 9;
  --invaspectratio: 9 / 16;
  --fontsizefactor: 15 / 16; /* To make 12px = 9pt on a 1280px width screen */
                            /* The rule of three is: 1280px is 100vw, then 12px is X; X = 15/16vw*/
  --creditsfontfactor: 0.75;
  --tooltipfontfactor: 1.5;
  --width: 1280px;
  --height: 720px;
  --width2: calc(var(--height) * var(--aspectratio));
  --height2: calc(var(--width) * var(--invaspectratio));
}

html, body, * {
  cursor: default !important;
}

body {
  background-color: teal;
  margin: 0
}
body.dark {
  color: #ccc;
}

.icon.dark {
  filter: invert(1);
}

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

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

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

#interface-content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  transition: left 1s, width 1s;
}
#interface-content.left {
  left: 16%;
  width: 84%;
}

#tooltip {
  position: absolute;
  visibility: hidden;
  background-color: #ffffff80;
  color: #333;
  text-align: center;
  border-radius: 4px;
  padding: 0px 4px;
  z-index: 10;
}
#tooltip.trans {
  transition: opacity 1s;
}
#tooltip.hidden {
  opacity: 0;
}

#years {
/*  position: absolute;*/
/*  top: 94%;*/
/*  left: 5%;*/
/*  width: 90%;*/
/*  height: 5%;*/
/*  background-color: red;*/
/*  opacity: 0.2;*/
/*  z-index: 0;*/
}

a {
  position: relative;
  z-index: 10;
}

#description {
  position: absolute;
  width: 92%;
  top: 0%;
  left: 0%;
  transition: left 1s, opacity 1s, margin 2s;
  margin: -4% 1% 0.5% 7%;
  z-index: 1;
  opacity: 0;
}
#description.visible {
  opacity: 1;
  margin-top: 0.5%;
  transition: left 1s, opacity 2s, margin 1s;
}
#description.left {
  width: 98%;
  margin: 0.5% 1% 0.5% 1%;
}

#menu-icon {
  position: absolute;
  top: 1%;
  left: calc(var(--invaspectratio) * 1%);
  width: 2%;
  height: calc(var(--aspectratio) * 2%);
  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;
}
#menu-icon.inactive:hover {
  opacity: 0.3;
}


#side-panel-2 {
  position: absolute;
  left: -15%;
  width: 13%;
  height: 80%;
  opacity: 0;
  transition: left 1s, opacity 1s;
  
  padding: 5% 1%;
/*  background-color: #ffffff80; No effect because the main content is moved to the left, so there's nothing behind'*/
}
#side-panel-2.visible {
  left: 0.5%;
  opacity: 1;
}

#side-panel {
  position: absolute;
  left: -15%;
  width: 15%;
  height: 100%;
  opacity: 0;
  transition: left 1s, opacity 1s;
}
#side-panel.visible {
  left: 0.5%;
  opacity: 1;
}

#dashboard {
  position: absolute;
  top: 23%;
  width: 100%;
  height: 5%;
  z-index: 0;
}
#dashboard.active {
  z-index: 20;
}
#dashboard.forced-active {
  z-index: 20;
}

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

#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 {*/
/*  top: -1%;*/
/*  left: -1%;*/
/*  width: 102%;*/
/*  height: 102%;*/
/*  z-index: -10;*/
/*}*/


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

#video-link-1 {
  top: -1%;
  left: -1%;
  width: 102%;
  height: 32%;
  z-index: 5;
}

#video-link-2 {
  top: calc(32% + 38%);
  left: -1%;
  width: 102%;
  height: 32%;
  z-index: 5;
}

#video-link-3 {
  top: -1%;
  left: -1%;
  width: 36%;
  height: 102%;
  z-index: 5;
}

#video-link-4 {
  top: -1%;
  left: calc(36% + 30%);
  width: 36%;
  height: 102%;
  z-index: 5;
}

#credits {
  position: absolute;
  bottom: 0%;
  padding: 2%;
  overflow-y: scroll;
  max-height: 36%;
  text-align: justify;
  font-size: calc(1em * var(--creditsfontfactor));
  
  color: #606060;
  line-height: 1.1em;
}

#play-pause-container {
  position: absolute;
  top: 1.3%;
  left: calc(var(--invaspectratio) * 4.5%);
  width: 1.65%;
/*  height: calc(var(--aspectratio) * 1.65%);*/
  aspect-ratio: 1;
  scale: 1;
  transition: top 1s linear, left 1s linear, scale 1s linear;
  z-index: 6;
}
#play-pause-container.welcome {
  scale: 5;
  left: 5%;
  top: 50%;
}
#play-pause-container.intro {
  scale: 5;
  left: 50%;
  top: 50%;
/*  filter: blur(0)*/
}

#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;
}
#play-pause-icon.inactive:hover {
  opacity: 0.3;
}


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

.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%;
}

#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: 1vw;
  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 * 1vh);
    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;
}

#reset-icon {
  position: absolute;
  top: 1.1%;
  left: calc(var(--invaspectratio) * 7.5%);
  width: 1.9%;
  height: calc(var(--aspectratio) * 1.9%);
  background-image: url('icon/reset-icon2.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;
}
#reset-icon:hover {
  opacity: 1;
}
#reset-icon.inactive:hover {
  opacity: 0.3;
}

#reverse-icon {
  position: absolute;
  top: 10.9%;
  left: 1.1%;
  width: 14px;
  height: 14px;
  background-image: url('icon/updown.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;
  visibility: hidden;
}
#reverse-icon.visible {
  visibility: visible;
}
#reverse-icon.visible:hover {
  opacity: 1;
}

/*.ytp-button {*/
/*  margin: 10px;*/
/*}*/

@media (1920px <= width) or (1080px <= height) {
  body {
/*    background-color: #ff0000;*/
  }
}

@media (1440px <= width < 1920px) or (810px <= height < 1080px) {
  body {
/*    background-color: #ff3333;*/
  }
}

@media (960px <= width < 1440px) or (540px <= height < 810px) {
  body {
/*    background-color: #ff6666;*/
  }
}

@media (480px <= width < 960px) or (270px <= height < 540px) {
  body {
/*    background-color: #ff9999;*/
  }
}

@media (width < 480px) or (height < 270px) {
  body {
/*    background-color: #ffcccc;*/
  }
  #description {
    visibility: hidden;
  }
  #menu-icon {
    visibility: hidden;
  }
  #play-pause-icon {
    visibility: hidden;
  }
}

@media (width < 240px) or (height < 135px) {
  body {
    background-color: #ffcccc;
  }
  #description {
    visibility: hidden;
  }
  #dashboard {
    visibility: hidden;
  }
  #legend {
    visibility: hidden;
  }
}

/* Globe */
#globe-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#globeViz {
  translate: calc((-1 * (var(--height2) * 4 - var(--width))) * 0.5) calc((-1 * (var(--height2) * 4 - var(--height2))) * 0.5);
  height: 100%;
  width: 100%;
  transition: transform 1s;
}
#globeViz *:focus {
  outline: none;
}
#globeViz.left {
  transform: translateX(-9.55%);
}
#globeViz.transition-translate-1 {
  transition: transform 1s, translate 0.9s;
}
#globeViz.transition-translate-2 {
  transition: transform 1s, translate 6s;
}
#globeViz.transition-translate-search {
  transition: transform 1s, translate 2s;
}
#globeViz.transition-translate-tour {
  transition: transform 1s, translate 6s;
}

@media (min-aspect-ratio: 16/9) {
  #globeViz {
    translate: calc((-1 * (var(--height) * 4 - var(--width2))) * 0.5) calc((-1 * (var(--height) * 4 - var(--height))) * 0.5);
  }
}

/*Tooltips*/
.scene-tooltip {
  position: absolute !important;
  top: 10% !important;
  left: 2% !important;
  transform: none !important;
  font-family: "Liberation Sans", "Arial", sans-serif !important;
  font-size: var(--fontsize);
  color: #333;
  border-radius: 5px 5px !important;
  padding: 0.5%;
  background-color: #ffffff80 !important;
  overflow-y: scroll;
  max-height: 80%;
  visibility: hidden !important;
}
.scene-tooltip .header {
  font-weight: bold !important;
}

.parent {
  display: none !important;
}
.parent.selected {
  display: flex !important;
  flex-direction: column !important;
}
.parent.selected.reversed {
  flex-direction: column-reverse !important;
}

.parent.selected div {
  display: flex !important;
  flex-direction: column !important;
}

.tooltip-opt {
  font-size: 0.8em;
}
.tooltip-opt:hover {
  text-decoration: underline;
}
.tooltip-opt.selected {
  font-weight: bold;
}

.date-beta {
  font-size: 0.9em;
  color: black;
  margin-top: 1.5%;
}
.venues-beta {
  font-size: 0.8em;
}
.repertory-beta {
  font-size: 0.7em;
  margin-left: 3%;
}

#my-tooltip {
  position: absolute !important;
  top: 10% !important;
  left: 2% !important;
  transform: none !important;
  font-family: "Liberation Sans", "Arial", sans-serif !important;
  font-size: var(--fontsize);
  color: #333;
  border-radius: 5px 5px !important;
  padding: 0.5%;
  background-color: #ffffff80 !important;
  overflow-y: auto;
  max-height: 80%;
  visibility: hidden !important;
}
#my-tooltip .header {
  font-weight: bold !important;
}
#my-tooltip.visible {
  visibility: visible !important;
}

#my-tooltip-2 {
  position: absolute !important;
  top: 1% !important;
  right: 1% !important;
  transform: none !important;
  font-family: "Liberation Sans", "Arial", sans-serif !important;
  font-size: var(--fontsize);
  color: #333;
  border-radius: 5px 5px !important;
  padding: 0.5%;
  background-color: #ffffff80 !important;
  overflow-y: auto;
  max-width: 30%;
  visibility: hidden !important;
  transition: opacity 3s;
  opacity: 0;
  font-size: 1.5em;
}
#my-tooltip-2.visible {
  visibility: visible !important;
  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;
}