@font-face {
    font-family: 'Chillax';
    src: url('../Chillax-Variable.ttf') format('truetype');
    font-weight: 100 800;
    font-display: swap;
    font-style: normal;
}


* {
    font-family: "Chillax", "Be Vietnam Pro", "Noto Sans JP", sans-serif;
}

:root {
    --main: #5bcc77;
    --sub: #c1ccc4;
    --accent: #775bcc;

    --tonic: #5bcc77;
    --sub-dominant: #ccbd5b;
    --dominant: #cc5b5b;

    --tonic-sub: #39cc5e;
    --sub-dominant-sub: #ccb839;
    --dominant-sub: #cc3939;

    --chord-saturation: 50%;
    --chord-lightness: 70%;
}

.italic {
    font-style: italic;
}

.bold {
    font-weight: 800;
}

.medium {
    font-weight: 600;
}

.normal {
    font-weight: 400;
}

.thin {
    font-weight: 200;
}


h1#title {
    font-size: 10vmin;
    color: var(--main);
    margin-top: 10vmin;
    margin-bottom: 1vmin;
}

p#sub-title {
    font-size: 2.5vmin;
    color: var(--main);
    margin-bottom: 5vmin;
}

div#d-conainter {
    margin-top: 10vmin;
}

div.d-wrapper {
    height: 50vmin !important;
    width: 30vmin;
    color: white;
    border-radius: 1vmin;
    margin: 0 5vmin;
    padding: 0 0 10vmin 0;
}

div#tonic {
    /* background-color: var(--tonic); */
    background: linear-gradient(var(--tonic), var(--tonic-sub));
    /* box-shadow: 0 1vmin 3vmin -1vmin var(--tonic); */
}

div#sub-dominant {
    /* background-color: var(--sub-dominant); */
    background: linear-gradient(var(--sub-dominant), var(--sub-dominant-sub));
    /* box-shadow: 0 1vmin 3vmin -1vmin var(--sub-dominant); */
}

div#dominant {
    /* background-color: var(--dominant); */
    background: linear-gradient(var(--dominant), var(--dominant-sub));
    /* box-shadow: 0 1vmin 3vmin -1vmin var(--dominant); */
}


div.d-wrapper p {
    font-size: 2.5vmin;
    /* margin: 1vmin 0; */
}

div.d-wrapper h2 {
    font-size: 3vmin;
    margin: 7.5vmin 0 2vmin 0;
}

div.key {
    gap: 1vmin;
}

div.key select {
    background-color: var(--main);
    color: white;
    border: none;
    border-radius: 100vmin;
    font-size: 2vmin;
    height: 4vmin;
    padding-left: 2vmin;
    transition: all 0.2s ease;
}

div.key a#add-key-button {
    background-color: var(--main);
    color: white;
    border: none;
    border-radius: 100vmin;
    font-size: 2vmin;
    height: 4vmin;
}

select#key-root {
    width: 10vmin;
}

select#key-mode {
    width: 20vmin;
}

a#keys {
    font-size: 2vmin;
}

a#relative,
a#omit-root {
    position: relative;
    margin-top: 2vmin;
    font-size: 2vmin;
}

a#relative::before,
a#omit-root::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 0.1em;
    background-color: black;
    transition: width 0.3s ease;
    transform: translateY(-50%);
}

a#relative.strike::before {
    width: 100%;
}

select#duration {
    background-color: white;
    color: var(--main);
    border: solid var(--sub) 0.1vmin;
    border-radius: 100vmin;
    font-size: 2vmin;
    height: 4vmin;
    width: 10vmin;
    padding-left: 2vmin;
    transition: all 0.2s ease;
}

select.chord-select {
    background-color: white;
    color: var(--main);
    border: solid var(--sub) 0.1vmin;
    border-radius: 100vmin;
    font-size: 2vmin;
    height: 4vmin;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
}

select.chord-select:nth-child(-n + 3) {
    grid-column: span 4;
    grid-row: 1;
}

select.chord-select:nth-child(n + 4) {
    grid-column: span 3;
    grid-row: 2;
}

div#chords-container {
    height: 75vmin;
    width: 110vmin;
    gap: 10vmin;
    margin-top: 10vmin;
    margin-bottom: 10vmin;
}

div#chords-container>div {
    height: 100%;
    width: 100%;
}

div#chords {
    border: solid 0.2vmin var(--sub);
    border-radius: 1vmin;
    padding: 5vmin;
    overflow: scroll;

    /*  */
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-auto-rows: 5vmin;

    gap: 2vmin;
}

