:root {
    --bg: white;
    --conts: rgb(245, 245, 245);
    --text: black;
    --lbg: white;
    --bk: black;
}
a {
    text-decoration: none;
    color: var(--text);
}
body[data-theme="dark"] {
    --bg: #111;
    --conts: rgb(30, 30, 30);
    --text: #eee;
    --lbg: rgb(145, 145, 145);
    --bk: black;
}
body[data-theme="mono"] {
    --bg: #111;
    --conts: rgb(30, 30, 30);
    --text: #eee;
    --lbg: rgb(145, 145, 145);
    --bk: white;
}
body {
    margin: 0px;
    padding: 0px;

    background-color: var(--bg);
    color: var(--text);

    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Arial, Verdana, Helvetica;
}
* {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
#container {
    position: fixed;

    top: 18px;
    bottom: 12px;
    left: 50%;

    width: 992px;

    transform: translateX(-50%);
    padding: 8px;

    border: 1px solid rgb(194, 0, 194);
    border-radius: 8px;
}
#footer {
    position: absolute;

    padding-left: 4px;
    padding-right: 4px;
    bottom: -8px;
    right: 24px;
    
    border-left: 1px solid rgb(194, 0, 194);
    border-right: 1px solid rgb(194, 0, 194);
    border-radius: 8px;

    background-color: var(--bg);

    font-size: 12px;
}
#logo {
    position: absolute;

    cursor: pointer;
    top: -12px;
    left: 28px;

    padding: 4px;

    border-left: 1px solid rgb(194, 0, 194);
    border-right: 1px solid rgb(194, 0, 194);
    border-radius: 16px;

    background-color: var(--bg);

    font-size: 14px;
}
#freeplay-title {
    position: relative;
}
#close-freeplay {
    position: absolute;
    top: 0px;
    right: 0px;
}
#menu {
    position: absolute;
    
    top: 24px;
    left: 8px;
    bottom: 8px;

    width: 150px;

    padding: 4px;

    border-radius: 12px;
    background-color: var(--conts);

    overflow: hidden;
}
.menu-item {
    padding: 0px;
    margin: 0px;
}
.menu-item-top {
    padding-left: 0px;
    margin-left: 0px;

    font-size: 16px;
}
.menu-item-inner {
    margin-left: 0px;
    padding-left: 0px;
    font-size: 12px;
}

.table-row {
    padding: 0px;
    margin: 0px;
}
.table-cell {
    padding: 0px;
    margin: 0px;
}


#instrument-container {
    position: absolute;

    padding: 0px;

    top: 24px;
    left: 174px;

    height: 125px;
    width: 648px;

    border: 1px solid rgb(194, 0, 194);
    border-radius: 12px;
    background-color: var(--conts);

    overflow: hidden;
}

#writeup-container {
    position: absolute;

    padding: 8px;

    top: 157px;
    bottom: 8px;
    left: 174px;

    width: 634px;

    background-color: var(--conts);
    border-radius: 8px;
}

#controllers {
    position: absolute;

    padding: 8px;

    top: 24px;
    right: 8px;
    bottom: 8px;

    width: 152px;

    background-color: var(--conts);
    border-radius: 8px;
}

#settings {
    position: absolute;

    padding-left: 8px;
    padding-right: 8px;

    top: -9px;
    right: 24px;

    border-left: 1px solid rgb(194, 0, 194);
    border-right: 1px solid rgb(194, 0, 194);
    border-radius: 8px;

    background-color: var(--bg);

    font-size: 14px;
}

#instrument-select {
    position: absolute;

    padding-left: 4px;
    padding-right: 4px;

    top: -8px;
    left: 140px;

    border-left: 1px solid rgb(194, 0, 194);
    border-right: 1px solid rgb(194, 0, 194);
    border-radius: 8px;

    background-color: var(--bg);

    font-size: 14px;
}
.black-key {
    background-color: var(--bk);
}