styles.css

@import url('https://fonts.googleapis.com/css2?family=Sono&display=swap');
@import "./css/app.css";
@import "./css/board.css";
@import "./css/card.css";
@import "./css/chat.css";
@import "./css/deck.css";
@import "./css/form.css";
@import "./css/game.css";
@import "./css/harbor.css";
@import "./css/intersection.css";
@import "./css/menu.css";
@import "./css/lobby.css";
@import "./css/overlay.css";
@import "./css/panel.css";
@import "./css/road.css";
@import "./css/tile.css";
@import "./css/tooltip.css";

:root {
    /* the board with padding is about 35 units tall */
    font-size: calc(100vh / 40);
    --tile-width: 5rem;
    --road-width: 1rem;
    --road-z: 5;
    --tile-z: 10;
    --intersection-z: 15;
    --harbor-z: 20;
    --tooltip-z: 95;
    --panel-z: 100;
    --chat-z: 105;
    --overlay-z: 110;
}

* {
    font-family: 'Sono', sans-serif;
    font-size: 1.2rem;
}

html, body, #root {
    margin: 0rem;
    width: 100%;
    height: 100%;
    background-color: #f5f5dc;
}

@media screen and (max-width: 600px) {
    :root {
        font-size: 60%;
    }
}