body {
    margin: 0;
    padding: 0;
    background-color: aqua;
    user-select: none;
    /* CSS3 */
    -moz-user-select: none;
    /* Firefox */
    -webkit-user-select: none;
    /* Safari、Chromeなど */
    -ms-user-select: none;
    /* IE10かららしい */
}

#loading {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba( 0, 0, 0, 0.55);
    z-index: 100;
}

#loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    text-align: center;
    color: #4aeb44;
    z-index: 101;
}

.spinner {
    width: 40px;
    height: 40px;
    background-color: #4aeb44;
    margin: 50px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px)
    }
    50% {
        -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

canvas {
    background-color: white;
    z-index: 11;
}

canvas:active {
    cursor: crosshair;
}

canvas.eraser:active {
    cursor: url("../img/circle.svg") 12 12, crosshair;
}

#paletteContainer {
    position: fixed;
    padding: 0.5vh;
    top: 0px;
    right: 0px;
    z-index: 11;
}

#paletteContainer div {
    cursor: pointer;
    padding: 0.18vh;
    margin-bottom: 0.4vh;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0);
    border: solid 2px rgba(0, 0, 0, 0);
}

#paletteContainer div.color {
    font-size: 3.3vh;
}

#paletteContainer div img {
    display: block;
    width: 3.3vh;
    height: 3.3vh;
}

#paletteContainer div.selected {
    background-color: rgba(255, 255, 255, 0.55);
    border: solid 2px #000;
}

#paletteContainer div#trash:active {
    background-color: rgba(255, 255, 255, 0.55);
    border: solid 2px #000;
}

*.iframe {
    border: solid 1px #808080;
    width: 800px;
    height: 120px;
    padding: 0.5em;
    overflow: auto;
}

#error {
    color: red;
}