.layout {
    display: grid;
    max-width: 1000px;
    grid-template:
        "header header header"
        "nav nav nav"
        "leftsidebar main rightsidebar"
        "footer footer footer"
        / 250px 600px 150px;
}

hr {
    border: dashed white 1px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.leftsidebar {
    grid-area: leftsidebar;
    background: 0;
    color: var(--textcolour);
    font-size: var(--fontsize);
}

.playingtable {
    border: 1px solid rgba(255, 127, 194, 0.59);
    width: 99%;
    margin: 5px;
}

.playingtable td, th {
    border: 1px solid rgba(255, 127, 194, 0.59);
}

.playing {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: var(--padding);
    font-size:smaller;
}

.rightsidebar {
    grid-area: rightsidebar;
    background: 0;
    color: var(--textcolour);
    font-size: var(--fontsize);
}

.main {
    grid-area: main;
    padding: var(--padding);
    margin: var(--margin);
    border: var(--border);
    background: var(--mainbg);
    color: var(--textcolour);
    font-size: var(--fontsize);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: center;
    
}

.gamelog {
    border: 1px solid white;
    width: 99%;
    margin: 5px;
}

.gamelog th , td {
    border: 1px solid white;   
}

.gamelog img {
    width: 90%;
    margin: 3px;
}

@media (max-width: 800px) {
  .layout {
    grid-template:
        "header"
        "nav"
        "rightsidebar"
        "main"
        "leftsidebar"
        "footer"
    }
  }