/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#page_wrapper {
    display:flex;
    height: calc(100vh - 1rem - 20px);
    background: linear-gradient(135deg, #F7BEDD, #C0D3DB, #87CFCC);
    justify-content: center;
    align-items: center;
}

/* Grid takes remaining space */
#page_content {
    width: 100%;

    display: grid;
    grid-template-columns:
        1fr
        calc(min(100% - 2rem, 100vh - 5rem - 60px))
        1fr;
    grid-template-rows: 40px auto 0px;
    padding: 1rem;
    gap: 1rem;
}

/* Grid items */
#page_content>div {
    background: #60435F;
    border-radius: 8px;

    box-shadow: #333333 0px 4px 8px;
    font-size: 12px;
}



/* Game inside of page */
#gameBoard {
    /* grid-area: row-start / column-start / row-end / column-end */
    grid-area: 2 / 2 / 3 / 3;

    aspect-ratio: 1 / 1;

    justify-self: center;
    align-self: center;

    width: 100%;
    padding: 0.5rem;

    display: grid;
}

#page_content>#area1 {
    /* grid-area: row-start / column-start / row-end / column-end */
    grid-area: 1 / 2 / 2 / 3;
    height: 100%;
    width: 100%;
    border-radius: 80px;
    overflow: hidden;
    display:flex;
    justify-content:start;
    justify-self: center;
    align-self: end;
}