body {
    background: url("../pics/bg/bricks3.png");
}

.layout {
    display: grid;
    grid-template-areas:
        "header header"
        "main sidebar"
        "footer footer";
    grid-template-rows: 5rem auto 5rem;
    grid-template-columns: auto 20rem;
    height: 100vh;
    width: 100%;
    /*z-index: 0;*/
}
.layout > header {
    grid-area: header;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.layout > main {
    grid-area: main;
    height: min(calc(100vh - 14rem), calc((100vw - 24rem) * 10 / 16));
    aspect-ratio: 16/10;
    padding: 2rem;
    /*margin: auto;*/
    align-self: center;
    justify-self: center;
    /*z-index: 0;*/
}
.layout > #sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}
.layout > footer {
    grid-area: footer;
    /*z-index: 0;*/
}

#header-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.eyeball {
    height: 72px;
}
#logo {
    height: 64px;
    margin: 0 1rem;
}

/* MAIN SELECTION CONTAINER */
#world {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    position: relative;
}
#world > img {
    position: absolute;
    width: 100%;
    height: auto;
}
.homeselect {
    position: absolute;
    display: block;
    width: 20%;
    aspect-ratio: 1;
    /*border: solid;*/
}
.display {
    display: none;
    pointer-events: none;
    z-index: 10;
}
#house:hover ~ #housedisplay,
#castle:hover ~ #castledisplay,
#lab:hover ~ #labdisplay,
#tree:hover ~ #treedisplay {
    display: block;
}
.hover-tooltip {
    display: none;
    z-index: 11;
    position: absolute;
}
#house:hover .hover-tooltip,
#castle:hover .hover-tooltip,
#lab:hover .hover-tooltip,
#tree:hover .hover-tooltip {
    display: block;
}
.select {
    z-index: 12;
}

#logo {
    z-index: 5;
}

/* footer stuff */

.wrapper {
    display: flex;
    align-items: center;
    overflow-x: clip;
    /*overflow-y: visible;*/
    max-width: 100vw;
}

.card img {
    z-index: 20;
}

#mobile {
    display: none;
}

@media (max-width: 60rem) {
    .layout {
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
        grid-template-rows: 5rem auto auto 5rem;
        grid-template-columns: auto;
        height: max(100vh, auto);
    }

    /*
    #world {
        display: none;
    }
    #mobile {
        display: flex;
        flex-flow: column;
    }
    */
    .layout > main {
        /*
        margin: 0;
        width: auto;
        height: auto;
        */
        height: max(calc((100vw - 4rem) * 10 / 16), 13rem);
    }
    /*
    .layout > #sidebar {
        width: 100%;
        flex-flow: row wrap;
    }
    */
}