a.chord {
    font-size: 3vmin;
    /* border: solid white 1vmin; */

    color: white;
    border-radius: 1vmin;
    height: 5vmin;
    position: relative;

    background-color: var(--main-color) !important;
}

a.chord.i {
    -webkit-text-stroke: 0.2vmin hsl(calc(360 / 12 * 0), var(--chord-saturation), var(--chord-lightness));
}

a.roman {
    transition: all 0.2s ease;
}

a.roman:hover {
    font-weight: 600;
}

h2#chord-name {
    font-size: 3vmin;
    /* margin: 1vmin; */

    color: white;
    border-radius: 1vmin;
    height: 5vmin;
    width: 30vmin;

    background-color: var(--main-color);
}

div#chord-control-wrapper {
    width: 100%;
}

.none {
    --main-color: var(--sub);
}

.t {
    --main-color: var(--tonic);
}

.s {
    --main-color: var(--sub-dominant);
}

.d {
    --main-color: var(--dominant);
}

a.chord.active {
    /* box-shadow: 0 0 1vmin 0 var(--main-color); */
    box-shadow: 0 0 1vmin 0.5vmin color-mix(in srgb, var(--main-color) 50%, transparent);
}

div#chord-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 61vmin;
    gap: 1vmin;
}

div#chord-wrapper>div {
    box-shadow: 0 0 2vmin -0.5vmin var(--sub);
    border-radius: 1vmin;
}

label.desc {
    font-size: 2vmin;
    margin-right: 1vmin;
    text-align: right;
}

div.checkbox-wrapper label:not(div.checkbox label) {
    font-size: 2vmin;
    margin-left: 1vmin;
    text-align: right;
}

div#functions {
    margin: 0;
    height: 1vmin;
    width: 30vmin;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    gap: 1vmin;
}

a.function {
    height: 100%;
    width: 100%;
    border-radius: 100vmin;
    background-color: var(--main-color);
}

a.button {
    background-color: var(--main);
    color: white;
    height: 6vmin;
    aspect-ratio: 1;
    margin: calc(((75vmin - 61vmin - 1vmin) - 6vmin) / 2);
    font-size: 3vmin;
    border-radius: 100vmin;
    transition: all 0.2s ease;
}

a.button:hover {
    box-shadow: 0 0 1vmin 0 var(--main);
    transform: scale(1.1);
}

.fa-play {
    padding-left: 0.3vmin;
}

input[type="number"] {
    background-color: white;
    border: var(--main) solid 0.1vmin;
    border-radius: 100vmin;
    font-size: 2vmin;
    height: 4vmin;
    width: 10vmin;
    padding-left: 1.5vmin;
    transition: all 0.2s ease;
}

div#parameter-wrapper {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 1vmin;
    align-items: center;
}

a#delete {
    border: var(--dominant) solid 0.1vmin;
    color: var(--dominant);
    background-color: white;
    margin-left: 10vmin;
    border-radius: 100vmin;
    font-size: 2vmin;
    height: 4vmin;
    width: 10vmin;
    transition: all 0.2s;
}

a#delete:hover {
    box-shadow: 0 0 1vmin 0 color-mix(in srgb, var(--dominant) 50%, transparent);
}

a.chord span.handle {
    position: absolute !important;
    right: 0;
    top: 0;
    height: 100%;
    width: 2vmin;
    background-color: white;
    opacity: 0.5;
    border-radius: 0 1vmin 1vmin 0;
    cursor: ew-resize;
}

a.chord span.piano {
    position: absolute !important;
    right: 4vmin;
    top: 0;
    height: 5vmin;
    color: white;
    opacity: 0.5;
    border-radius: 0 1vmin 1vmin 0;
    font-size: 4vmin;
    cursor: pointer;
    /* text-align: center; */
    line-height: 5vmin;
}

a.arrow {
    background-color: var(--sub);
    color: white;
    border-radius: 1vmin;
    transition: all 0.2s;
    font-size: 1.5vmin;
}

a.arrow:hover {
    background-color: var(--main);
    color: white;
    border-radius: 1vmin;
}

div#chord-data {
    height: 7vmin;
    width: 30vmin;
    gap: 1vmin;
}

div#chord-panel {
    height: 17vmin;
    width: 50vmin;
    padding: 5vmin;

    display: grid;
    grid-template-columns: 1fr 30vmin 1fr;
    gap: 1vmin;
}

section {
    height: 35vmin;
    width: 50vmin;
    padding: 0 5vmin 5vmin 5vmin;
    gap: 3vmin;
    scroll-snap-align: start;

    flex-shrink: 0;
    box-sizing: border-box;
}

