/*RotisSansSerifStd*/
@font-face {
    font-display: swap;
    font-family: 'Rotis';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/Rotis-SansSerif-Std-Light.otf') format('opentype');
}

@font-face {
    font-display: swap;
    font-family: 'Rotis';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Rotis-SansSerif-Std-Regular.otf') format('opentype');
}

@font-face {
    font-display: swap;
    font-family: 'Rotis';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/Rotis-SansSerif-Std-Italic.otf') format('opentype');
}

@font-face {
    font-display: swap;
    font-family: 'Rotis';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/Rotis-SansSerif-Std-Bold.otf') format('opentype');
}

@font-face {
    font-display: swap;
    font-family: 'Rotis';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/Rotis-SansSerif-Std-ExtraBold.otf') format('opentype');
}

:root {
    --light-color: #efeef0;
    --soft-color: #d9d9d9;
    --medium-color: #a9acaf;
    --dark-color: #52595f;
    --accent-color: #C1B58D;
    --glow-color: #f6b845;

    --background-color: #ffffff;
    --shape-color: #520000;

    --button-text: 12px;

    --height-but: 32px;
    --rad-but: 16px;
    --border-but: 1px;
    --height-col: 24px;
    --border-col: 4px;
    --rad-col: 12px;
    --diam-thumb: 26px;
    --border-thumb: 2px;
    --height-track: 18px;
    --rad-track: 9px;
    --border-track: 4px;
    --diam-radio: 32px;
    --hieght-check: 28px;
    --rad-check: 4px;
    --height-in: 40px;
    --rad-in: 8px;


    --rad-small: 10px;
    --rad-big: 20px;

    --gap: 32px;
    --strip-width: 128px;

    --pad: 32px;
    --window-width: 364px;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    font-family: 'Rotis';
    color: var(--dark-color);
    margin: 0;
    padding: 0;
}

/*Layout*/
.hidden {
    display: none !important;
}

body {
    background-color: var(--dark-color);
    background-image: url(img/pattern.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
}

main {
    display: grid;
    grid-template-columns: var(--strip-width) 1fr;
    grid-template-areas: "toolbar canvas";
    gap: var(--gap);
    padding: var(--gap);
    width: 100vw;
    min-width: 1000px;
    overflow: hidden;
}

#loginpage {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
}

#loginpage p {
    color: var(--light-color);
}


#nav-container {
    position: absolute;
    bottom: var(--gap);
    right: var(--gap);
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    margin-right: var(--gap);
}

#nav-window {
    min-width: var(--window-width);
    background-color: var(--soft-color);
    padding: var(--gap);
    border-radius: var(--rad-big);
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

#nav-strip {
    width: var(--strip-width);
    padding: var(--gap);
}

#order fieldset,
#attractor fieldset,
#controls fieldset,
#nav-window fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    align-items: center;
    row-gap: 0.5rem;
    column-gap: 0.2rem;
}

#controls fieldset {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

#attractor fieldset {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

#order fieldset {
    grid-template-columns: 1fr 1fr 1fr;
}

#message * {
    margin-bottom: 1rem;
}

.window {
    position: absolute;
    top: var(--gap);
    left: calc(var(--gap)*2 + var(--strip-width));
    width: var(--window-width);
    max-width: var(--window-width);
    background-color: var(--soft-color);
    border-radius: var(--rad-big);
    padding: var(--pad);
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

.popup span,
.window span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.window div {
    text-align: center;
}

#order span,
#image span {
    justify-content: start;
    gap: 1rem;
}

.popup {
    position: absolute;
    top: 30%;
    left: 40%;
    min-height: 200px;
    width: 360px;
    background-color: var(--soft-color);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: var(--rad-big);
    padding: var(--pad);
}

