body {
    overflow: hidden;
    margin: 0;
  font-family: Calibri, sans-serif;
  background-color: #303030;
      text-rendering: optimizeLegibility;
}

main div i {
    color: #8787df;
}

main {
    max-width: unset;
    padding: 0;
}

h2 {
  font-style: italic;

}

div#header-cont {
    display: flex;
  justify-content: end;
  position: absolute;
  width: 100dvw;
}

div#header-cont img {
    position: absolute;
  z-index: 1000;
  width: 4rem;
  padding: 1rem 1.5rem;
  filter: drop-shadow(.02rem .0.2rem rgb(0, 0, 0));
  transition: filter 1s ease-in-out, opacity 1s ease-in-out;
  opacity: 0.2;
}

div#header-cont img:hover {
      filter: drop-shadow(.02rem .0.2rem rgb(255,255,255));
      opacity: 1.0;
}

div.main-cont {
    padding: 0;
    display: flex;
    justify-content: center;
}

#gl {
    background-color: #38003d;
    background-color: #222;
    width: 100vw;
    /*height: calc(100vh - 10.9rem);*/
}
canvas {
    height: 100% !important;
}
#menu-cont {
    position: absolute;
    padding-left: 1rem;
    height: calc(100dvh - 3rem);
    overflow: hidden;
}
.mc-transition {
    transition: top 2.5s ease-in-out;
}
#menu {
    /*background-color: #000C;*/
    padding: 1rem;
    padding: 0.1rem 2rem 5rem 2rem;
    position: relative;
    z-index: 99;
}

div#menu a {
    text-decoration: none;
}

#menu h1, #menu h2, div#motd-cont {
    color: #FFF;
      /*color: #FFF3EB;*/
}

.t-shade {
font-family: 'Noto Serif 700', serif;
  text-shadow: 0.0rem 0.0rem 0.1rem rgb(0, 0, 0), 0.0rem 0.0rem 0.2rem rgb(0, 0, 0), 0.1rem 0.1rem 0.0rem rgb(0, 0, 0), 1rem 1rem 0.1rem rgba(0,0,0,0.3);
}



main div#shutter {
    height: 100dvh;
    position: absolute;
    width: 100vw;
    z-index: 100;
    background-color: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 2s;
}
main div#shutter img {
    max-height: 38dvh;
    max-width: 38dvw;
    width: 50%;
    filter: drop-shadow(0px 0px 0.02rem #000) drop-shadow(0.3rem 0.3rem 0.1rem #0F0);
    transition: opacity 2s;
}

footer {
  z-index: 200;
  position: relative;
}


/* override for index footer & header (to address high scaling) */
:root {
  --hf-lr-margin: 2vh;
}



main #motd-cont {
    height: 100dvh;
}

main #gl {
    height: 100dvh;
}

main #motd-cont {
    position: absolute;
    /*background-color: rebeccapurple;*/
    width: 200rem;
    display: flex;
    align-items: end;
    /*z-index: 0;*/
}

main #motd-cont #motd {
    position: relative;
    z-index: 200;
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 500;
    width: 110rem;
    padding-bottom: 1.0rem;
}

@keyframes slide {
    from {
        left: 110rem;
    }
    to {
        left: -100rem;
    }
}
main #motd-cont #motd {
    animation: slide 20s infinite linear;
    left: 150vw;
}


@keyframes flash {
    0% {
        /*color: #8bc5f8;*/
        color: #527CBE;
    }
    50% {
        color: #D715D4;
    }
    100% {        
        color: #527CBE;
    }
}
div#motd a.fa {
    animation: flash 2s infinite ease;
    font-weight: 500;
    text-decoration: none;
}

footer {
    z-index: 200;
  position: absolute;
  top: calc(100dvh - 1.2rem);
  width: calc(100dvw - 0.4rem);
  display: flex;
  justify-content: end;
  color: #14f014;
  font-size: 1rem;
  transition: opacity 5s ease;
}

footer:hover {
    opacity: 1 !important;
}

/* new no header format prototype */

/*
main #gl {
    height: 100dvh;
    position: absolute;
    top: 0;
    left: 0;
}
header div.nav-bar  {
    background: #0000;
}
header div.line-1 {
    background: #0000;
}
footer div.line-1 {
    background: #0000;
}
footer div.line-2 {
    background: #0000;
}
#menu-cont {
    left: 1rem;
}
header div.nav-bar a img, footer div.line-2 a img {
    filter: drop-shadow(1px 1px 2px rgb(255, 255, 255));
}
footer {
    z-index: 200;
    position: absolute;
    top: calc(100dvh - 4rem);
    left: calc(100dvw - 13rem);
}*/

/* aspect ratio and eye pos have to be changed in gl-index.js */