body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: url("../AsciiWorld/assets/dot.png") 4 0, default
}


body {
    background-color: gray;
}

#game-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

canvas {
    background-color: rgb(31, 31, 31);
    border: 5px solid white;
}

#player-info, #world-info, #player-color-container {
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 200px;
    margin: 20px;
    top: 20px;
    left: 50px;
    align-self: flex-start;
    align-items: center;
    background-color: rgb(31, 31, 31);
    border: 5px solid white;
    /* Disable highlighting */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#player-color-container {
    height: 100px;
}

#player-colors {
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 80px;
}

.color-box {
    margin: 10px;
    width: 40px;
    height: 40px;
    border-radius: 6px;
}

.color-box:hover {
    opacity: 0.7;
}

#player-red { background: red }
#player-blue { background: blue }
#player-green { background: green }

#player-info-title, #world-info-title, #player-color-title {
    margin-bottom: 22px;
    border-bottom: 2px solid white;
    font-weight: bold;
}

#player-color-title {
    margin-bottom: 0px;
}

.player-info-text, .world-info-text, .player-color-text {
    color: white;
    margin-bottom: 10px;
}

#player-position-container, #mouse-position-container, #mouse-tile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}


@font-face {
    font-family: "unscii-8";
    src: url("../AsciiWorld/assets/unscii-8.woff");
}