html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}
header {
    height: 20px;
    background-color: red;
    top: 0;
    padding: 10px;
    color: white;
}
header a {
    color: darkblue;
}
.basad {
    color: white;
}
.c-menu-button {
    font-size: 170%;
}
.c-menu-button a {
    color: white;
    text-decoration: none;
}

.c-game-area {
    display: flex;
}

.c-connect-form input[type="text"], .c-connect-form input[type="button"] {
    font-size: 120%;
}

#id-startgame-button {
    background-color: green;
    color: white;
    transition: all 0.3s;
}

#id-startgame-button:hover {
    background-color: lightgreen;
}

#id-timeout-counter {
    width: 90%;
    margin: 10px auto;
    appearance: none;
    border: none;
}

.c-players-info {
    width: 50vw;
    overflow: hidden;
    transition: all 0.3s;
}

#id-qrcode {
    margin: 30px auto;
    display: inline-block;
}

#id-turn-info,
#id-success-info,
#id-score-info {
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
    transition: all 0.3s;
    position: fixed;
    width: 100%;
    top: 0;
    height: 0px;
    text-align: center;
    z-index: 101;
    overflow: hidden;
    padding-top: 0;
}

#id-turn-info.c-info {
    top: 30vh;
    height: 10vh;
    padding-top: 20px;
}

#id-success-info.c-info {
    top: 40vh;
    height: 10vh;
    background-color: rgba(0, 255, 0, 0.8);
    padding-top: 20px;
}

#id-score-info.c-info {
    top: 40vh;
    height: auto;
    background-color: rgba(0, 0, 255, 0.8);
    padding-top: 20px;
}

@media (max-width: 950px) {
    .c-game-area {
        flex-direction: column-reverse;
    }
    .c-game-area .c-players-info {
        margin: 0 auto;
        width: 100%;
    }

    .c-container {
        width: 20%;
        height: 23vw; /* yes - I use VW to maintain width / height ratio */
        margin: 0.5%;
    }
}