/*****== colour palette ==*****/
:root {
  --main-body:#e7e7e7c7;
  --accent-light: #c3cde5;
  --accent-dark:#a7bef8;
  --shadow: 4px 3px rgba(168 178 202 / 0.9);
  --title-text: #89a5ec;
  --title-text-shadow: 2px 2px #a7bef8;
/* window detailing */
  --l1: #E9DFD9;
  --l2: #CBCACC;
  --m1: #A7B7C9;
  --m2: #859ABE;
  --d1: #625D6F;
  --d2: #48485C;
  --bar: #8C99BFE0;
  --face: #e7e7e7;
}

/* Fonts */
@font-face { 
 font-family: "PS55";
 src: url('/assets/fonts/IBM_PS-55_re.woff');
 font-display: swap;
}
@font-face { 
 font-family: "departure";
 src: url('/assets/fonts/DepartureMono-Regular.woff2');
 font-display: swap;
}
@font-face { 
 font-family: "cordata";
 src: url('/assets/fonts/Cordata_PPC-400.woff');
 font-display: swap;
}

html {
  height: 100vh;
 }

body {
  background: #CBCACC;
  background-image: url('/assets/mats/side-test.gif');
  background-size: cover; 
  font-family: Verdana;
  font-size: 13px;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  * { overscroll-behavior: none; }
}

.grid {	
  display: grid;
  grid-template-columns: 18.5rem 70rem 1fr;
 }

/*====              ====*/  
/*****== LEFT COL ==*****/
/*====              ====*/ 

.left-col {
 display: grid;
 grid-template-columns: repeat(8, 1fr);
 grid-template-rows: repeat(32, 2rem);
}

.header {
  grid-area: 1 / 1 / 1 / 33;
  overflow: hidden;
  margin: -8px
}

.sidebar {
  grid-area: 2 / 2 / 23 / 9;
  margin-left: -1rem;
  position: relative;
  min-height:0;
  min-width:0;
  background-color: var(--l1);
  }

.nav-window {
  border-left: 0.7rem solid #e7e7e7;
  border-right: 0.7rem solid #e7e7e7;
  border-top: none;
  border-bottom: none;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: fixed;
  pointer-events: none;
  width: 16rem;
  height: 42rem;
  z-index: 4;
}

.nav-title {
  height: 2rem;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 3px;
  flex: none;
  z-index: 5;
  background-color: #e7e7e7;
}

.nav-title .title {
  font-family: 'PS55', monospace;
  display: flex;
  align-items: center;
  width: 60%;
  height: 60%;
  background-color: var(--bar);
  border-style: solid;
  border-width: 2px;
  border-color: var(--l1) var(--d2) var(--d2) var(--l1);
  font-size: 15px;
  letter-spacing: 5px;
  padding-left: 1em;
  line-height: 1; 
}

.nav-body { 
  height: 42rem;
  overflow: auto;
  border-style: solid;
  border-width: 5px;
  border-color: var(--d2) var(--l1) var(--l1) var(--d2);
}

.nav-bottom {
 height: 1.7rem;
 display: flex;
 align-items: center;
 gap: 3px;
 padding: 0 3px;
 flex: none;
 min-height: 0;
 z-index: 5;
 background-color: #e7e7e7;
}

#navi-info {
  display: flex;
  justify-content: center;
  padding-top: 2.5em;
  }

#navi-info img {
  height: 10rem;
  width: auto;
}

#navi-info .home-button {
  height: 10rem;
  width: auto;
  padding: 1em;
}

#navi-list {
  display:flex;
  flex-direction:column;
  align-items: center;
  align-content: space-around;
  font-family: 'cordata', monospace;
  font-size: 26px;
  height: 50vh;
  width: 100%;
  gap:1em;
  }

#navi-list a {
  display: flex;
  height: 2.2rem;
  width: 70%;
  color: #48485C;
  text-shadow: 2px 2px var(--bar);
  box-shadow: 0px 0px #878DB0;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  letter-spacing: 1;
  list-style-type: none;
  background-color:#B8B1C4;
  transition: transform 0.4s ease, background-color 0.5s ease, background-image 0.5s ease, color 0.2s ease, text-shadow 0.2s ease, box-shadow 0.6s ease, letter-spacing 0.5s ease;
}

#navi-list a:hover {
  color: #B8B1C4;
  background-image:
	url('/assets/mats/button-bg.gif');
  background-color: var(--bar);
  text-shadow: 1px 2px #48485C;
  transform: translateY(-1px);
  box-shadow: 5px 10px 0 0 #878DB0;
  letter-spacing: 4px;
}

