:root {
    --font-color: var(--secondary);
    --border-color: var(--primary);
    --separator-color: var(--secondary);
}

aside {
    position: relative;
    float: right;
    width: 21vw;
    margin: 1rem 1rem 6% 0;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 0.5rem;
    grid-template-areas:
            "play step"
            "pause stop"
            "sep1 sep1"
            "fps remove-animation"
            "sep2 sep2"
            "function function"
            "modes modes"
            "variables variables"
            "derivatives derivatives"
            "sizes sizes";
}

aside > * {
    margin: 0.25rem;
    width: 10vw;
}

aside > .play {
    grid-area: play;
}

aside > .step {
    grid-area: step;
}

aside > .pause {
    grid-area: pause;
}

aside > .stop {
    grid-area: stop;
}

aside > .sep1 {
    grid-area: sep1;
}

aside > .fps {
    grid-area: fps;
}

aside > .remove-animation {
    grid-area: remove-animation;
}

aside > .sep2 {
    grid-area: sep2;
}

aside > .function {
    grid-area: function;
}

aside > .modes {
    grid-area: modes;
}

aside > .variables {
    grid-area: variables;
}

aside > .derivatives {
    grid-area: derivatives;
}

aside > .sizes {
    grid-area: sizes;
}

aside > .sep1,
aside > .sep2 {
    max-width: 100%;
    margin: 1rem 0;
    border-bottom: 1px solid var(--separator-color);
}

aside > .function * {
    width: auto;
}

aside > .modes > #switches {
    width: 100%;
}

aside > .modes > #switch-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    writing-mode: vertical-lr;
}

aside > .modes > #switch-list > option {
    width: auto;
    padding: 0;
}

aside * {
    width: 100%;
}

aside .marker {
    color: var(--font-color);
}

aside > .variables > .content,
aside > .derivatives > .content,
aside > .sizes > .content {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}

aside > .variables > .content > .var,
aside > .derivatives > .content > .var,
aside > .sizes > .content > .var {
    width: auto;
    height: auto;
    padding: 0.25rem;
    margin: 0.5rem;
    display: grid;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    grid-column-gap: 0.5rem;
    grid-template-areas:
            "variable-name variable-name"
            "input expand-right"
            "expand-down .";
}

aside > .variables > .content > .var > .variable-name,
aside > .derivatives > .content > .var > .variable-name,
aside > .sizes > .content > .var > .variable-name {
    grid-area: variable-name;
}

aside > .variables > .content > .var > .input,
aside > .derivatives > .content > .var > .input,
aside > .sizes > .content > .var > .input {
    grid-area: input;
}

aside > .variables > .content > .var > .expand-right,
aside > .derivatives > .content > .var > .expand-right,
aside > .sizes > .content > .var > .expand-right {
    grid-area: expand-right;
}

aside > .variables > .content > .var > .expand-down,
aside > .derivatives > .content > .var > .expand-down,
aside > .sizes > .content > .var > .expand-down {
    grid-area: expand-down;
}

aside > .variables > .content > .var > .variable-name,
aside > .derivatives > .content > .var > .variable-name,
aside > .sizes > .content > .var > .variable-name {
    width: 3rem;
    margin: 0.25rem auto;
}

aside > .variables > .content > .var > .input input::-webkit-outer-spin-button,
aside > .variables > .content > .var > .input input::-webkit-inner-spin-button,
aside > .derivatives > .content > .var > .input input::-webkit-outer-spin-button,
aside > .derivatives > .content > .var > .input input::-webkit-inner-spin-button,
aside > .sizes > .content > .var > .input input::-webkit-outer-spin-button,
aside > .sizes > .content > .var > .input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

aside > .variables > .content > .var > .input tr *,
aside > .derivatives > .content > .var > .input tr *,
aside > .sizes > .content > .var > .input tr * {
    width: 2rem;
}

aside > .variables > .content > .var > .input th:nth-child(n + 2),
aside > .derivatives > .content > .var > .input th:nth-child(n + 2),
aside > .sizes > .content > .var > .input th:nth-child(n + 2) {
    padding-left: 0.5rem;
}

aside > .variables > .content > .var > .input tr:last-child > th:nth-child(n + 2),
aside > .derivatives > .content > .var > .input tr:last-child > th:nth-child(n + 2),
aside > .sizes > .content > .var > .input tr:last-child > th:nth-child(n + 2) {
    padding-left: 0.5rem;
}

aside > .variables > .content > .var *,
aside > .derivatives > .content > .var *,
aside > .sizes > .content > .var * {
    text-align: center;
}

aside > .variables > .content > .var > .expand-right,
aside > .variables > .content > .var > .expand-down,
aside > .derivatives > .content > .var > .expand-right,
aside > .derivatives > .content > .var > .expand-down,
aside > .sizes > .content > .var > .expand-right,
aside > .sizes > .content > .var > .expand-down {
    display: flex;
    justify-content: center;
    align-items: center;
}

aside > .variables > .content > .var > .expand-right,
aside > .derivatives > .content > .var > .expand-right,
aside > .sizes > .content > .var > .expand-right {
    width: 3rem;
    height: 100%;
}

aside > .variables > .content > .var > .expand-down,
aside > .derivatives > .content > .var > .expand-down,
aside > .sizes > .content > .var > .expand-down {
    width: 100%;
    height: 2rem;
}