* {
    overflow: hidden;
    box-sizing: border-box;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    --color1: rgb(250,250,250);
    --color2: rgba(235,235,235, 0.9);
    --color3: rgb(120,120,120);
    --color4: rgb(255, 150, 255);
    --color5: rgb(150, 255, 255);
    --unit: 8px;
    --font-size: 16px;
    touch-action: none;
}
body {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
    background-color: var(--color1);
}
nav {
    margin: var(--unit);
    font-size: var(--font-size);
    height: calc(3 * var(--unit));
    display: flex;
    align-items: center;
    gap: var(--unit);
}
#download {
    position: absolute;
    right: var(--unit);
    cursor: pointer;
    z-index: 1;
    width: calc(10 * var(--unit));
    height: calc(3 * var(--unit));
    border-radius: var(--unit);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color3);
    background-color: var(--color2);
}
#user {
    cursor: pointer;
    z-index: 1;
    width: calc(8 * var(--unit));
    height: calc(3 * var(--unit));
    border-radius: var(--unit);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color3);
    background-color: var(--color2);
}
.file {
    cursor: pointer;
    z-index: 1;
    width: calc(10 * var(--unit));
    height: calc(3 * var(--unit));
    border-radius: var(--unit);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color3);
    background-color: var(--color2);
}
#new_file {
    cursor: pointer;
    z-index: 1;
    width: calc(2 * var(--unit));
    height: calc(2 * var(--unit));
    border-radius: var(--unit);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color3);
    background-color: var(--color2);
}
#tools {
    color: var(--color3);
    background-color: var(--color2);
    height: calc(100vh - 6 * var(--unit));
    width: calc(8 * var(--unit));
    position: absolute;
    top: calc(5 * var(--unit));
    left: var(--unit);
    border-radius: var(--unit);
}
.tool {
    width: calc(6 * var(--unit));
    height: calc(6 * var(--unit));
    border-radius: var(--unit);
    margin: var(--unit);
    background-color: var(--color1);
}
.tool svg {
    z-index: 999;
    width: calc(6 * var(--unit));
    height: calc(6 * var(--unit));
    border-radius: var(--unit);
}
#right_panel {
    position: absolute;
    width: calc(32 * var(--unit));
    top: calc(5 * var(--unit));
    left: calc(100vw - 33 * var(--unit));
    display: flex;
    flex-direction: column;
    gap: var(--unit);
}
.panel {
    position: relative;
    width: calc(32 * var(--unit));
    border-radius: var(--unit);
    background-color: var(--color2);
    font-size: var(--font-size);
    color: var(--color3);
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
}
.panel fieldset {
    border: none;
}
.panel input {
    border: none;
    color: var(--color3);
    background: var(--color2);
}
.panel label {
    font-size: var(--font-size);
    color: var(--color3);
}
.panel .panel_title {
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--color3);
}
main {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}
#svg {
    z-index: 0;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
}
#stroke_opacity {
    width: calc(12* var(--unit));
    background: var(--color3);
}
#stroke_width {
    width: calc(6 * var(--unit));
}