@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

canvas {
    cursor: crosshair;
    touch-action: none;
}

body {
    background-color: #0274ff;
}

body, #settings button span {
    font-family: "Lilita One", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000,
                 0.5px 0.5px #000, -0.5px -0.5px #000, 0.5px -0.5px #000, -0.5px 0.5px #000;
               
}

#settings {
    display: inline-block;
    vertical-align: top;
    color: white;
}

#tileInfo {
    border: 3px solid black;
    border-radius: 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    background-color: #746385;
    color: white;
}

#tileInfo img {
    margin-right: 10px;
}

#tileWrapper {
    border: 3px solid black;
    border-radius: 5px;
    padding: 5px;
    background-color: #3c4259;
}

#tileWrapper > div {
    border: 3px solid black;
    border-radius: 5px;
    padding: 5px;
    background-color: #746385;
}

#tileWrapper > div:not(:last-child) {
    margin-bottom: 5px
}

#tileWrapper span {
    cursor: pointer;
    padding: 5px;
    height: 100%;
    aspect-ratio: 1 / 1;
    display: inline-block;
    min-width: 24px;
    text-align: center;
    border-radius: 10px;
}

#tileWrapper span:not(:last-child) {
    margin-right: 3px
}

#tileWrapper span {
    background-color: none;
}

#tileWrapper span:hover {
    background-color: #707090;
}

#tileWrapper span:active {
    background-color: #505070;
}

#selected {
    background-color: #555565;
}

#settings button {
    padding: 5px 15px;
    background-color: #1f58ff;
    border: 2px solid black;
    transform: skew(-7deg);
    cursor: pointer;
    margin-right: 1%;
}

#settings button:hover {
    background-color: #3070ff;
}

#settings button:active {
    background-color: #5090ff;
}

#saveImg {
    margin-left: 1%;
}

#settings button span {
    transform: skew(7deg);
    display: inline-block;
    color: white;
    /* background-color: #1f58ff; */
}

textarea {
    /* field-sizing: content; why firefox */
    width: 100%;
}