/*====              ====*/  
/*****== CENT COL ==*****/
/*====              ====*/ 

.centre-col {
  display: grid;
  grid-template-columns: repeat(35, 2rem);
  grid-template-rows: repeat(64, 2rem);
}


/**** HOME ****/


.stage {
  grid-area: 2 / 2 / 28 / 34;
  background-image: url('/assets/images/bg-test.png'),
  		    url('/assets/mats/bg.gif');
  background-size: 82rem, cover;
  background-position: bottom right 18em, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  padding-bottom: 1.7rem;
  display: grid;
  position: relative;
  grid-template-columns: repeat(31, 2rem);
  grid-auto-rows: 2rem;
  overflow-y: auto;
  overflow: scroll;
  scrollbar-width: none;
  overscroll-behavior: none;
}

.window {
  border-left: 0.7rem solid #e7e7e7;
  border-right: 0.7rem solid #e7e7e7;
  border-top: none;
  border-bottom: none;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: fixed;
  pointer-events: none;
  width: 63rem;
  height: 52rem;
  z-index: 4;
}

.titlebar {
  height: 2rem;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 3px;
  flex: none;
  z-index: 5;
  background-color: #e7e7e7;
}

.titlebar .title {
  font-family: 'PS55', monospace;
  display: flex;
  align-items: center;
  width: 60%;
  height: 60%;
  background-color: var(--bar);
  border-style: solid;
  border-width: 2px;
  border-color: var(--l1) var(--d2) var(--d2) var(--l1);
  font-size: 15px;
  letter-spacing: 5px;
  padding-left: 1em;
  line-height: 1; 
}

.titlebar .t-status {
  display: flex;
  align-items: center;
  width: 20%;
  height: 60%;
  background-color: var(--bar);
  border-style: solid;
  border-width: 2px;
  border-color: var(--l1) var(--d2) var(--d2) var(--l1);
  font-size: 11px;
  letter-spacing: 2px;
  margin-left: 5em;
  line-height: 1; 
}

.titlebar .t-btn {
  display: flex;
  align-items: center;
  width: 2em;
  height: 60%;
  background-color: var(--bar);
  border-style: solid;
  border-width: 2px;
  border-color: var(--l1) var(--d2) var(--d2) var(--l1);
  font-size: 11px;
  letter-spacing: 2px;
  margin-left: 1em;
  line-height: 1; 
}

.w-body {
  height: 50rem;
  overflow: auto;
  border-style: solid;
  border-width: 5px;
  border-color: var(--d2) var(--l1) var(--l1) var(--d2);
}

.toolbar {
 height: 1.7rem;
 display: flex;
 align-items: center;
 gap: 3px;
 padding: 0 3px;
 flex: none;
 min-height: 0;
 z-index: 5;
 background-color: #e7e7e7;
}

.box0 {
 grid-area: 3 / 10 / 29 / 2;
 overflow: auto;
}

.home-intro {
}

.stage h1 { 
 letter-spacing: 8px;
 text-align: center;
 font-family: 'cordata', monospace;
 font-size: 33px;
 background-color: var(--bar);
 display: inline-block;
 border-style: solid;
 border-width: 5px;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
}

.stage p {
 margin: 0em 3em 0.5em 0em;
 padding: 2px;
 font-family: 'departure', monospace;
 font-size: 16px;
 background-color: var(--m1);
 border-style: solid;
 border-width: 5px;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
}

.box1 {
 grid-area: 6 / 16 / 14 / 23;
 overflow: auto;
}

.home-graphic img {
  height: 15rem;
  width: auto;
}

.stage h2 {
 font-family: 'cordata', monospace;
 font-size: 22px;
 letter-spacing: 4px;
 background-color: var(--bar);
 display: inline-block;
 border-style: solid;
 border-width: 2px;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
}

.link-dump {
 width: 12em;
 display: inline-block;
} 

.link-dump a {
 font-family: 'departure', monospace;
 font-size: 16px;
 background-color: var(--m1);
 display: inline-block;
 border-style: solid;
 border-width: 2px;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
}

.current-favs {
 
}

.recents {
 margin-top: 1.5rem;
 background-color: var(--bar);
 display: inline-block;
 border-style: solid;
 border-width: 4px;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
}

.recents h2 {
 margin-bottom: 0em;
 margin-left: 3px;
}

.stage dl {
}

