html, body {
    height  : 100%;
    padding : 0;
    margin  : 0;
}

body {
    background-color: rgb(46, 21, 21);
    display: grid;  
    overflow: clip;
}

#menu {
    display: grid;
    grid-template-columns: minmax(10rem, 20rem) auto minmax(10rem, 20rem); 
    background-image: url("img/background_menu_01.png");
    background-size: cover;
    background-repeat: no-repeat;

    & > #select {
        grid-column: 3;
        display: grid;
        /* grid-template-columns: minmax(10rem, 20rem) auto minmax(10rem, 20rem); */
        grid-template-rows: auto; 
        background-color: rgb(216, 190, 157);
        border : ridge 4px rgb(161, 129, 58);      
    
        & > menu {
            display: grid;
            grid-auto-flow: row;        
            padding: 0.5rem;
            height: max-content;

            & > button {
                background-color: rgb(182, 151, 83);
                border: 4px outset rgb(161, 129, 58);
                height: max-content;
                padding: 0.5rem 0rem;

                &:hover {
                    filter: brightness(120%);
                }

                &:active {
                    border: 4px inset rgb(161, 129, 58);
                }
            }

        }
    }

    & > menu {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        grid-auto-flow: row; 
        padding: 0.5rem;
        height: max-content;
        width: max-content;
        background-color: rgb(216, 190, 157);
        border : ridge 4px rgb(161, 129, 58);
        justify-self: center;
        align-self: center;
        
        & > button {
            background-color: rgb(182, 151, 83);
            border: 4px outset rgb(161, 129, 58);
            height: max-content;
            width: 10rem;
            padding: 0.5rem 0rem;
            
            &:hover {
                filter: brightness(120%);
            }
            
            &:active {
                border: 4px inset rgb(161, 129, 58);
            }
        }
    }

    & > #prev {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-rows: 11rem auto;

        & > #sample {
            background-color: rgb(216, 190, 157);
            background-size: cover;
            background-repeat: no-repeat;
            border : ridge 4px rgb(161, 129, 58);
        }

        & > #discription {
            background-color: rgb(216, 190, 157);
            border : ridge 4px rgb(161, 129, 58);
            border-top: none;
            text-align: center;
            
            & > button {
                background-color: rgb(182, 151, 83);
                border: 4px outset rgb(161, 129, 58);
                height: max-content;
                width : 10rem;
                padding: 0.5rem 0rem;
                
                &:hover {
                    filter: brightness(120%);
                }
                
                &:active {
                    border: 4px inset rgb(161, 129, 58);
                }

            }
        }
    }
}

#game {
    display: grid;
    grid-template-columns: minmax(15rem, 25rem) auto minmax(15rem, 25rem);
    grid-template-rows: 30rem auto;

    & > #hero {
        width: 15rem;
    }

    & > #output {
        grid-column: 2;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: larger;
        border : ridge 6px rgb(161, 129, 58);
        border-radius: 8px 8px 0 0;
        color: rgb(129, 102, 26);
        text-shadow: -1px -1px 1px gold, 1px 1px 1px black;
        background-color: rgb(37, 37, 35);
        backdrop-filter: blur(2px);
        padding: 0.5rem 1rem;
        margin: 0;
        pointer-events: none;
        margin-top: 15rem;
    }

    & > #choice {
        grid-column: 2;
        background-color: rgb(82, 11, 11);
        height: max-content;
        border : ridge 6px rgb(161, 129, 58);
        border-radius: 0 0 8px 8px;
        border-top: none;
        user-select: none;
        & > button {
            border: none;
            border-radius: 4px;
            font-size: 100%;
            font-weight: bold;
            color : rgba(255, 233, 193, 0.74);
            background-color: rgba(255, 179, 179, 0.096);
            box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.384);
            height: 3rem;
            margin: 0.3rem;
            user-select: none;
    
            &:hover {
                color: rgb(224, 165, 38);
                text-shadow: 0px 0px 5px rgb(255, 217, 145);
                background-color: rgba(255, 159, 16, 0.404);
            }
        }
    }

    & > #inventory {
        width: 15rem;
    }
}

#main_title {
    font-family: 'Griffy';
    font-size: 400%;
    color: rgb(165, 133, 29);
    text-shadow: -1px -1px 1px white, 1px 1px 1px black;
    position: absolute;
    justify-self: center;
}


.hide {
    display: none !important;
}