:root {
    --border-color: #291D4D;
    --dialog-background: #FFF3B4;
    
    --menu-background: #FFE8D2;
    --menu-border-color: #A48465;
    --menu-font-color: #3A160D;
    --menu-selected-background: #7fc2ff;
}

* {
    box-sizing: border-box;
}

body {
    background: #333;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;

}

/* .left {grid-area: bio;}
.right {grid-area: game;}


.grid-container{
    display: grid;
    grid-template-areas: 
    'bio bio game game game game game game game game';
    background-color: #7fc2ff;
} */

.container { 
    height: 100%;
    width: 100%;
    display: flex;
    transform: translateY(0%);
}


.left {width: 25%;}
.right {width: 75%;}

.game-container {
    width: 352px;
    height: 198px;
    margin: 0 auto;
    outline: 1px solid #fff;
    transform: scale(2.5) translateY(40%);
}

.game-container canvas {
    image-rendering: pixelated;
}

.bio-container {
    position: relative;
    display:block;
    transform: scale(0.9) translateY(0%) translateX(5%);
    margin: 0 auto;
    top: 66%;
}


.instructions{
    color: white;
    font-size: 6px;
}