body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    /* checkered background */
    background-color: #ffffff;
    background-image:
            linear-gradient(rgba(159, 148, 148, 0.5) 2px, transparent 2px),
            linear-gradient(90deg, rgba(119, 113, 113, 0.5) 2px, transparent 2px),
            linear-gradient(rgba(51, 49, 49, 0.28) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 0, 0, 0.28) 1px, transparent 1px),
            url('../assets/snake.png');
    background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px,1920px 1080px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;

}
h1,h2{
    font-weight: lighter;
}
h2{
    font-size: 1.5em;
    margin: 0.5em;
}
h1{
    text-align: center;
    margin: 0px;
    font-size: 3em;
    line-height: 0.8em;
}
header{
    text-align: center;
}
label{
    font-weight: bolder;
    margin-bottom: 0.5em;
}
button{
    padding: .5em;
    border-radius: 10em;
    background-color: rgb(255, 159, 80);
    color: white;
    font-size: 1.2em;
    letter-spacing: .15em;
    width: 8em;
    border: none;
    box-shadow: 0 0 0.5em #6c6c6c;
}
button:active{
    background-color: rgb(218 136 69);
    transform: translateY(0.2em);
}
label{
    font-size: 1.5rem;
    font-weight: lighter;
}
.noMargin{
    margin: 0;
}
.marginBottom{
    margin-bottom: 3em;
}
.frame{
    margin: 10%;
}
.flexed{
    display: flex;
    justify-content: center;
}

.canvas{
    position: absolute;
    top: 10%;
    left: 10%;
    /*transform: translate(-50%, -50%);*/
}

#newGameButtonDiv, #sessionIdButtonDiv, #sessionIdInputDiv, #sessionIdLabelDiv{
    text-align: center;
}

/* main menu */
main{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
input{
    border-color: black;
    border-width: thin;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding: .25em;
    font-size: large;
    width: 10em;
    border-radius: .3em;
    text-align: center;
}
#newGameLabelDiv{
    margin-bottom: 1.5em;
}
#menuBanner{
    width: 20%;
    height: 20%;
}
#enterLobby{
    display: flex;
    justify-content: space-around;
    margin-top: 4%;
}
#name, #sessionId{
    text-align:center;
}
#MainMenuDiv{
    display: flex;
    justify-content: space-around;
}
#marginEnterName{
    margin-bottom: 2em;
    margin-top: 3.5em;
}

/* Lobby */
li{
    list-style-type: none;
    margin: 0.4em;
    padding: 0;
}
ul{
    padding: 0;
    font-size: 1.4em;
    margin: 0.5em;
}
select{
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding: .25em;
    font-size: large;
    width: 10em;
    border-radius: .3em;
}
#lobby{
    display: flex;
    justify-content: space-around;
    align-items: baseline;
    margin-right: 0;
}
#sessionIDDIV{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    width: 12em;
}
#playerTable{
    width: 12em;
    height: 15em;
    align-items: center;
}
#mapSelector{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
#sessionIDtext{
    text-align: center;
    font-size: 1.1em;
}
#lobbyHeadlineDIV{
    display: flex;
    justify-content: center;
    padding: 0.8em;
}
#lobbyHeadline{
    font-size: 3em;
}
#lobbyHeadlineDIV, #lobby, #startGameDIV{
    margin-left: 4%;
    margin-right: 4%;
}
#buttonexitLobby, #buttonexitGame{
    width: 5.5em;
}
#sessionIDtext{
    font-size: large;
    margin: 1.25em;
    padding: 0.25em;
    height: 2em;
    line-height: 1.5em;
}

/* Player */
#player0{
    color: #349335;
}
#player1{
    color: #34abf5;
}
#player2{
    color: #7761e5;
}
#player3{
    color: #fdee48;
}

/* map */
canvas{
    margin-left: 4em;
    margin-right: 4em;
    background-color: transparent;
}
#frameGame{
    margin: 2%;
}

/* tables */
table {
    border-collapse: collapse;
    table-layout: auto;
    width: 130%;
    background: white;
    text-align: left;
    border-style: solid;
    border-color: black;
    border-width: thin;
}
th{
    padding: 0.3rem;
    background: lightgray;
}
td{
    padding: 0.3rem;
}
#playerTable{
    display: flex;
    justify-content: center;
    flex-direction: column;
}