canvas {
    margin: 1rem 0 1rem 0;
    background-color: white;
    border-radius: var(--rad-small);
    -webkit-box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.25), 3px 3px 16px rgb(170, 170, 170), -3px -3px 16px rgb(255, 255, 255);
    -moz-box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.25), 3px 3px 16px rgb(170, 170, 170), -3px -3px 16px rgb(255, 255, 255);
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.25), 3px 3px 16px rgb(170, 170, 170), -3px -3px 16px rgb(255, 255, 255);
}

#mainView {
    margin: 0;
    box-shadow: none;
    border-radius: var(--rad-big);
}

#contactForm button {
    width: 100%;
}

#textForm {
    display: flex;
    flex-flow: column;
}

#textForm * {
    margin: 0;
}

#textForm>div {
    border-radius: var(--rad-small);
    background-color: #ffffff;
    -webkit-box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px #ffffff, 5px 5px 28px #aaaaaa;
    -moz-box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px #ffffff, 5px 5px 28px #aaaaaa;
    box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px #ffffff, 5px 5px 28px #aaaaaa;
}

#textForm>div>* {
    width: 100%;
}

#textForm>div>div {
    height: 1px;
    background-color: var(--soft-color);
}

#fullname {
    border-radius: var(--rad-small) var(--rad-small) 0 0;
    box-shadow: none;
    background-color: transparent;
}

#mailaddress {
    border-radius: 0 0 var(--rad-small) var(--rad-small);
    box-shadow: none;
    background-color: transparent;
}

#messagebox {
    margin-top: 1rem;
    height: 8rem;
}

#logo-container {
    margin-top: var(--gap);
}

/*Menu-Toolbar*/
#toolbar {
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

#menu-strip {
    background-color: var(--light-color);
    border-radius: var(--rad-big);
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: var(--gap);
    padding: 16px;
    background: linear-gradient(to right,
            var(--light-color),
            var(--light-color) 15%,
            #ffffff 50%,
            var(--light-color) 85%,
            var(--light-color));
}

path,
svg {
    fill: var(--accent-color);
    stroke: transparent;
    overflow: visible;
    transform-origin: center center;
    transform: scale(1.2, 1.2);
}

#nav-button {
    background-color: var(--light-color);
    overflow: visible;
    height: 6rem;
    width: 6rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: inset 2px 2px 6px rgba(193, 193, 193, 0.9), inset -2px -2px 6px rgba(255, 255, 255, 0.7);
    -moz-box-shadow: inset 2px 2px 6px rgba(193, 193, 193, 0.9), inset -2px -2px 6px rgba(255, 255, 255, 0.7);
    box-shadow: inset 2px 2px 6px rgba(193, 193, 193, 0.9), inset -2px -2px 6px rgba(255, 255, 255, 0.7);
}

.menu-button {
    background-color: var(--light-color);
    overflow: visible;
    height: 96px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: inset 2px 2px 6px rgba(193, 193, 193, 0.9), inset -2px -2px 6px rgba(255, 255, 255, 0.7), -6px -6px 6px rgba(255, 255, 255, 0.75), 6px 6px 7px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 2px 2px 6px rgba(193, 193, 193, 0.9), inset -2px -2px 6px rgba(255, 255, 255, 0.7), -6px -6px 6px rgba(255, 255, 255, 0.75), 6px 6px 7px 3px rgba(0, 0, 0, 0.1);
    box-shadow: inset 2px 2px 6px rgba(193, 193, 193, 0.9), inset -2px -2px 6px rgba(255, 255, 255, 0.7), -6px -6px 6px rgba(255, 255, 255, 0.75), 6px 6px 7px 3px rgba(0, 0, 0, 0.1);
}

#nav-button:hover,
.menu-button.hover,
.menu-button:hover {
    background: #dbc16b;
    -webkit-box-shadow: inset 2px 2px 6px 2px #ffffff;
    -moz-box-shadow: inset 2px 2px 6px 2px #ffffff;
    box-shadow: inset 2px 2px 6px 2px #ffffff;
}