.box2 dd {
 padding: 3px;
 margin: 5px 3em 5px 1em;
 font-family: 'departure', monospace;
 font-size: 12px;
 background-color: var(--m1);
 outline-style: dashed;
 outline-width: 2px;
 outline-offset: -1px;
 outline-color: var(--d2);
}

.box2 dt {
 font-family: 'departure', monospace;
 margin-bottom: 0;
 margin-left: 7px;
 letter-spacing: 10px;
 font-size: 16px;
 background-color: var(--l2);
 display: inline-block;
 border-style: solid;
 border-width: 2px;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2)
}

.window dt:first-child {
 margin-top: -15px;
}

.box2 {
 grid-area: 2 / 24 / 32 / 32;
 overflow: auto;
}

.box3 {
 grid-area: 2 / 15 / 17 / 24;
 overflow: visible;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
}

.box3 .faves {
 display: grid;
 justify-content: end;
}

.box3 h1 {
 margin-bottom: 1px;
 margin-top: 1.5rem;
}

.box3 summary {
 font-family: 'departure', monospace;
 margin-bottom: 0;
 display: list-item;
 list-style-position: inside;
 letter-spacing: 10px;
 font-size: 16px;
 background-color: var(--l2);
 width: 12rem;
 border-style: solid;
 border-width: 2px;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
 transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, letter-spacing 0.05s ease;
}

.box3 summary::marker {
 content: url('/assets/mats/details-closed.gif');
}

.box3 summary:hover {
 background-color: #8C99BF;
 border-color: var(--l1) var(--d2) var(--d2) var(--l1);
 letter-spacing: 20px;
}

.box3 .fav-body {
  display: flex;
  justify-content: center;
  margin: 1em;
}

.box3 details[open] {
 width: 12.2rem;
 height: 14rem;
 font-size: 16px;
 background-color: var(--l2);
}

.box3 details[open] summary {
 background-color: #8C99BF;
 border-color: var(--l1) var(--d2) var(--d2) var(--l1);
 letter-spacing: 20px 
}

.box3 details[open] summary::marker {
  content: url('/assets/mats/details-open.gif');
}

.box3 details[open] img, .box3 details[open] iframe {
  width: 10rem;
  height: auto;
}


/**** ABOUT ****/


.abt-box {
 overflow: auto;
 grid-area: 4 / 2 / 25 / 32;
 padding: 2em 3em 3em 3em;
 background-color: #DCE5EE8F;
 border-style: solid;
 border-width: 4px;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
 overscroll-behavior: none;
 }

.tabs {
 grid-area: 2 / 2 / 4 / 25;
 display: flex;
 flex-direction: row;
 align-items: end;
 margin-left: 
}

.abt-tab {
 font-family: 'departure', monospace;
 letter-spacing: 3px;
 margin: 0 4px 2px 0;
 font-size: 13px;
 text-align: left;
 background-color: var(--l2);
 width: 9rem;
 height: 3rem;
 border-style: solid;
 border-width: 2px;
 border-color: var(--l1) var(--d2) var(--d2) var(--l1);
 transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, letter-spacing 0.05s ease;
}

.abt-tab:hover {
 background-color: #8C99BF;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
 letter-spacing: 6px;
 background-image: url('/assets/mats/');
}

[hidden] { display: none; }

.abt-tab[aria-selected="true"] { 
 background-color: #8C99BF;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
 letter-spacing: 6px;
}


/* localhost31415 */

.tab-content {
 height: 100%;
 width: 100%;
}

.abt-columns {
  display: flex;
} 

.abt-web {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 35rem;
  
  h1 {margin-top: 0; font-size: 20px;}
  h2 {margin-top: 1px; margin-bottom: 1px; font-size: 16px; width: 5rem;}
  p {margin-right: 0; margin-top: 2px; margin-bottom: 2px; font-size: 16px;}
}