div#chord-notes {
    display: grid;
    /* display: flex; */
    height: 10vmin;
    width: 40vmin;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1vmin;
}

div#tension-container {
    /* height: 15vmin; */
    width: 40vmin;
    display: flex;
    flex-direction: column;
}

div#tension-container>label {
    text-align: left;
}

div#tensions-wrapper {
    margin-top: 1vmin;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    gap: 1vmin;
    grid-auto-flow: column;
}

a.tension:not(.spacer) {
    border: solid var(--main) 0.1vmin;
}

a.tension {
    height: 100%;
    width: 100%;
    font-size: 2.5vmin;
    border-radius: 1vmin;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

a.tension:not(.selected) {
    background-color: white;
    color: var(--main);
}

a.tension.selected {
    background-color: var(--main);
    color: white;
}

a.tension.spacer {
    background-color: transparent;
    pointer-events: none;
}

div#buttons {
    margin-bottom: 10vmin;
}

.file-button {
    height: 5vmin;
    width: 15vmin;
    font-size: 2.5vmin;
    border-radius: 100vmin;
    box-sizing: border-box;
    transition: all 0.25s ease;
    background-color: var(--main);
    color: white;
    margin: 0 2.5vmin;
}

.file-button:hover {
    background-color: var(--accent);
}

div#section-container {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    height: 35vmin;
    width: 50vmin;
}

section#tools a {
    border: var(--primary) solid 0.1vmin;
    color: var(--primary);
    background-color: white;
    border-radius: 100vmin;
    font-size: 1.75vmin;
    height: 4vmin;
    width: 40vmin;
    transition: all 0.2s;
}

section#tools a:hover {
    color: white;
    background: var(--primary);
    margin: 0 5vmin;
}

section#tools a.tonic {
    --primary: var(--main);
}

section#tools a.sub-dominant {
    --primary: var(--sub-dominant);
}

section#tools a.dominant {
    --primary: var(--dominant);
}

section#tools a.disabled {
    --primary: var(--sub);
}

div#section-indicator {
    height: 4vmin;
    width: 50vmin;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    padding: 0 5vmin;
    margin-top: 1vmin;
}

a.indicator {
    height: 100%;
    width: 100%;
    font-size: 2vmin;
    transition: transform 0.2s ease;
}

a.indicator img {
    height: 2.5vmin;
    filter: saturate(0);
    user-drag: none;
    -webkit-user-drag: none;
}

a.indicator.active img {
    filter: saturate(1);
}


a.indicator:hover {
    transform: scale(1.1);
}

a.indicator.active {
    color: var(--main)
}

a.indicator:not(.active) {
    color: var(--sub);
}

div#piano-roll {
    display: grid;
    height: 25vmin;
    width: 40vmin;
    margin-top: 5vmin;

    grid-template-columns: 1fr 10fr 10fr 10fr;
    /* grid-template-rows: repeat(36, 1fr); */
    grid-template-rows: repeat(48, 1fr);
    grid-auto-flow: column;
    align-content: end;

    border-radius: 0.2vmin;
    border: solid var(--sub) 0.5vmin;
}

div#chord-info {
    position: fixed;

    display: grid;
    height: 25vmin;
    width: 20vmin;

    grid-template-columns: 10fr;
    /* grid-template-rows: repeat(36, 1fr); */
    grid-template-rows: repeat(48, 1fr);
    grid-auto-flow: column;
    align-content: end;

    border-radius: 0.2vmin;
    border: solid var(--sub) 0.5vmin;

    transition: opacity 0.2s;

    opacity: 0;

    pointer-events: none;
}

div#alternative-info {
    position: fixed;
    z-index: 10000;
    background-color: #ffffffa0;
    backdrop-filter: blur(1vmin);
    box-shadow: 0 0.5vmin 1vmin #00000030;
    padding: 1vmin;

    display: grid;
    height: 10vmin;
    width: 30vmin;

    border-radius: 1vmin;

    transition: opacity 0.2s;

    opacity: 0;

    pointer-events: none;
}

div#alternative-info h5 {
    font-size: 1.5vmin;
}

div#full-piano-roll {
    display: grid;
    height: 25vmin;
    width: 20vmin;

    grid-template-columns: 10fr;
    grid-template-rows: repeat(36, 1fr);
    grid-auto-flow: column;
    align-content: end;

    border-radius: 0.2vmin;
    border: solid var(--sub) 0.5vmin;

    transition: opacity 0.2s;

    opacity: 0;

    pointer-events: none;
}

