body {
    background-color: #000;
    color: #fff;
    height: 100vh;
    overflow: hidden;
    text-align: center;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


#load-button {
    display: none;
}

li {
    text-decoration: none;
}

.sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.left-sidebar {
    justify-content: space-around;
    left: 0;
}

.right-sidebar {
    justify-content: stretch;
    right: 0;
}

.content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 50%;
}

.canvas-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto;
    padding: 16px 0 16px 0;
    position: absolute;
    top: 0;
    bottom: 0;
}

.clickable:hover {
    cursor: pointer;
    filter: invert(0.2);
    user-drag: none; /* For modern browsers */
    -webkit-user-drag: none; /* For Safari */
    draggable: false; /* For Firefox */
}

.clickableLayer:hover {
    cursor: pointer;
    background-color: #222;
}

.clickableColor:hover {
    cursor: pointer;
    border-color: #ccc;
}

.selectedColor {
    border-color: #aaa !important;
}

.selectedTool {
    filter: invert(0.5);
}

.grid-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 16px 0 16px 0;
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
}

.color {
    border: 2px solid #fff;
    height: 30px;
}

.layer-list {
    padding: 0;
}

.layer {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin: 16px;
    background-color: #111;
    border: 2px solid #fff;
    border-radius: 10px;
    padding: 4px;
}

.layer-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.ls-section {
    margin-top: auto;
    margin-bottom: 16px;
}

.lsButtons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.selectedLayer {
    background-color: #333 !important;
}

.shortcut-list ul {
    display: flex;
    flex-direction: column;
    align-items: start;
}