body {
	margin: 0;
	/*font-size: 14px;*/
	/*line-height: 1.5;*/
	color: white;
  overflow: hidden;
  background-color: black;
}

body,div{
  font-family: 'Roboto', sans-serif;
  font-size: 11pt;
}

#grid-container {
    display: grid;
    grid-template-areas:
        'branding header header'
        'menu main right'
        'menu main right';
    grid-gap: 0px;
    /*padding: 10px;*/
    width: 100vw;
    height: 100vh;
    /*grid-template-rows: 35px auto 36px;*/
    grid-template-rows: 35px auto;
    grid-template-columns: 200px auto 300px;
    backdrop-filter: blur(15px);
    
    /*
    background-image:url('/eclipse.jpg');
    background-size:   cover;
    background-attachment: fixed;
    background-position: center;
    */
}

.top {grid-area: header;/* background-color: var(--dark-back); *//* backdrop-filter: blur(15px); */}
.nav {grid-area: menu;/* background-color: rgba(20, 20, 20, 0.1); *//* backdrop-filter: blur(15px); */border-right: 1px solid var(--contrast-color-muted);overflow-y: auto;}
#main { grid-area: main; overflow: auto; /*background-color: rgba(238, 238, 238, 0.90);*/ position: relative;}
.branding {grid-area: branding;/* background-color: var(--dark-back); */color: white;/* backdrop-filter: blur(15px); */}
.footer { grid-area: footer; background-color: var(--dark-back); color: white; overflow: hidden;}
.right {grid-area: right;/* background-color: var(--dark-back); */display: none;overflow-y: auto;overflow-x: scroll;border-left: 1px solid var(--contrast-color-muted);border-top: 1px solid var(--contrast-color-muted);}

#grid-container.rightvisible .right{
  display: block;
  overflow: auto;
}

#main{grid-column-end: 4;grid-row-end: 4;/* backdrop-filter: blur(15px); */border-top: 1px solid var(--contrast-color-muted);}

#grid-container.rightvisible:not(.mobile){grid-template-columns: 200px auto 300px;}
#grid-container.rightvisible.mobile{grid-template-columns: 200px auto 0px;}
#grid-container:not(.rightvisible){grid-template-columns: 200px auto 0px;}

#grid-container.collapsed #main{grid-column-start: 1;}
#grid-container.rightvisible #main{grid-column-end: 3;}
#grid-container.mobile.rightvisible #main{display:none;}
#grid-container.mobile.rightvisible .right{grid-column-start: 1;}

#grid-container.collapsed .nav{
  display:none;
}

#main::after {
  content: "";
  opacity: 0.6;
  /* background: rgba(255, 255, 255, 0); */
  top: 35px;
  left: 0px;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;
  /* backdrop-filter: blur(10px); */
}

#grid-container.collapsed #main::after{
  left: 0px;
}

#body-container::after {
  content: "";
  background: url('/img/back1.webp');
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -2;
  /* backdrop-filter: blur(10px); */
  background-size: cover;
}

:root{
  --dark-back: rgba(20, 20, 20, 0.7);
  --dark-back-op: rgba(20, 20, 20, 0.9);
  --dark-back-hover: rgba(60, 60, 60, 0.7);
  --accent-color: #550000;
  --accent-back: rgba(85, 0, 0, 0.8);
  --dark-hover-back: rgba(20, 20, 20, 0.8);
  --accent-back-light: rgba(100, 100, 200, 0.4);
  --accent-color-light: #bb6666;
  --contrast-color-muted: #aaa;
  --contrast-color: #FFF;
  --contrast-background-transparent: rgba(255, 255, 255, 0.1);
  --shadow-on-back: #222;
  --table-hover: rgba(255, 255, 255, 0.2);
  --link: #8fb9f9;
  --link-hover: #76acff;
}