.site-updates {
  margin-left: 4rem;
  margin-top: 3rem;
  width: 16rem;
  height: 23rem;
  padding: 5px;
  background-color: #CBCACC42;
  border-style: solid;
  border-width: 4px;
  border-color: var(--d2) var(--l1) var(--l1) var(--d2);
  overflow: scroll;
 
  h1 { margin-top: 2px; } 
  ul { list-style-image: url('/assets/mats/bullet.gif'); padding-left: 2em; }
  li { margin-bottom: 1em; padding: 4px;}

  summary { font-family: 'departure', monospace;
 	    display: list-item;
 	    list-style-position: inside;
 	    letter-spacing: 5px;
 	    font-size: 14px;
 	    background-color: var(--l2);
	    width: 14rem;
 	    border-style: solid;
	    border-width: 2px;
	    border-color: var(--l1) var(--d2) var(--d2) var(--l1);
 	    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, letter-spacing 0.05s ease;

	    &:hover { border-color: var(--d2) var(--l1) var(--l1) var(--d2); letter-spacing: 10px; }
	    
            &::marker { content: url('/assets/mats/site-update-closed.gif'); }	    
    }

  details[open] { 
	  width: 15rem;
 	  font-family: 'departure', monospace;
 	  font-size: 12px;
 	  background-color: var(--m1);
 	  outline-style: dashed;
 	  outline-width: 2px;
 	  outline-offset: -2px;
 	  outline-color: var(--d2);
		}

  details[open] summary { border-color: var(--d2) var(--l1) var(--l1) var(--d2); letter-spacing: 10px; 
                         &::marker{content:url('/assets/mats/site-update-active.gif');}}
	  }

/* albertine  */

.albertine-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sub-pages {
 display: flex;
 flex-shrink: 0;
 flex-direction: row;
 height: 1.5em;
 width: auto;
 border-style: solid;
 border-width: 0px 0px 2px 0px;
 border-color: black;
}

.sub-tab {
 font-family: 'cordata', monospace;
 letter-spacing: 3px;
 margin: -1rem 2rem 0 2rem;
 font-size: 14px;
 text-align: center;
 background-color: var(--l2);
 width: 15rem;
 height: 2rem;
 border-style: solid;
 border-width: 2px;
 border-color: var(--l1) var(--d2) var(--d2) var(--l1);
 transition: transform 0.2s ease, background-color 0.1s ease, border-color 0.2s ease, letter-spacing 0.05s ease; font-size: 0.1s ease;

 &:hover { 
   background-color: #A7AFC9;
   border-color: var(--d2) var(--l1) var(--l1) var(--d2);
   letter-spacing: 6px;
   font-size: 18px;
   background-image: url('/assets/mats/');
 }
 &[aria-selected="true"] {
   background-color: var(--face);
   border-color: var(--d2) var(--l1) var(--l1) var(--d2);
   letter-spacing: 6px;
   font-size: 18px;
   background-image: url('/assets/mats/sub-tab-active-bg.gif');
   background-repeat: no-repeat;
   background-position: left bottom;
 }
}

.albertine-content {
  flex: 1;
}


.background, .biographical, .raison-detre {overflow: scroll;}

/* background */

.about-rows{
 display: flex;
 gap: 5rem;
}

