body {
    margin: 0;
}

#background {
    width: 100%;
    position: absolute;
    z-index: -2;
    height: 100%;
}

#ui {
    display: grid;
    grid-template-areas: 
    "head head"
    "controls marketplace"
    "none none"
    "log notes";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 4% auto;
}

#header {
    grid-area: head;
    text-align: center;
    color: beige;
    background-color: rgba(128, 0, 128, 0.6);
}

#controls_and_stats {
    grid-area: controls;
}

#marketplace {
    grid-area: marketplace;
}

#log {
    grid-area: log;
}

#notes{
    grid-area: notes;
}

#controls_and_stats_menu {
    max-width: 300px;
}

#tama{
    position: fixed;
    transform: translateX(-50%) translateY(-50%);
    top: 55%;
    left: 50%;
    z-index: -1;
    transition:all 2s linear;
}

#tama > #tama_image {
    max-width: 150px;
    z-index: inherit;
}

#tama > p {
    position: fixed;
    margin: 0;
    top: 80%;
    left: 40%;
    transform: translateX(-50%) translateY(-50%);
}

#tama > p > span {
    background-color: rgba(128, 0, 128, 0.6);
    color: beige;
    font-weight: bolder;
}

h1 {
    margin-bottom: 0;
    margin-top: 0;
}

#config {
    border: 8px double black;
    display: inline-block;
    padding: 5px;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-color: purple;
}

#config > h3 {
    text-align: center;
    margin: 1px;
}

#marketplace_container > * {
    display: block;
    margin-left: auto;
    margin-right: 0;
    background-color: rgba(255,255,255, 0.8);
}

#marketplace_menu_button, #notes_menu_button {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

#controls_and_stats_menu, #marketplace_marketplace_container, #log_container, #notes_text {
    color: beige;
    background-color: rgba(128, 0, 128, 0.8);
    border: 8px double black;
    padding: 5px;
    font-size: larger;
}

#log_container {
    max-width: 300px;
    max-height: 200px;
    overflow-y:auto;
}