#nav-button.active,
#nav-button:active,
.menu-button.active,
.menu-button:hover:active {
    background: #dbc16b;
    -webkit-box-shadow: inset 2px 2px 6px 2px #ffffff, inset -4px -5px 16px 6px #ffe173;
    -moz-box-shadow: inset 2px 2px 6px 2px #ffffff, inset -4px -5px 16px 6px #ffe173;
    box-shadow: inset 2px 2px 6px 2px #ffffff, inset -4px -10px 16px 6px #ffe173;
}

#nav-button.active path,
#nav-button:active svg,
#nav-button.hover path,
#nav-button.hover svg,
#nav-button:hover path,
#nav-button:hover svg,
#nav-button:hover:active path,
#nav-button:hover:active svg,
.menu-button.hover path,
.menu-button.hover svg,
.menu-button:hover path,
.menu-button:hover svg,
.menu-button.active path,
.menu-button.active svg,
.menu-button:hover:active path,
.menu-button:hover:active svg {
    fill: #ffffff;
    stroke: transparent;
}


/*Text*/
h1 {
    font-weight: 800;
    font-size: 1.5rem;
    text-transform: uppercase;
}

h2,
.txt-form {
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
}

h3,
.txt-des {
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
}

h4,
.txt-gen {
    font-weight: 300;
    font-size: 1rem;
    text-transform: uppercase;
}

p,
.txt-reg {
    font-weight: 400;
    font-size: 1rem;
}

.txt-light {
    color: var(--light-color);
    font-weight: 400;
    font-size: 1rem;
}

label {
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
}

input,
button label {
    color: var(--light-color);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
}

.keyinput {
    text-transform: uppercase;
    color: var(--dark-color);
}

fieldset label {
    font-weight: 300;
    font-size: 0.75rem;
    text-transform: uppercase;
}

textarea {
    text-transform: none !important;
    font-size: 0.75rem;
}

/*Controls*/
textarea {
    resize: none;
    padding: 1rem;
}

fieldset {
    border: 0;
}

legend {
    display: none;
}

option {
    font-family: 'Rotis';
    font-weight: 300;
}

.link {
    width: 120px;
    height: var(--height-but);
    font-size: var(--button-text);
    border-radius: var(--rad-but);
    text-align: center;
    padding: calc((var(--height-but) - var(--button-text)) / 2);
}

.link:hover {
    font-weight: bolder;
}