.current-fixations, .current-projects {
  dt { 
      width: 10rem; 
      margin: 0 0 2px 0; 
      padding: 0; 
      font-size: 20px; 
      font-family: 'cordata', monospace; 
      font-weight: bold;
      background-color: var(--l2);
      border-style: solid;
      border-width: 2px;
      border-color: var(--l1) var(--d2) var(--d2) var(--l1);
      transition: transform 0.2s ease, background-color 0.1s ease, border-color 0.2s ease;

      &:hover { background-color: var(--l1); }
      &[aria-expanded="true"] { background-color: var(--l1); border-style: solid; border-width: 2px; border-color: var(--d2) var(--l1) var(--l1) var(--d2); } 
     }

  dd { width: auto; margin: -1rem 0 0 0; padding: 0; background:initial; outline: initial;}
  h1 { letter-spacing: 0; 
       margin:0;
       background-color: #C8CAD4;
       border-style: solid;
       border-width: 5px;
       border-color: var(--d2) var(--l1) var(--l1) var(--d2);
       transition: transform 0.2s ease, background-color 0.1s ease, border-color 0.2s ease;

       &:hover { background-color: #AAACB6; }
       &[aria-expanded="true"] { background-color: #AAACB6; border-style: solid; border-width: 5px; border-color: var(--l1) var(--d2) var(--d2) var(--l1); } 

}
  h3 { font-family: 'cordata', monospace;
       font-size: 16px;
       font-weight: normal;
       margin: 0;
       background-color: var(--face);
       border-style: solid;
       border-width: 4px;
       border-color: var(--d2) var(--l1) var(--l1) var(--d2);
     
       &:first-child { margin-top: 1rem; }
    }
  p { font-size: 12px; margin: 0}
 }

.current-fixations {
 display: flex;
 flex-direction: column;
 width: 20rem;
 margin-left: 3rem;
}

.current-projects {
 display: flex;
 flex-direction: column;
 width: 20rem;
}

/* biographical  */

#abt-biographical.biographical { .albertine-content {height: 25rem;}}

.pic-albertine {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 30rem;
  width: 20rem;
  img {
       height: auto;
       width: 22rem;
       margin-left: 1em;
       margin-top: 2rem;
       outline-style: dotted;
       outline-width: 2px;
       outline-offset: 4px;
       outline-color: black;  
      }
}

.detail-lists {
 display: flex;
 flex-direction: column;
}

.detail-tabs {
 display: flex;
 width: 26rem;
 margin-top: 5px;
 padding-bottom: 10px;
 border-style: solid;
 border-width: 0px 0px 2px 0px;
 border-color: black; 
}

.detail-tab {
 font-family: 'cordata', monospace;
 font-size: 16px;
 text-align: center;
 background-color: var(--l2);
 width: 5.3rem;
 height: 1.5rem;
 margin: 0 2rem 0 2rem;
 border-style: solid;
 border-width: 2px;
 border-color: var(--l1) var(--d2) var(--d2) var(--l1);
 transition: transform 0.2s ease, background-color 0.1s ease, border-color 0.2s ease, letter-spacing 0.05s ease; font-size: 0.1s ease;

 &:hover { 
   background-color: #A7AFC9;
   border-color: var(--d2) var(--l1) var(--l1) var(--d2);
 }
 &[aria-selected="true"] {
   background-color: var(--face);
   border-color: var(--d2) var(--l1) var(--l1) var(--d2);
 }
}

.bio {
  height: 21.5rem;
  width: 27rem;
  margin-top: 2rem;
  margin-left: -1em;
  padding: 5px 0 0 1em;
  background-color: #CBCACC42;
  border-style: solid;
  border-width: 4px;
  border-color: var(--d2) var(--l1) var(--l1) var(--d2);
}

.detail-windows {
  width: 27rem;
  max-height: 15rem;

  .about-rows { gap: 1em; }
}

.list-block { 
              width: 14rem; 
              padding: 0;
	      h3 {
		  margin: 5px 2em -10px 0;
 		  letter-spacing: 4px;
 		  text-align: center;
 		  font-family: 'cordata', monospace;
 		  font-size: 16px;
 		  background-color: var(--bar);
 		  border-style: solid;
 		  border-width: 5px;
 		  border-color: var(--d2) var(--l1) var(--l1) var(--d2);
	      }

              ul { 
	           overflow-y: scroll; 
	           max-height: 15.5rem; 
	           padding: 0;
		   list-style-position:inside;
		   
		   &.personal-deets li {font-size: 14px; display: flex; flex-direction: column; overflow: visible;}

	         }
	      li {
 		  margin: 0em 1em 0.5em 0em;
 		  padding: 1px;
 		  font-family: 'departure', monospace;
 		  font-size: 12px;
		  font-weight: bold;
 		  background-color: var(--m1);
 		  border-style: solid;
 		  border-width: 3px;
 		  border-color: var(--d2) var(--l1) var(--l1) var(--d2);

		   &::marker { content: url('/assets/mats/abt-lists-a.gif');  }
		   &:nth-child(even)::marker { content: url('/assets/mats/abt-lists-b.gif')}
	         }
    
}

.influenced-by { 
  display: flex; 
  flex-direction: column; 
  width: 43rem;
  padding: 2em; 
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: #B8BEC9F2;
  border-style: solid;
  border-width: 4px;
  border-color: var(--l1) var(--d2) var(--d2) var(--l1);
}

.table-tab {
 font-family: 'cordata', monospace;
 font-size: 16px;
 font-weight: bold;
 text-align: center;
 background-color: var(--l2);
 width: 10rem;
 height: 2rem;
 border-style: solid;
 border-width: 2px;
 border-color: var(--l1) var(--d2) var(--d2) var(--l1);
 transition: transform 0.2s ease, background-color 0.1s ease, border-color 0.2s ease, letter-spacing 0.05s ease; font-size: 0.1s ease;

 &:hover { 
   background-color: #A7AFC9;
   border-color: var(--d2) var(--l1) var(--l1) var(--d2);
 }
 &[aria-selected="true"] {
   background-color: var(--face);
   border-color: var(--d2) var(--l1) var(--l1) var(--d2);
   background-image: url('/assets/mats/media-table-selected.gif'), url('/assets/mats/media-table-selected.gif');
   background-repeat: no-repeat, no-repeat;
   background-position: left bottom, right bottom;
 }
}

.media-table-head {
  h1 { margin-top:-1em;}
  .table-tabs { padding-bottom: 1em;
   	        border-style: solid;
  		border-width: 0px 0px 2px 0px;
 		border-color: black; }
}

.media-table-body {  
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  height: 30rem;
  table { width: 100%; padding: 2em; margin-left: -2em; }
  td { padding: 5px;
       position: relative;
       background-color: var(--l2);
       border-style: solid;
       border-width: 4px;
       border-color: var(--l1) var(--d1) var(--d1) var(--l1);  
      
       img { height: 150px; width: auto; filter: drop-shadow(1px 1px 1px var(--d2)); }
       &.favourite::after { content: ''; height: 150px; width: 150px; left: 0; top: 15px; right: 0; margin: 0; position: absolute; background-image: url('/assets/mats/fav-indic.gif'); background-repeat: no-repeat;} 
     }

           p { margin: 0; font-size: 14px; font-weight: bold; height: 8rem; width: 8rem; 
	      span { font-size: 10px; font-weight: normal; margin-top: 4rem;} 
      
             }
}

/* raison detre */

#abt-raison-detre { background-image: url('/assets/images/mami.png'); 
                    background-repeat: no-repeat;
	            background-position: bottom -7rem right;
	              }

.value-defns { 
 overflow-y: scroll;
 max-height: 29rem;
 padding: 3px 1em 1em 1em;
 width: 31rem;
 background-color: #DCE5EE8F;
 border-style: solid;
 border-width: 4px;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);;
	  dt {
	      margin: 0;
	      padding: 3px;
	      width: 28rem;
              font-family: 'cordata', monospace;
              font-size: 20px;
              background-color: #BABCC0A8;
              border-style: solid;
              border-width: 5px;
              border-color: var(--d2) var(--l1) var(--l1) var(--d2);
             }


	  dd {
	       margin: 3px 1em 3em 5px;
	       padding: 2px;
	       width: 26rem;
 	       font-family: 'departure', monospace;
 	       font-size: 14px;
 	       background-color: #CBCFD8;
 	       border-style: solid;
  	       border-width: 5px;
 	       border-color: var(--d2) var(--l1) var(--l1) var(--d2);

              }
}

