:root {
  --main-dark-theme: #212529;
  /* --alt-dark-theme: #2f353a; */
  --alt-dark-theme: #2f353a;
}

body {
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  overflow: hidden;
  height: 100vh;
  /* background-color: var(--alt-dark-theme); */
  background-image: url("../bedroom.avif");
}

#player-container {
  margin-left: 15%;
  max-width: 100vw;
  background: transparent !important;
}

.spine-player-canvas {
  margin-top: 7%;
  /* margin-left: 15%; */
  height: 95%;
  margin: 0 auto;
}

.spine-player-controls {
  position: fixed;
  bottom: 0;
}

#visualiserMain {
  /* background-color: #2f353a; */
  border-bottom-right-radius: 10px;
  /* border-left: 2px white dashed; */
  border-top-right-radius: 10px;
  margin-left: 20px;
  padding-top: 10px;
  position: fixed;
  overflow: auto;
  height: 76vh;
  bottom: 7vh;
  /* width:200px;
    z-index: 1; */
  left: 0;
}

.charListBox {
  display: none;
}

.charDiv {
  font-family: Arial, Helvetica, sans-serif;
  border: var(--main-dark-theme) 2px solid;
  border: gold 2px solid;
  margin: 0 5px 10px 5px;
  list-style-type: none;
  border-radius: 10px;
  user-select: none;
  transition: 0.5s;
  color: white;
  padding: 10px;
}

.charDiv:hover {
  background-color: var(--alt-dark-theme);
  transition: 0.5s;
  cursor: pointer;
}

#premutipliedToggle {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--main-dark-theme);
  color: white;
  padding: 10px;
  position: absolute;
  width: 180px;
  margin-left: 10px;
  top: 10vh;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left: 2px white dashed;
}