.button,
button {
    display: inline-block;
    text-decoration: none;
    font-size: var(--button-text);
    padding: calc((var(--height-but) - var(--button-text))/2 - var(--border-but));
    text-align: center;
    min-width: 120px;
    color: white;
    height: var(--height-but);
    border-radius: var(--rad-but);
    border: var(--border-but) solid #e3dbc1;
    background: linear-gradient(to bottom,
            #eddead,
            #c1b58d 52%);
    -webkit-box-shadow: -5px -5px 14px #ffffff, 5px 5px 30px #aaaaaa;
    -moz-box-shadow: -5px -5px 14px #ffffff, 5px 5px 30px #aaaaaa;
    box-shadow: -5px -5px 14px #ffffff, 5px 5px 30px #aaaaaa;
}


.button.hover,
.button:hover,
button.hover,
button:hover {
    background: linear-gradient(to bottom,
            rgba(246, 184, 69, 0),
            rgba(246, 184, 69, 1) 100%),
        linear-gradient(to bottom,
            #eddead,
            #c1b58d 52%);
}

.active,
.button:hover:active,
button:hover:active {
    background: linear-gradient(to top,
            #eddead,
            var(--accent-color) 48%);
}

a.disabled,
a.disabled:hover,
a.disabled:hover:active,
.button:disabled,
.button:disabled:active,
button:disabled,
button:disabled:active {
    background: none;
    background-color: var(--medium-color);
    border-color: #d9d9d9;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    background-color: transparent;
    background: transparent;
    border: none;
}

input[type="file"]::file-selector-button {
    height: 100%;
    width: 105%;
    background-color: transparent;
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: 'Rotis';
}

.keyinput {
    border: none;
    padding-left: 1rem;
    padding-right: 0.5rem;
    background-color: #ffffff;
    border-radius: var(--rad-in);
    height: var(--height-in);
    min-height: var(--height-in);
    -webkit-box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px #ffffff, 5px 5px 28px #aaaaaa;
    -moz-box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px #ffffff, 5px 5px 28px #aaaaaa;
    box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px #ffffff, 5px 5px 28px #aaaaaa;
}

.keyinput:disabled {
    background-color: var(--soft-color);
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-content: center;
    border-radius: var(--rad-check);
    height: var(--hieght-check);
    width: var(--hieght-check);
    min-width: var(--hieght-check);
    background-color: var(--dark-color);
    -webkit-box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 15px #ffffff, 5px 5px 15px #aaaaaa;
    -moz-box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 15px #ffffff, 5px 5px 15px #aaaaaa;
    box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 15px #ffffff, 5px 5px 15px #aaaaaa;
}

input[type="radio"]:checked,
input[type="radio"].hover,
input[type="radio"]:hover,
input[type="checkbox"]:checked,
input[type="checkbox"].hover,
input[type="checkbox"]:hover {
    background-color: var(--accent-color);
}

input[type="checkbox"]::before {
    content: "";
    width: calc(var(--hieght-check) - 2 * var(--rad-check));
    height: calc(var(--hieght-check) - 2 * var(--rad-check));
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    clip-path: polygon(28% 38%, 41% 53%, 75% 24%, 86% 38%, 40% 78%, 15% 50%);
    background-color: #ffffff;
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
    background-color: var(--soft-color);
}

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-content: center;
    border-radius: 50%;
    height: var(--diam-radio);
    width: var(--diam-radio);
    background-color: var(--dark-color);
    -webkit-box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 15px #ffffff, 5px 5px 15px #aaaaaa;
    -moz-box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 15px #ffffff, 5px 5px 15px #aaaaaa;
    box-shadow: inset 0px 2px 7px rgba(0, 0, 0, 0.25), -5px -5px 15px #ffffff, 5px 5px 15px #aaaaaa;
}

input[type="radio"]::before {
    content: "";
    background-color: #ffffff;
    width: calc(var(--diam-radio)/2);
    height: calc(var(--diam-radio)/2);
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: calc(var(--diam-radio)/2) calc(var(--diam-radio)/2) #ffffff;
    background: radial-gradient(#ffffff, #fff6da);
    box-shadow: 0px 0px 3px 3px rgba(255, 246, 218, 0.5);
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

.color,
button.color,
input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: transparent;
    border: var(--border-col) solid transparent;
    display: inline-block;
    width: 120px;
    max-width: 120px;
    height: var(--height-col);
    border-radius: var(--rad-col);
    box-shadow: none;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)) padding-box,
        linear-gradient(var(--shape-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

input[type="color"].back-col {
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)) padding-box,
        linear-gradient(var(--background-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

.color:hover,
.color.hover,
button.color:hover,
button.color.hover,
input[type="color"].hover,
input[type="color"]:hover {
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)) padding-box,
        linear-gradient(var(--shape-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

input[type="color"].back-col:hover {
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)) padding-box,
        linear-gradient(var(--background-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

.color.active,
.color:hover:active,
button.color.active,
button.color:hover:active,
input[type="color"].active,
input[type="color"]:hover:active {
    background: linear-gradient(var(--shape-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

input[type="color"].back-col:hover:active {
    background: linear-gradient(var(--background-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

.color:disabled:active,
button.color:disabled:active,
input[type="color"]:disabled:active,
.color:disabled,
button.color:disabled,
input[type="color"]:disabled {
    background: linear-gradient(var(--medium-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    display: none;
    padding: 0;
    border-radius: var(--border-col);
}

input[type="color"]::-webkit-color-swatch {
    display: none;
    border-radius: var(--border-col);
    border: none;
}

input[type="color"]::-moz-color-swatch {
    display: none;
    border-radius: var(--border-col);
    border: none;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    width: 100%;
    height: var(--diam-thumb);
    max-height: var(--diam-thumb);
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: var(--diam-thumb);
    width: var(--diam-thumb);
    border: var(--border-thumb) solid transparent;
    border-radius: 50%;
    background:
        conic-gradient(rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.47) 13%,
            rgba(255, 255, 255, 0.91) 26%,
            rgba(255, 255, 255, 0.65) 39%,
            rgba(255, 255, 255, 0.41) 44%,
            rgba(255, 255, 255, 0.87) 50%,
            rgba(255, 255, 255, 0.41) 58%,
            rgba(255, 255, 255, 0.91) 69%,
            rgba(255, 255, 255, 0.43) 83%,
            rgba(255, 255, 255, 0.81) 91%,
            rgba(255, 255, 255, 0.85) 100%) padding-box,
        linear-gradient(var(--accent-color)) padding-box,
        linear-gradient(to bottom, #dcd3b3, #746b4f) border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-top: calc(var(--height-track) - var(--diam-thumb));
}

input[type=range]::-ms-thumb {
    height: var(--diam-thumb);
    width: var(--diam-thumb);
    border: var(--border-thumb) solid transparent;
    border-radius: 50%;
    background:
        conic-gradient(rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.47) 13%,
            rgba(255, 255, 255, 0.91) 26%,
            rgba(255, 255, 255, 0.65) 39%,
            rgba(255, 255, 255, 0.41) 44%,
            rgba(255, 255, 255, 0.87) 50%,
            rgba(255, 255, 255, 0.41) 58%,
            rgba(255, 255, 255, 0.91) 69%,
            rgba(255, 255, 255, 0.43) 83%,
            rgba(255, 255, 255, 0.81) 91%,
            rgba(255, 255, 255, 0.85) 100%) padding-box,
        linear-gradient(var(--accent-color)) padding-box,
        linear-gradient(to bottom, #dcd3b3, #746b4f) border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

input[type=range]::-moz-range-thumb {
    height: var(--diam-thumb);
    width: var(--diam-thumb);
    border: var(--border-thumb) solid transparent;
    border-radius: 50%;
    background:
        conic-gradient(rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.47) 13%,
            rgba(255, 255, 255, 0.91) 26%,
            rgba(255, 255, 255, 0.65) 39%,
            rgba(255, 255, 255, 0.41) 44%,
            rgba(255, 255, 255, 0.87) 50%,
            rgba(255, 255, 255, 0.41) 58%,
            rgba(255, 255, 255, 0.91) 69%,
            rgba(255, 255, 255, 0.43) 83%,
            rgba(255, 255, 255, 0.81) 91%,
            rgba(255, 255, 255, 0.85) 100%) padding-box,
        linear-gradient(var(--accent-color)) padding-box,
        linear-gradient(to bottom, #dcd3b3, #746b4f) border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

input[type=range]:hover::-webkit-slider-thumb,
input[type=range].hover::-webkit-slider-thumb {
    background:
        conic-gradient(rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.47) 13%,
            rgba(255, 255, 255, 0.91) 26%,
            rgba(255, 255, 255, 0.65) 39%,
            rgba(255, 255, 255, 0.41) 44%,
            rgba(255, 255, 255, 0.87) 50%,
            rgba(255, 255, 255, 0.41) 58%,
            rgba(255, 255, 255, 0.91) 69%,
            rgba(255, 255, 255, 0.43) 83%,
            rgba(255, 255, 255, 0.81) 91%,
            rgba(255, 255, 255, 0.85) 100%) padding-box,
        linear-gradient(var(--glow-color)) padding-box,
        linear-gradient(to bottom, #dcd3b3, #746b4f) border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

input[type=range].hover::-ms-thumb,
input[type=range]:hover::-ms-thumb {
    background:
        conic-gradient(rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.47) 13%,
            rgba(255, 255, 255, 0.91) 26%,
            rgba(255, 255, 255, 0.65) 39%,
            rgba(255, 255, 255, 0.41) 44%,
            rgba(255, 255, 255, 0.87) 50%,
            rgba(255, 255, 255, 0.41) 58%,
            rgba(255, 255, 255, 0.91) 69%,
            rgba(255, 255, 255, 0.43) 83%,
            rgba(255, 255, 255, 0.81) 91%,
            rgba(255, 255, 255, 0.85) 100%) padding-box,
        linear-gradient(var(--glow-color)) padding-box,
        linear-gradient(to bottom, #dcd3b3, #746b4f) border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

input[type=range].hover::-moz-range-thumb,
input[type=range]:hover::-moz-range-thumb {
    background:
        conic-gradient(rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.47) 13%,
            rgba(255, 255, 255, 0.91) 26%,
            rgba(255, 255, 255, 0.65) 39%,
            rgba(255, 255, 255, 0.41) 44%,
            rgba(255, 255, 255, 0.87) 50%,
            rgba(255, 255, 255, 0.41) 58%,
            rgba(255, 255, 255, 0.91) 69%,
            rgba(255, 255, 255, 0.43) 83%,
            rgba(255, 255, 255, 0.81) 91%,
            rgba(255, 255, 255, 0.85) 100%) padding-box,
        linear-gradient(var(--glow-color)) padding-box,
        linear-gradient(to bottom, #dcd3b3, #746b4f) border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

input[type=range]:disabled::-webkit-slider-thumb {
    background:
        conic-gradient(rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.47) 13%,
            rgba(255, 255, 255, 0.91) 26%,
            rgba(255, 255, 255, 0.65) 39%,
            rgba(255, 255, 255, 0.41) 44%,
            rgba(255, 255, 255, 0.87) 50%,
            rgba(255, 255, 255, 0.41) 58%,
            rgba(255, 255, 255, 0.91) 69%,
            rgba(255, 255, 255, 0.43) 83%,
            rgba(255, 255, 255, 0.81) 91%,
            rgba(255, 255, 255, 0.85) 100%) padding-box,
        linear-gradient(var(--medium-color)) padding-box,
        linear-gradient(to bottom, #aaaaaa, #52595f) border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

input[type=range]:disabled::-ms-thumb {
    background:
        conic-gradient(rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.47) 13%,
            rgba(255, 255, 255, 0.91) 26%,
            rgba(255, 255, 255, 0.65) 39%,
            rgba(255, 255, 255, 0.41) 44%,
            rgba(255, 255, 255, 0.87) 50%,
            rgba(255, 255, 255, 0.41) 58%,
            rgba(255, 255, 255, 0.91) 69%,
            rgba(255, 255, 255, 0.43) 83%,
            rgba(255, 255, 255, 0.81) 91%,
            rgba(255, 255, 255, 0.85) 100%) padding-box,
        linear-gradient(var(--medium-color)) padding-box,
        linear-gradient(to bottom, #aaaaaa, #52595f) border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

input[type=range]:disabled::-moz-range-thumb {
    background:
        conic-gradient(rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.47) 13%,
            rgba(255, 255, 255, 0.91) 26%,
            rgba(255, 255, 255, 0.65) 39%,
            rgba(255, 255, 255, 0.41) 44%,
            rgba(255, 255, 255, 0.87) 50%,
            rgba(255, 255, 255, 0.41) 58%,
            rgba(255, 255, 255, 0.91) 69%,
            rgba(255, 255, 255, 0.43) 83%,
            rgba(255, 255, 255, 0.81) 91%,
            rgba(255, 255, 255, 0.85) 100%) padding-box,
        linear-gradient(var(--medium-color)) padding-box,
        linear-gradient(to bottom, #aaaaaa, #52595f) border-box;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--height-track);
    border-radius: var(--rad-track);
    border: var(--border-track) solid transparent;
    background:
        linear-gradient(var(--dark-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

input[type=range].disabled::-webkit-slider-runnable-track {
    background:
        linear-gradient(var(--medium-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: calc(var(--height-track) - var(--border-track) * 2);
    border-radius: var(--rad-track);
    border: var(--border-track) solid transparent;
    background:
        linear-gradient(var(--dark-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

input[type="range"]::-moz-range-progress {
    box-sizing: border-box;
    height: calc(var(--height-track) - var(--border-track) * 2);
    ;
    border-radius: calc((var(--height-track) - var(--border-track) * 2) / 2);
    ;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), linear-gradient(var(--accent-color));
}

input[type="range"]:disabled::-moz-range-progress {
    background: var(--medium-color);
}

input[type=range]::-ms-track {
    width: 100%;
    height: var(--height-track);
    border: none;
    background: transparent;
    background-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    height: var(--height-track);
    border-radius: var(--rad-track);
    border: var(--border-track) solid transparent;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)) padding-box,
        linear-gradient(var(--accent-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

input[type=range]::-ms-fill-upper {
    height: var(--height-track);
    border-radius: var(--rad-track);
    border: var(--border-track) solid transparent;
    background:
        linear-gradient(var(--dark-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

input[type=range].disabled::-ms-fill-lower,
input[type=range].disabled::-ms-fill-upper {
    background:
        linear-gradient(var(--dark-color)) padding-box,
        linear-gradient(to bottom, #b8b8b8, #e8e8e8) border-box;
}

/*Responsive-DesktopFirst*/
@media only screen and (max-width: 2000px) {
    main {
        grid-template-columns: calc(var(--strip-width)*0.75) 1fr;
        gap: calc(var(--gap)*0.75);
        padding: calc(var(--gap)*0.75);
    }

    .window {
        top: calc(var(--gap)*0.75);
        left: calc((var(--gap)*2 + var(--strip-width))*0.75);
    }

    #nav-button {
        width: 72px;
    }

    #nav-button,
    .menu-button {
        height: 72px;
    }

    #nav-button svg,
    .menu-button svg {
        transform: scale(0.9);
        transform-origin: center;
    }

    #menu-strip {
        gap: calc(var(--gap)*0.75);
        padding: 12px;
    }

    #nav-container {
        bottom: calc(var(--gap)*0.75);
        right: calc(var(--gap)*0.75);
        margin-right: calc(var(--gap)*0.75);
    }

    #nav-strip {
        width: calc(var(--strip-width)*0.75);
        padding: calc(var(--gap)*0.75);
    }
}


@media only screen and (max-width: 1400px) {
    main {
        grid-template-columns: calc(var(--strip-width)*0.5) 1fr;
        gap: calc(var(--gap)*0.5);
        padding: calc(var(--gap)*0.5);
    }

    .window {
        top: calc(var(--gap)*0.5);
        left: calc((var(--gap)*2 + var(--strip-width))*0.5);
    }


    #nav-button {
        width: 48px;
    }

    #nav-button,
    .menu-button {
        height: 48px;
    }

    #nav-button svg,
    .menu-button svg {
        transform: scale(0.6);
        transform-origin: center;
    }

    #menu-strip {
        gap: calc(var(--gap)*0.5);
        padding: 8px;
    }

    #nav-container {
        bottom: calc(var(--gap)*0.5);
        right: calc(var(--gap)*0.5);
        margin-right: calc(var(--gap)*0.5);
    }

    #nav-strip {
        width: calc(var(--strip-width)*0.5);
        padding: calc(var(--gap)*0.5);
    }
}