@font-face {
    font-family: Metro;
    src: url(../resources/metropolis-extra-bold.otf);
}

@font-face {
    font-family: Ubuntu;
    src: url(../resources/Ubuntu-Medium.ttf);
}

@font-face {
    font-family: Roboto;
    src: url(../resources/Roboto.ttf);
}

::selection {
    background: #696969;
    color: #1d1d1d;
}

* {
    margin: 0;
    padding: 0;
}

body {font-family: Roboto;
    background: #1c1c1c;
    color: white;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
display: flex;
}

canvas {
    cursor: crosshair;
}

.container {
    height: 100vh;
    display: flex;
    width: 8em;
}

#toolbar {
    display: flex;
    flex-direction: column;
    padding: 11px;
    width: 100%;
    background-color: #111111;
    cursor: default;
    border-bottom-right-radius: 9px;
    border-top-right-radius: 9px;
    height: calc(100% - 23px);
    text-align: center;
}

#toolbar * {
    margin-bottom: 10px;
    cursor: default;
}

#toolbar label {
    font-size: 12px;
    margin-bottom: 1px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type=number] {
    -moz-appearance: textfield;
    height: 20px;
    padding-left: 5px;
}

#lineWidth {
    width: calc(100% - 7px) !important;
}

#toolbar input {
    width: 100%;
    background-color: #242424;
    color: white;
    border: 1px solid #404040;
    outline: 1px solid #242424;
    border-radius: 5px;
    overflow: hidden;
}

#toolbar #stroke {
    border: none;
    background: none;
    outline: none;
}

#toolbar button.clear {
    background: #ff7070;
    border: none;
    border-radius: 5px;
    color: white;
    padding: 3px 5px;
    transition: ease 0.3s;
}

.last {
    margin-bottom: 0px !important;
}

.strokec:hover {
    cursor: cell !important;
}

.linewidth:hover {
    cursor: text !important;
}

#toolbar .clear:hover {
    background: #d04141;
    cursor: pointer;
}

#toolbar .btn {
    padding: 3px 5px;
    border-radius: 5px;
    background-color: #242424;
    color: white;
    border: 1px solid #404040;
    outline: 1px solid #242424;
    cursor: pointer;
    transition: ease 0.3s;
}

#toolbar .btn:hover {
    background-color: #151515;
    color: white;
    border: 1px solid #2b2b2b;
    outline: 1px solid #151515;
    cursor: pointer;
}