html {
    height: 100%;
}
  
:root {
    --key-width: 8vw;
    --key-height: calc(20vh + 8vw);
    --black-normal-color: linear-gradient(#000000, #303030);
    --white-normal-color: #FFF;
    --black-first-note: linear-gradient(#000000, #04bd3b);
    --white-first-note: linear-gradient(#ffffff, #04bd3b);
}
body {
    padding: 0;
    height: 90%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction:column;
    background-image: linear-gradient(#403075, #882D61);
}
  
.piano-white {
    display: flex;
    position: relative;
    overflow: hidden;
}

.piano-black {
    display: inline-block;
    position: absolute;
    transform: translateX(calc(var(--key-width)/1.3333));
}
  
.white-key {
    width: var(--key-width);
    height: var(--key-height);
    background-image: var(--white-normal-color);
    border: 1px solid black;
    border-radius: 0 0 6px 6px;
    margin: 0px;
    outline: none
}
  
.white-key:active {
    background-image: linear-gradient(#ffffff, #d40c0c);
}
  
.black-key {
    width: calc(var(--key-width)/1.95);
    height: calc(var(--key-height)/1.7);
    background-image: var(--black-normal-color);
    border: 1px solid black;
    border-radius: 0 0 6px 6px;
    outline: none;
    z-index: 2;
}
  
.action {
    font-size: 4vw;
    background-color: hsl(180, 100%, 50%);
    border-radius: 30px;
    padding: 20px;
    border: 7.5px solid black;
}

.yläbuttonit{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 20px;
    width: calc(var(--key-width)*10);
}

#slideri {
    display: flex;
    justify-content:flex-end;
    align-items: center;
    flex-direction: column;
}

p{
    font-size: 4vw;
    color: hsl(180, 100%, 50%);
    font-family: Verdana, Geneva, Tahoma, sans-serif;

}

#huomio-teksti {
    margin: 0;
}


.action:active {
    background-color: hsl(180, 100%, 30%);
}

.black-key:active {
    background-image: linear-gradient(#000000, #d40c0c);
}

.turha-key {
    visibility: hidden;
}

.Eb4-key {
    position: absolute;
    left: var(--key-width);
}
.Gb4-key {
    position: absolute;
    left: calc(var(--key-width)*3);
}
.Ab4-key {
    position: absolute;
    left: calc(var(--key-width)*4);
}
.Bb4-key {
    position: absolute;
    left: calc(var(--key-width)*5);
}
.Db5-key {
    position: absolute;
    left: calc(var(--key-width)*7);
}
.Eb5-key {
    position: absolute;
    left: calc(var(--key-width)*8);
}