:root {
    color-scheme: dark light;
}

body{
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow: hidden; /* The sword will trigger the overflow. There's no other way :( */
}
textarea {
    flex: .5 1;
    height: 100%;
}
.head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.editorWrapper {
    position: relative;
    flex: .5 1;
    height: 100%;
}
#editor { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.banner{
    height: 100px;
}
#playStop {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;

    height: 100%;
    font-size: 300%;
    align-self: flex-end;
}
.canvasWrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 1 1;
    width: 50%;
    height: 100%;
}
canvas {
    width: 100%;
    height: 100%;
}
#sword {
    position: absolute;
    width: 10%;
    transform: rotate(-80deg);
    transition: transform .1s;
    transform-origin: 10% 50%;
    display: none;
}

#pianoContainer{
    overflow-y: hidden;
}
#content{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 80%;
}
.piano {
    display: flex;
    justify-content: space-between;
    flex-direction: column-reverse;
    margin: 0;
    height: 100%;
    width: 120px;
    overflow-y: scroll;
    overflow-x: hidden;
    direction:rtl;
}
.piano > * {
    direction:ltr; 
}
.key {
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    height: 40px;
    width: 100px;
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10px;
    user-select: none;
    justify-content: start;
    color: black;
}
.black-key {
    background: linear-gradient(to right, #444 60%, #FFF 75%, #000 76%, #FFF 77%);
    /* background: linear-gradient(to right, #333 75%, #FFF 90%); */
    color: white;
    width: 100px;
    height: 40px;
    z-index: 1;
}
.key.active {
    background: #ddd;
}
.black-key.active {
    background: linear-gradient(to right, #000 60%, #FFF 75%, #000 76%, #FFF 77%);
}
#controls {
    padding: 20px;
    font-family: sans-serif;
}
select, input {
    margin: 0 10px;
}
#midiStatus {
    color: #BBB;
    margin-top: 10px;
    font-style: italic;
}

details {
    display: inline;
}
details summary::marker {
    content: '>'; /* Down-pointing */
    font-weight: bold;
}
details[open] summary::marker {
    content: '\25BC'; /* Down-pointing triangle */
}
details[open] summary::before {
    content: ''; /* Down-pointing */
    font-weight: bold;
}
summary {
    user-select: none;
    pointer-events: all;
    cursor: pointer;
}