*,
*:before,
*:after
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

body
{
    font-family: 'Roboto Mono', monospace;
    font-size: 28px;

    color: lightgray;
    background-color: #000;
}

main
{
    display: flex;

    width: 100%;
    margin-right: auto;
    margin-left: auto;

    flex-flow: row wrap;
    justify-content: center;
}

.letter
{
    width: 1.7em;
    height: 1.7em;
    margin: 5px;
    padding: 5px;

    cursor: pointer;
    text-align: center;

    border: 3px solid gray;
    border-radius: 15px;
}

.letter:hover
{
    color: white;
    border: 3px solid white;
    background-color: #222;
}

.reset
{
    font-size: 48px;

    cursor: pointer;

    color: green;
}

.reset:hover
{
    color: white;
}

.board
{
    font-size: 48px;

    width: 100vw;
    min-height: 60px;
    margin-top: 50px;
    margin-bottom: 50px;

    text-align: center;
}

.field
{
  display: flex;
  flex-flow: row wrap;
    width: 45vw;
    min-height: 280px;

    text-align: center;
}