* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}

:root {
    --primary-dark: #263238;
    --primary-normal: #455A64;
    --primary-light: #607D8B;
    --primary-superlight: #90A4AE;
    --secondary-dark: #BDBDBD;
    --secondary-normal: #E0E0E0;
    --secondary-light: #EEEEEE;
    --secondary-superlight: #F5F5F5;
    --good-dark: #2E7D32;
    --good-light: #81C784;
    --good-superlight: #A5D6A7;
    --neg-superdark: #b71c1c;
    --neg-dark: #ef5350;
    --neg-light: #ef9a9a;
    --font-normal: white;
    --font-secondary: black;
    --font-dim: #999999;
    --page-eco: #33691E;
    --page-ind: #006064;
    --page-mil: #827717;
}

#game-box {
    margin: 0 auto;
    max-width: 1300px;
    min-width: 720px;
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    align-content: start;
    display: grid;
    border: 1px outset var(--secondary-dark);
    border-top: 0;
    grid-template-columns: 3fr 4fr;
    grid-template-rows: 3rem 2rem auto 3rem;
    grid-template-areas: 
        'menubar menubar'
        'resbar resbar'
        'colone coltwo'
        'buttons buttons';    
/*
    grid-template-rows: 3rem auto 5rem 3rem;
    grid-template-areas: 
        'menubar menubar'
        'colone coltwo'
        'resbar resbar'
        'buttons buttons';
*/
    box-shadow: 0 0 5rem var(--secondary-dark);
    overflow: hidden;
}

#button-bar {grid-area: buttons;}
#resource-bar {grid-area: resbar;}
#column-one {grid-area: colone;}
#column-two {grid-area: coltwo;}
#menu-bar {grid-area: menubar;}

#menu-bar {
    user-select: none;
    width: 100%;
    height: 3rem;
    color: var(--font-normal);
    padding: .5rem 1rem;
    font-weight: bold;
    background: var(--primary-normal);
    border-top: 1rem solid var(--primary-dark)
}

#column-one, #column-two {
    width: 100%;
    border-left: 1px solid var(--primary-dark);
    border-right: 1px solid var(--primary-dark);
    display: grid;
    grid-template-rows: auto 1fr;
}
#column-navbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 0;
    background: var(--primary-normal);
}
#column-navbar button {
    height: 3rem;
    border: 0;
    background: var(--primary-normal);
    color: var(--font-dim);
    outline: none;
    user-select: none;
    cursor: pointer;
    font-weight: bold;
    transition: all .2s ease-in-out;
    border-radius: 1rem 1rem 0 0;
}
#column-navbar button:hover {
    background: var(--primary-light);
    color: var(--font-normal);
}
#column-navbar button.active {
    background: var(--primary-light);
    color: var(--font-normal);
}
#column-navbar hr {
    position: relative;
    border: none;
    bottom: .3rem;
    grid-column: 1 / 4;
    color: var(--font-normal);
    background: white;
    width: calc(100%/3);
    height: .2rem;
    transition: all .3s ease-in-out;
}
.col-page {
    height: calc(100vh - 12rem);
    overflow-y: scroll;
    display: none;
    padding: .2rem;
    background: white;
}
/*
###################### Stockpile Styles ######################
*/
.stockpile-grid {
    display:grid;
    grid-template-columns: 2fr 4fr 1fr;
    grid-auto-rows: minmax(1.2rem, auto);
    margin-bottom: .5rem;
}

.section-title {
    grid-column: 1/4;
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    background: var(--primary-superlight);
    color: var(--font-normal);
    padding: .2rem;
    border-radius: .5rem;
    text-align: center;
}
.stock-name, .stock-count, .stock-income {
    padding: .1rem 0;
}
.stock-name {
    padding-left: .5rem;
/*    background: red;*/
}
.stock-name:nth-child(odd), .stock-count:nth-child(even), .stock-income:nth-child(odd) {
    background: var(--secondary-normal);
}
.stock-count {
/*    background: green;*/
    text-align: right;
    padding-right: .5rem;
}
.stock-income {
/*    background: blue;*/
    text-align: center;
}

/*
###################### Land Styles ######################
*/
#land-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
        'landtitle landtitle'
        'militarystat militarycount'
        'landprogress landprogress'
        'conqinfo conquesttrack';
}
#land-detail .section-title {
    grid-area: landtitle;
}
.military-details {
    grid-area: militarystat;
}
.count-Military {
    grid-area: militarycount;
    text-align: right;
    padding-right: .5rem;
}
#conq-progress-bg {
    grid-area: landprogress;
    display: block;
    height: .75rem;
    width: 100%;
    border-radius: .5rem;
    background: var(--secondary-dark);
    border: 1px outset var(--primary-dark);
    overflow: hidden;
}
#conq-progress-bar {
    background: red;
    height: .75rem;
    width: 0%;
    display: block;
    transition: width 1s linear;
}
.conq-details {
    grid-area: conqinfo;
}
.conq-count {
    grid-area: conquesttrack;
    text-align: right;
    padding-right: .5rem;
}

