html {
    text-rendering: optimizeLegibility;
    /*font-size: 14px;*/
    font-size: 12px;
    /*this needs to be 14 but header and navbar needs to be de-rem'd*/
}

@media (min-width: 480px) and (min-height: 250px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 768px) and (min-height: 320px) {
    html {
        font-size: 16px;
    }
}

/*@media (min-width: 1024px) and (min-height: 510px) {
    html {

        font-size: 18px;
    }
}*/



/*@media (min-width: 768px) {
    html {
    font-size: 16px;
    }
}*/


body {
    margin: 0;
    font-family: Calibri, sans-serif;
    background-color: #303030;
}


header div.nav-bar {
    background: linear-gradient(0deg, #9C9C9C 0%, rgba(217, 217, 217, 0.99) 50%, #808197 100%);
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header div.nav-bar a img {
    height: 1.5rem;
    margin: 0 0 0 1rem;
}

header div.nav-bar div.nav-btn-cont2 {
    display: flex;
    justify-content: flex-end;
}

header div.nav-bar div div.nav-btn-cont img {
    height: 2.0rem;
    padding: 0 1rem;
}

/*header div.nav-bar div div.nav-btn-cont img#fullscreen_toggle {
    height: 2.2rem;
}*/

@media (max-width: 480px) {
    header div.nav-bar div div.nav-btn-cont img {
        padding: 0 1rem;
    }
}

header img.nav-btn:hover {
    filter: drop-shadow(0px 0px 10px rgb(39, 34, 173));
    cursor: pointer;
}

header div div.nav-btn-cont {
    display: flex;
    justify-content: end;
}

header div.nav-menu, header div div.nav-btn-cont2 {
    width: 24rem;
    padding-right: 1rem;
}

header div.nav-menu-cont {
    height: 0px;
    font-size: 0rem;
    /*background-color: red;*/
    background-color: rgba(3,3,3,0.2);
    position: absolute;
    z-index: 100;
    width: 100%;
    display: flex;
    justify-content: end;
    transition: height 1s ease-in-out, font-size 1s ease-in-out;
}

header div.nav-menu {
    /*background-color: rgba(164, 164, 164, 0.95);*/
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    /*box-shadow: -0.07em 0.5em 0.8em #fff;*/
    transition: height 1s ease-in-out;
    background: linear-gradient(180deg, #9C9C9C00 0%, #9c9c9cee 0.05%, #9c9c9cee 99%, #9C9C9C00 100%);
    height: 22rem;
    padding-top: 0.5em;
}
header div.nav-menu a {
    height: 3rem;
    opacity: 0.0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
}

header div.line-1 {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: end;
    background: linear-gradient(0deg, #00F 0%, #9D9D9D 4%, #9D9D9D 100%);

/*  AAA ~ kill transition ~ change logo  */
/*  background: linear-gradient(0deg, #00F 0%, #747474 4%); */
}

header div.line-1 h1 {
    margin: 0.0rem 0 0.5rem 0.9rem;
    font-size: 1.5rem;
}

footer {
    /*margin-top: 5rem;*/
    /*background-color: #303030;*/
}

footer div.line-1 {
    display: flex;
    justify-content: end;
    flex-direction: row;
    align-items: end;
    background: linear-gradient(180deg, #00F 0%, #9D9D9D 10%, #9D9D9D 120%);
}

footer div.line-1 div {
    padding: 0.5rem 2rem 0 2rem;
    text-shadow: 0.07em 0.04em 0.09em #2e2e2e;
    /*color: #d1d1d3;*/
    color: #FFF;
    font-style: italic;
}

/*machine readable datetime*/
footer div.line-1 div span {
    display: none;
}

footer div.line-2 {
    background: linear-gradient(180deg, #9C9C9C 0%, rgba(217, 217, 217, 0.99) 50.28%, #808197 100%);
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: end;
}

footer div.line-2 div {
    height: 2.0rem;
    cursor: pointer;
    margin-right: 2rem;
}

footer div.line-2 div img {
    height: 100%;
}

footer div.line-2 a {
    display: flex;
    align-items: center;
    margin-right: 2rem;
}

footer div.line-2 a img {
    height: 1.5rem;
}

div.main-cont {
    display: flex;
    justify-content: center;
    color: #AAA;
    color: #d1d1d3;
    /*background-color: #303030;*/
    /**/
    padding-bottom: 5rem;
}

@media (max-width: 480px) {
    div.main-cont {
        color: white;
    }
}

div.main-cont.light {
    color: #000;
    background-color: whitesmoke;
}

div.main-cont.temp_transition {
    transition: color 1s ease-in-out, background-color 1s ease-in-out;
}

main {
    max-width: 48rem;   
    padding: 1rem;
}

header h1 {
    color: #FFF;
    text-shadow: 0.07em 0.04em 0.09em #2e2e2e;
    font-style: italic;
    /**/
}

/*header h1.light {
    color: #000;
    text-shadow: 0.07em 0.04em 0.09em #707070;
}*/

header h1.temp_transition {
    transition: color 1s ease-in-out, text-shadow 1s ease-in-out;
}

h2 {
    font-style: italic;
    color: #FFF;
}

div.main-cont.light h2 {
    color: #000;
}

div.main-cont.temp_transition h2 {
    transition: color 1s ease-in-out;
}

h3 {
    color: #FFF;
    margin-top: 2rem;
    font-style: italic;
    /**/
}
div.main-cont.light h3 {
    color: #000;
}
div.main-cont.temp_transition h3 {
    transition: color 1s ease-in-out;
}

a {
    font-style: italic;
    font-weight: 800;
}

a:visited, a:link, a:active {
    color: #9a9ae8;
    /**/
}

div.main-cont.light a:visited, div.main-cont.light a:link, div.main-cont.light a:active {
    color: blue;
}

div.main-cont.temp_transition a:visited, div.main-cont.temp_transition a:link, div.main-cont.temp_transition a:active {
    transition: color 1s ease-in-out;
}

header div.nav-menu a {
    color: blue;
}

main a h2, ul.jump li a {
    /*color: #8787c9;*/
    color: #9a9ae8;
    /* text-shadow: 0.07em 0.02em 0.3em #fff, -0.07em 0.02em 0.3em #fff;*/
    /*transition: color 1s ease-in-out;*/
}

main div i {
    color: #8787df;
}


/*.temp_transition {
    transition: 
        color 1s ease-in-out, 
        text-shadow 1s ease-in-out, 
        background-color 1s ease-in-out;
}*/

div.main-cont.light a h2, div.main-cont.light ul.jump li a {
    color: blue;
    /* text-shadow: 0.07em 0.02em 0.3em #fff, -0.07em 0.02em 0.3em #fff;*/
}

ul {
    padding: 0 0 0 1rem;
}
ul.jump {
    list-style: none;
    padding: 0;
}
ul.jump li {
    padding: 0.1em 0;
    margin: 0.1em 0;
}
ul.jump li::before {
    /*content: "\1F5F2";*/
    content: "\26A1";
    font-size: 0.7em;
    /*color: sandybrown;*/
    padding: 0 0.2em 0 0.05em;
}


.img-cont {
    display: flex;
    justify-content: center;
}

.img-cont img {
    max-width: 100%;
    object-fit: contain;
    /*0 layout shift achieved*/
}

.img-cont.idx-img img {
    height: 28rem;
    margin: 1rem 0 1rem 0;
    padding: 0;
    box-shadow: 0.0rem 0.3rem 0.9rem #707070,0.0rem 0.3rem 0.4rem #1a2cbb;
    background-color: #c6c6c6;
}

main img {
    margin: 1rem 0;
}

p span.tech {
    color: #74a;
}