:root {
    /* CSS variable for body's width */
    --width-menu: 280px;
}

body{
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.button{
    background-color : rgb(64, 117, 177);
    border: 2px solid rgb(4, 4, 34);
    color: whitesmoke;
    border-radius: 5px;
    font-family: 'Padauk', sans-serif;
}

.form-check{
    padding-left: 30px;
    padding-right: 20px;
    min-width: 220px;
    width:fit-content;
    background-color: hsl(129, 5%, 90%);
    margin-bottom: 0;
}

.form-check2{
    padding-left: 0px;
    padding-right: 20px;
    min-width: 220px;
    width:fit-content;
    margin-bottom: 0;
    background-color: hsl(129, 5%, 90%);
}

.akkordtype{
    padding-left: 0px;
}

.form-check3{
    min-width: 220px;
    width:fit-content;
    margin-bottom: 0;
}

#hjaelpelinjer{
    padding-left: 0px;
    margin-left: 0px;
    width: 40px;
    height: 23px;
}

#sidebar{
    width: var(--width-menu); 
    height: 100vh;
}

#settings{
   /*visibility: hidden;*/
    height:80vh;
    max-height: 400px;
    width: 50vw;
    max-width:800px;
    background-color: #212529;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 15;
}

#settings div{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#klaverknap{
    line-height: 30px;
    height: 30px;
    position: absolute;
    cursor: pointer;
    right: 5px;
    bottom: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: 0px;
    z-index: 20;
}

#score{
    position: absolute;
    line-height: 30px;
    height: 30px;
    right: 5px;
    top : 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top: 0px;
    z-index:1;
}

#laerTangenterneContent{
    font-size: 5em;
    text-align: center;
    transition: background-color .4s;
    
}

#laerAkkorderContent{
    font-size: 5em;
    text-align: center;
    transition: background-color .4s;
    
}

#osmdCanvas{
    text-align: center;
    margin: auto;    
}

@keyframes true {
    0% {
        background: #51c451; 
    }
    100% {
        background: none;
    }
}

.true {
    animation: true 1s;
}

@keyframes false {
    0% {
        background: #a5463a; 
    }
    100% {
        background: none;
    }
}

.false {
    animation: false 1s;
}

#klaver{
    border: 2px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: calc(100vw - var(--width-menu));
    height: 10vw;
    min-height: 100px;
    position: absolute;
    bottom: 0px;
    right:0px;
    display:block;
}

.whiteKey{
    position: absolute;
    top:0px;
    border: 1px solid black; 
    background-color: white; 
    z-index: 0;
    opacity:1;
}

.whiteKey:hover {
    background-color: beige; 
}

.whiteKey:active {
    background-color:  rgb(205, 205, 180); 
}

#n60{
    background-color: rgb(141, 140, 140);
}

#n60:hover {
    background-color:rgb(115, 115, 115); 
}

#n60:active {
    background-color:  rgb(90, 90, 90); 
}

.blackKey{
    position: absolute;
    top:0px;
    border: 1px solid black;
    background-color: black; 
    z-index: 1;
}

.blackKey:hover {
    background-color: rgb(34, 34, 34); 
}

.blackKey:active {
    background-color: rgb(102, 102, 102); 
}

#content{
    position: absolute;
    width: calc(100vw - var(--width-menu));
    height:100vh;
    overflow: hidden;
    right:0px;
    top: 0px;
}

#melodiMenu{
    position: sticky;
    top: 0;
    z-index:1;
    background-color:rgb(64, 117, 177, 0.4) ;
}