/*
###################### Notification Styles ######################
*/
#notification-box {
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: 50rem;
    height: 50rem;
    pointer-events: none;
}
.notification-error {
    display: block;
    background: var(--neg-light);
    color: var(--neg-superdark);
    margin: 0;
    margin-left: -25%;
    opacity: 0;
    width: 50%;
    border-left: .3rem solid var(--neg-superdark);
    padding-left: .5rem;
    height: 0;
    transition: all .5s ease-out;
    font-size: 1.1rem;
    margin-bottom: .25rem;
}
.notification-error-close {
    display: block;
    float:right;
    color: var(--neg-superdark);
    height: .5rem;
    width: .5rem;
    background: yellow;
    margin: .5rem;
    cursor: pointer;
}
/*
###################### Item Styles ######################
*/
.item-box {
    background-color: var(--secondary-superlight);
    user-select: none;
    display: grid;
    padding: .25rem;
    margin: .25rem 0;
    border: 1px solid;
    border-radius: .5rem;
    min-height: 7rem;
    grid-template-columns: 2fr 2fr 1fr;
    grid-template-rows: auto auto 1fr;
/*    align-content: flex-start;*/
    grid-template-areas: 
        'iname iowned icount'
        'idesc idesc ibutton'
        'iposi inega ibutton';
}
.item-name {
    grid-area: iname;
    font-weight: bold;
    font-size: 1.2rem;
}
.item-owned {
    grid-area: iowned;
    text-align: right;
    padding-right: .5rem;
}
.item-count {
    grid-area: icount;
    text-align: right;
    padding-right: .5rem;
    background: white;
    border-radius: .5rem;
    border: 1px solid var(--secondary-dark);
}
.item-desc {
    background: white;
    grid-area: idesc;
    margin: .2rem;
    padding: .2rem;
    border: 1px solid;
    border-radius: .5rem;
}
.item-button {
    outline: none;
    grid-area: ibutton;
    cursor: pointer;
    border-radius: .5rem;
    background: var(--good-light);
    border: .1rem outset var(--good-light);
}
.item-button:hover {
    background: var(--good-superlight);
    border: .1rem outset var(--good-superlight);
}
.item-button:active {
    position: relative;
    top: 1px;
    border: .1rem inset var(--good-light);
    background: var(--good-light);
}
.overpriced {
    background: var(--secondary-normal);
    border: .1rem outset var(--secondary-light);
    cursor: not-allowed;
}
.overpriced:hover {
    background: var(--secondary-normal);
    border: .1rem outset var(--secondary-light);
}
.overpriced:active {
    border: .1rem outset var(--secondary-light);
    position: relative;
    top: 0;
}

.item-action {
    font-weight: bold;
}
.item-positive {
    grid-area: iposi;
    align-self: flex-end;
}
.item-positive span, .item-negative span {
    display: inline-block;
    padding: .2rem .5rem;
    margin: .2rem;
    border-radius: .5rem;
}
.item-positive span {
    background: var(--good-superlight);
    border: 1px outset var(--good-light);
}
.item-negative span {
    background: var(--neg-light);
    border: 1px outset var(--neg-light);
}
.item-negative {
    grid-area: inega;
    align-self: flex-end;
}

/*
###################### Bottom Bar Styles ######################
*/
#button-bar {
    display: grid;
    height: 4rem;
    border: 1px outset var(--primary-dark);
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    background: var(--primary-normal);
}
#button-bar button {
    height: 3rem;
    cursor: pointer;
    border: 1px outset var(--primary-dark);
    color: var(--font-secondary);
    background: var(--secondary-normal);
    font-weight: bold;
    outline: none;
    user-select: none;
}
#button-bar button:hover {
    background: var(--secondary-light);
}
#button-bar button:active {
    border: 1px inset var(--primary-dark);
    position: relative;
    top: 1px;
}
#progress-cont {
    background: var(--primary-superlight);
    border: 1px outset var(--primary-dark);
    border-radius: 1rem;
    grid-column: 1 / 6;
    width: 100%;
    height: .75rem;
    overflow: hidden;
}
#progress-bar {
    background: red;
    height: 100%;
    width: 0%;
}
#resource-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 3fr;
    user-select: none;
    height: 2rem;
/*    height: 5rem;*/
    color: white;
    background: var(--primary-normal);
}
.pop-bar {
    grid-column: 1/6;
    height: 1.5rem;
    text-align: right;
    padding: .25rem;
}
.res-box {
    border: 1px solid var(--primary-normal);
    background: var(--primary-normal);
    font-size: 1.25rem;
/*    display: grid;*/
    display: none;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
        'res-name res-name'
        'res-count res-income';
    color: black;
}
.res-name {
    grid-area: res-name;
    text-align: center;
    align-self: center;
    background: var(--primary-normal);
    color: var(--font-normal);
    font-weight: bold;
}
.res-count {
    grid-area: res-count;
    display: inline-block;
    border: 1px outset var(--primary-dark);
    background: white;
    border-right: 0;
    text-align: right;
    padding-right: .25rem;
    font-size: inherit;
}
.res-income {
    grid-area: res-income;
    text-align: right;
    display: inline-block;
    border: 1px outset var(--primary-dark);
    background: white;
    border-left: 0;
    padding-right: .25rem;
    padding-top: .25rem;
    padding-left: .25rem;
    font-size: inherit;
}
.res-pos {
    color: var(--good-dark);
}
.res-neg {
    color: var(--neg-dark);
}
#kingdom-title {
    font-weight: bold;
}
#population-print {
    background: white;
    color: black;
    display: inline-block;
    height: 1.25rem;
    width: 8rem;
    border-radius: .3rem;
    vertical-align: middle;
    margin: 0 .50rem;
    padding: 0 .25rem;
    border: 1px outset var(--primary-dark);
    font-weight: bold;
}

#page-1-0, #nav-1-0.active {
    background: var(--page-eco) !important;
}
#page-1-1, #nav-1-1.active {
    background: var(--page-ind) !important;
}
#page-1-2, #nav-1-2.active {
    background: var(--page-mil) !important;
}