:root {
    --main-dark-theme: #212529;
    --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);
}

#player-container {
    margin-left: 15vw;
    max-width: 100vw;
     
}

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

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

#visualiserMain {
    background-color: var(--main-dark-theme);
    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;
}

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