styles.css

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 98%;
    width: 100svw;
    /* text-align: -webkit-center; */
    font-family: 'Inter', sans-serif;
    /* font-family: 'Shantell Sans', cursive; */
    --font-family: 'Shantell Sans', 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;
}

h1 {
    /* width: 1000px; */
    /* display: flex; */
    /* justify-content: center; */
    font-size: 3em;
    font-family: var(--font-family);
    /* text-align: -webkit-center; */
}

h3 {
    font-size: 1.5em;
    font-family: var(--font-family);
}

.board {
    display: -webkit-box;
    display: -ms-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    /* align-content: center; */
    max-height: 80vh;
    max-height: 80svh;
    text-align:left;
    padding: 0 15px;
}


p {
    margin: 0 0 0.2em 0;
    padding-right: 20px;
    font-size: 1.4em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.container {
    display: block;
    text-align: center;
}

.user-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

@media only screen 
    and (max-width: 700px)
    /* and (-webkit-device-pixel-ratio: 2) */
{ 
    .board {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        /* align-content: center; */
        max-height: none;
        max-height: none;
        text-align:left;
        margin: 0 auto;
    }

    p {
        margin: 0 0 0.2em 0;
        padding-right: 0px;
        padding-left: 10px;
        font-size: 1.5em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    h3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        /* justify-content: center; */
        font-size: 1.5em;
        font-family: var(--font-family);
        padding-left: 10px;
    }
 }