@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap');

:root {
    --background: black;
    --lines: white;
    --title-score: white;
    --score: white;
}

* {
    margin: 0;
}

body {
    background-color: var(--background);
    padding: 10px;
}

.container, .container-score {
    margin: 0 auto;
    min-width: 270px;
    max-width: 700px;
    grid-template-columns: 33.33% 33.33% 33.33%;
}

.container {
    margin-top: 2vh;
    display: grid;
}

.container-score {
    display: grid;
    margin-top: 10vh;
    margin-bottom: 0;
    text-align: center;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

.css-cell {
    line-height: 24vh;
    height: 24vh;
    background-color: transparent;
    font-family: 'Comfortaa', sans-serif;
    color: white;
    font-size: calc(5vw + 5vh);
    text-align: center;
    cursor: pointer;
}


.square-top {
    border-right: 4px solid var(--lines);
    border-left: 4px solid var(--lines);
}

.square-left {
    border-top: 4px solid var(--lines);
    border-bottom: 4px solid var(--lines);
}

.square {
    border: 4px solid var(--lines);
}

.square-right {
    border-top: 4px solid var(--lines);
    border-bottom: 4px solid var(--lines);
}

.square-bottom {
    border-left: 4px solid var(--lines);
    border-right: 4px solid var(--lines);
}

.title-score {
    color: var(--title-score);
}

.player-1-score,
.ties,
.player-2-score {
    font-size: 40px;
    margin: 0 auto;
    color: var(--score);
}