div.piano-roll>div {
    /* --thickness: 0.2vmin; */
    --border-thickness: 0.175vmin;
    --outline-thickness: 0.05vmin;
    /* height: calc(100% - (var(--outline-thickness) * 2)); */
    /* width: calc(100% - (var(--outline-thickness) * 2)); */
    height: 100%;
    width: 100%;
    outline: solid var(--outline-thickness) var(--sub);
    outline-offset: calc(-1 * var(--outline-thickness));
}

div.piano-roll>div.diatonic {
    background-color: var(--main);
}

div.piano-roll>div.chromatic {
    background-color: var(--accent);
}

div.piano-roll>div.natural {
    background-color: #eee;
}

div.piano-roll>div.accidental {
    background-color: #bbb;
}

div.piano-roll>div.tritone {
    border: solid var(--border-thickness) #5b93cc;
}

div.piano-roll>div.augment {
    border: solid var(--border-thickness) #cc7f5b;
}

div.piano-roll>div.tritone.augment {
    border-left: solid var(--border-thickness) #5b93cc;
    border-top: solid var(--border-thickness) #5b93cc;
    border-right: solid var(--border-thickness) #cc7f5b;
    border-bottom: solid var(--border-thickness) #cc7f5b;
}

span.superscript {
    font-size: 0.625em;
    transform: translateY(-25%) translateX(20%);
    ;
}

div.input-wrapper {
    margin: 0 2.5vmin;
}

div.checkbox-wrapper {
    margin-top: 2.5vmin;
}

input[type="checkbox"] {
    appearance: none;
    position: absolute;
}

input[type="checkbox"]:checked+label {
    background-color: var(--main);
}

div.checkbox {
    height: 2vmin;
    width: 2vmin;
}

div.checkbox>label {
    display: block;
    height: 2vmin;
    width: 2vmin;
    border: solid 0.1vmin var(--sub);
    border-radius: 0.5vmin;
    cursor: pointer;
    transition: all 0.2s;

    img {
        margin: calc((2vmin - (0.1vmin * 2) - 1.3vmin) / 2);
        height: 1.3vmin;
        width: 1.3vmin;
    }
}

div.checkbox>label:hover {
    border-color: var(--main);
}

.hide {
    display: none !important;
}

div#popup-background {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    backdrop-filter: blur(10px) brightness(0.5);
    z-index: 999;
}

div.popup {
    background-color: white;
    border-radius: 1vmin;
    width: 70vmin;
    height: 70vmin;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 999;
}

div#popup-keys h1 {
    color: var(--main);
    font-size: 5vmin;
    top: 5vmin;
    width: 100%;
    margin: 5vmin 0;
}

div#add-key-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);

    gap: 1vmin;
    height: 10vmin;
    width: 50vmin;
}

div#add-key-buttons>a {
    height: 100%;
    width: 100%;
    background-color: white;
    border: solid 0.1vmin var(--main);
    border-radius: 1vmin;
    color: var(--main);
    font-size: 1.5vmin;
    transition: all 0.2s;
}

div#add-key {
    display: grid;
    grid-template-columns: 1fr 4fr 2fr;
    grid-template-rows: 1fr;
    height: 4vmin;
    width: 50vmin;
    margin-top: 2vmin;
}

div#add-key>* {
    height: 100%;
    width: 100%;
    transition: all 0.2s;
}

div#keys-list {
    display: flex;
    align-items: center;
    margin-top: 3vmin;
    background-color: white;
    box-shadow: 0 0 1vmin 0 var(--main);
    border-radius: 1vmin;
    width: 50vmin;
    height: 30vmin;
    overflow: scroll;
    gap: 1.25vmin;
    padding: 1.25vmin 0;
}

a.other-keys {
    height: 3vmin;
    width: calc(50vmin - 1.25vmin * 2);
    font-size: 2vmin;
    background-color: white;
    border-radius: 1vmin;
    border: solid 0.1vmin var(--sub);
}

a.other-keys::after {
    content: "Delete?";
    position: absolute;
    opacity: 0;
    width: 30vmin;
    text-align: center;
    background-color: white;
    color: var(--dominant);

    transition: all 0.2s ease;
}

a.other-keys:hover::after {
    opacity: 1;
}

.error {
    background-color: var(--dominant) !important;
}

section#alternative {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    padding-top: 5vmin;

    overflow-y: scroll;
}

a.chord-alternative {
    font-size: 3vmin;
    /* margin: 1vmin; */

    color: white;
    border-radius: 1vmin;
    height: 5vmin;
    width: 40vmin;

    background-color: var(--main-color);
}