:root {
    --main-theme-color-a: #b7aef1;
    --main-theme-color-b: #dbd9e9;
    --main-theme-color-c: #7e7a97;
}
html{
    margin: 0px;
    padding: 0px;
}
body{
    margin: 0px;
    padding: 0px;
    height: 100%;
    min-height: 100%;
}
a:link, a:visited{
    color: var(--main-theme-color-b);
    text-decoration: none;
    background-color: #474c52;
}
a:active, a:hover{
    color: var(--main-theme-color-a);
    text-decoration: none;
    background-color: #474c52;
}
.column-base{
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: calc(89vh);
    min-height: calc(89vh);
}
.column-div-2-col-left{
    display: inline-flex;
    background-color: var(--main-theme-color-b);
    width: 20%;
    min-width: 20%;
    max-width: 20%;
    height: 100%;
    min-height: 100%;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
}
.column-div-2-col-right{
    display: inline-flex;
    background-color: var(--main-theme-color-c);
    width: 80%;
    min-width: 80%;
    max-width: 80%;
    height: 100%;
    min-height: 100%;
    margin: 0px;
    padding: 0px;
}
.titlebar{
    background-color: var(--main-theme-color-a);
    margin: 0px;
    padding: 0px;
    width: 100%;
    min-width: 100%;
    height: 5%;
    min-height: 5%;
    text-align: left;
    color: #FFF;
    font-size: 2em;
}
.top-nav{
    background-color: var(--main-theme-color-b);
    margin: 0px;
    padding: 0px;
    width: 100%;
    min-width: 100%;
    height: 5%;
    min-height: 5%;
    text-align: left;
    color: #FFF;
    font-size: 2em;
}
.inner-col{
    background-color: var(--main-theme-color-b);
    margin: 10px auto;
    padding: 10px;
    border-radius: 10px 10px 10px 10px;
    width: 95%;
}
.footer{
    background-color: #474c52;
    margin: 0px;
    padding: 0px;
    width: 100%;
    min-width: 100%;
    height: 5%;
    min-height: 5%;
    text-align: left;
    color: #FFF;
    font-size: 2em;
}