/*Core element styles*/
:root{
    --major-txt-color: #851200;
    --minor-txt-color: #ffede3;
    --bg-color: #210401;
    --workspace-color: #bd8754;
    --outline-color: #b81800;
    --table-color: aliceblue;
    --table-lines: #4db3c9;
}

* {
    font-size: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700; /*bold*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    color: var(--major-txt-color);
    background-color: var(--bg-color);
}

/*Site-wide element styles*/
body{
    min-height: 100vh;
}

header{
    z-index: 100;
    background-color: transparent;
}

main{
    z-index: 50;
    background-color: transparent;
}

footer{
    z-index: 0;
    background-color: transparent;
}

h1{
    font-family: Garamond;
    font-size: 3rem;
    text-align: center;
    -webkit-text-stroke: .1rem var(--outline-color);
    text-shadow: 0px 3px 6px black;

    background-color: transparent;
}
h2{
    font-family: Garamond;
    font-size: 1.2rem;
    padding-left: 0.6em;
    padding-top: 0.6em;

    background-color: transparent;
}

p:not(.fineprint){
    width: 90%;
    padding-left: 0.6em;
    padding-top: 0.6em;

    color: var(--minor-txt-color);
    font-weight: 100;
    background-color: transparent;
}

a:link{
    font-size: .85rem;
    color: var(--outline-color);

    background-color: transparent;
}
        a:visited{
            color: var(--major-txt-color);
        }
        a:hover{
            color: var(--workspace-color);
        }
        a:active{
            color: var(--minor-txt-color);
        }


table{
    background-color: var(--table-color);

    width: 100%;

    overflow: scroll;
}
        tbody, tr{
            background-color: inherit;
            width: 100%;
        }
                th, td{
                    background-color: inherit;

                    overflow: hidden;
                }

table, th, td{
    border: 1px solid var(--table-lines);
    border-collapse: collapse;
}

/*Site-wide class styles*/
.img_container{
    display: flex;
    justify-content: center;

    align-self: inherit;
    background-color: inherit;
}

.table_container{
    display: flex;

    width: 120%;
    padding: 0.6em;

    background-color: transparent;

    overflow: scroll;
}

.logo{
    position: absolute;   
    max-width:100%;
    max-height: 100%;

    display: block;
    padding: .2em .2em 0 .2em;

    background-color: inherit;
}

input[type="button"].menu{
    width: 20%;
    height: 100%;
    min-height: 50px;
    min-width: 90px;
    border-radius: 15%;
    
    background-color: var(--major-txt-color);
    border-color: var(--outline-color);
    color: var(--bg-color);
    font-size: 1.2rem;

    z-index: 53;
}
        input[type="button"].menu:hover{
            background-color: var(--outline-color);
            border-color: var(--major-txt-color);
        }
    
        input[type="button"].menu:active{
            background: var(--outline-color);
            border-color: var(--major-txt-color);
            color: var(--minor-txt-color);
            box-shadow: 0 0 6px 6px var(--minor-txt-color);
        }

input[type="button"].current{
    color: var(--minor-txt-color);
    box-shadow: 0 0 6px 6px var(--minor-txt-color);

    z-index: 52;
}

.workspace{
    grid-area: workspace;
    position: absolute;

    width: 90%;
    height: 100%;
    border: 4px;
    top: 0;
    bottom: 0;

    background-color: var(--workspace-color);
    border-color: var(--minor-txt-color);
    border-radius: 6px;
    
    overflow: scroll;
}

.fineprint{
    display: flex;

    position: fixed;
    bottom: .6em;
    left: .6em;

    z-index: 1;
    
    font-size: .85rem;
    align-content: end;

    background-color: transparent;      
}

/*quickroll.html class styles*/
.quickroll{
    display: grid;
    grid-template-columns: 1fr minmax(220px, 55%) 1fr;
    grid-template-rows: minmax(250px, 60vh) minmax(30px, 5fr) 1fr;
    grid-template-areas:
        ". header ."
        ". main ."
        ". footer .";
}

.quickroll > header{
    grid-area: header;
    top: 0;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

    background-color: transparent;
}
        .quickroll .img_container{
            top: 0;
            height: 40vh;
            min-height: 100px;
            width: 100%;
        }
        
        .quickroll h1{
            padding: .3em 0 .6em 0;
        }    

.quickroll > main{
    grid-area: main; 
}
        .buttons_row{
            height: 15vh;

            display: flex;
            justify-content: space-evenly;
            /* I realized too late I needed fixed instead, but removing sticky 
            breaks the site structure for some reason */
            position: sticky;

            background-color: inherit;
        }

.quickroll > footer{
    grid-area: footer;
    bottom: 0;
    
    /* I realized too late I needed fixed instead, but removing sticky 
    breaks the site structure for some reason */
    position: sticky;
    background-color: var(--workspace-color);
}

        .quickroll .color_extender{
            position: absolute;
            width: 100%;
            height: 400vh;
            top: -110vh;

            background-color: inherit;
        }

/* .core_structure class styles */
.core_structure{
    display: grid;
    grid-template-columns: minmax(100px, 15%) 45% minmax(200px, auto);
    grid-template-rows: minmax(100px, 25vh) auto;
    grid-template-areas:
        "logo main footer"
        "nav main footer";

    height: 100vh;
    width: 100%;
}

.core_structure header{
    grid-template-columns: logo;
}
        .core_structure .img_container{
            top: 0;
            left: 0;
            min-height: 100px;
            max-height: 150px;
            height: 100%;
            width: 100%;

            justify-content: start;
        }
                .core_structure .logo{
                    max-width: none;
                    height: 100%;

                    padding: .2em;
                }

.core_structure nav{
    grid-area: nav;
    z-index: 25;

    background-color: transparent;
}
        .nav_bar{
            height: 50vh;
            max-height: 300px;
            width: 85%;

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: absolute;
            left: .3em;

            background-color: inherit;
            padding-top: .3em;
        }
            .nav_bar > input[type="button"].menu{
                height: 30%;
                width: 100%;
            }

.core_structure main{
    grid-area: main;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(100px, 25vh) auto;
    grid-template-areas:
        "settings"
        "workspace";
}
        main .workspace{
            right: 0;
            margin-right: .2em;
        }

.core_structure footer{
    grid-area: footer;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(100px, 25vh) auto;
    grid-template-areas:
        "."
        "workspace";
}
        footer .workspace{
            width: 93%;
            left: 0;
            margin-left: .2em;
        }

        .core_structure a{
            position: absolute;
            top: .5em;
            right: .5em;
        }

/* Treasure-specific styles */
.roll_treasure tr th:nth-child(1){
    width: 15%;
}
.roll_treasure tr th:nth-child(2){
    width: 35%;
}

/* Monster-specific styles */
.roll_monster tr th:nth-child(1){
    width: 20%;
}
.roll_monster tr th:nth-child(2){
    width: 35%;
}

/* Monster-specific styles */
.roll_monster tr th:nth-child(1){
    width: 10%;
}
.roll_monster tr th:nth-child(2){
    width: 55%;
}

/* About-Us styles */
.about_us h1{
    position: absolute;
    grid-area: settings;
    width: 90%;
    text-align: center;
    right: 0;
    bottom: 0;
}

.about_us main p{
    grid-area: workspace;
    position: absolute;
    right: 0.5em;
}