/* inventory */

.online-satchel {
 background-color: var(--bar);
 height: 95%;
 width: 100%;
 display: inline-block;
 border-style: solid;
 border-width: 4px;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
 overflow-y: hidden;
 }

.stamps {
  height: 100%;
  width: 100%;
}

#stamp-page {
 border: 0;
 height: 100%;
 width: 100%;
}



/**** LOG PAGES ****/


.frame-tabs {
  grid-area: 3 / 4 / 5 / 29;
  display: flex; 
}

.frame-tab {
 font-family: 'cordata', monospace;
 font-weight: bold;
 letter-spacing: 3px;
 margin: 0 4px 2px 0;
 font-size: 24px;
 text-align: left;
 background-color: var(--l2);
 width: 15rem;
 height: 3rem;
 border-style: solid;
 border-width: 6px;
 border-color: var(--l1) var(--d2) var(--d2) var(--l1);
 transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, letter-spacing 0.05s ease;
}

.frame-tab:hover {
 background-color: #8C99BF;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
 letter-spacing: 6px;
 background-image: url('/assets/mats/btn-hover.gif');
 background-repeat: no-repeat;
 background-position: right;
}

[hidden] { display: none; }

.frame-tab[aria-selected="true"] { 
 background-color: #8C99BF;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
 letter-spacing: 12px;
}

.frame-container {
 grid-area: 5 / 2 / 25 / 32; 
 background-color: #DADDE1EB;
 border-style: solid;
 border-width: 4px;
 border-color: var(--d2) var(--l1) var(--l1) var(--d2);
}

.frame-body {
 height: 100%;
 width: 100%;
}

.frame {
  height: 100%;
  width: 100%;
}

#reader {
  border-radius: 10px;
  display: block;
  overflow: hidden;
  border: 0;
  width: 100%;
  height: 100%;
  }




/**** NOTES ****/


/**** IMAGES ****/


/**** ONLINE ****/


/**** NEW TAB ****/



/*=====             =====*/  
/*****== RIGHT COL ==*****/
/*=====             =====*/ 

.right-col {
 display: grid;
 grid-template-columns: repeat(8, 1fr);
 grid-template-rows: repeat(32, 2rem);
}
.lain {
 grid-area: 29 / 6 / 23 / 1;
 overflow: auto;
 }