:root {
  /* colour palette */
  --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;
  /* font sizing */
  --step: 0.5rem;
  --text: 1rem;
  --small: 0.85rem;
  --big: 1.5rem;
}

/* 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;
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}

*:not(dialog) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

/* global */

html {
  overscroll-behavior: none;
  font-family: "departure", monospace;
  font-size: 12px;
}

body {
  margin: 2rem auto 0 auto;
  max-width: 90rem;
  height: 95vh;
  background-image: url("/assets/gifs/PN_88-dither.png");
  background-repeat: repeat-y;
  background-size: cover;
}

.frame {
  display: grid;
  grid-template-columns: 15rem 50rem 20rem;
  padding: 1em;
}

.box-jacket {
  border-left: 2px solid #e7e7e700;
  border-right: 2px solid #e7e7e700;
  border-top: none;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  outline-style: solid;
  outline-width: 1px;
  outline-offset: -1px;
  padding: 5px;
  background-color: var(--main-body);
}

.box-shirt {
  border-style: solid;
  border-width: 3px;
  border-color: var(--d2) var(--l1) var(--l1) var(--d2);
  background-color: var(--main-body);
}

/* 
===-------------===
=== left column ===
===-------------===
 */

  .left-column {}

  .left-column-hat {
    height: 15rem;
    img { height: 14rem; }
  }

  .left-column-jacket, .centre-column-jacket {
    border-left: 0.7rem solid #e7e7e700;
    border-right: 0.7rem solid #e7e7e700;
    border-top: none;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    outline-style: solid;
    outline-width: 1px;
    outline-offset: -1px;
    padding-bottom: 1em;
    background-color: var(--main-body);
  }

  .left-column-head, .centre-column-head, .right-column-head {
    height: 2rem;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 3px;
    p {
      font-family: 'PS55', monospace;
      display: flex;
      align-items: center;
      width: 80%;
      height: 60%;
      background-color: var(--bar);
      border-style: solid;
      border-width: 2px;
      border-color: var(--l1) var(--d2) var(--d2) var(--l1);
      font-size: 9px;
      letter-spacing: 5px;
      padding-left: 1em;
      line-height: 1; 
    }
  }

  .left-column-body, .centre-column-body {
    border-style: solid;
    border-width: 5px;
    border-color: var(--d2) var(--l1) var(--l1) var(--d2);
    background-color: var(--face);
  }

  .nav-button {
    display: flex;
    width: 95%;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 11px;
    letter-spacing: 5px;
    background-color: #f2dae3b8;
    border-style: solid;
    border-width: 2px;
    border-color: var(--l1) var(--d2) var(--d2) var(--l1);
  }

  .dir-opts, .pm-opts, .nerve-opts { 
    display: flex;
    flex-direction: column;
    align-items: center;
    a {
      display: flex;
      height: 2.2rem;
      margin-top: 5px;
      margin-bottom: 3px;
      width: 90%;
      background-color: var(--l2);
      border-style: solid;
      color:#48485C;
      border-width: 2px;
      border-color: var(--d2) var(--l1) var(--l1) var(--d2);
      text-decoration: none;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; 
    }
    a:hover {  
      background-color: #8C99BF;
      border-color: var(--l1) var(--d2) var(--d2) var(--l1);
    }
  }

  .l-1 {
    display: flex;
    flex-direction: column;
    padding: 3px;
  }
 

  /* 
  ===-------------===
  == centre column ==
  ===-------------===
   */

  .centre-column {
    padding: 0 3px 0 3px;
  }

  .abt-box {
    display: flex;
    height: 50rem;
    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 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 3rem;
  }

  .abt-tab {
    font-family: 'departure', monospace;
    margin: 0 3em 0 3em;
    font-size: 11px;
    text-align: left;
    background-color: var(--l2);
    width: 12rem;
    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.2s ease, border-color 0.2s ease;
  }

  .abt-tab:hover {
    background-color: #8C99BF;
    border-color: var(--d2) var(--l1) var(--l1) var(--d2);
    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);
  }


  /* localhost31415 */

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

  .abt-columns {
    display: flex;
    overflow: scroll;
  } 

  .abt-web {
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    width: 35rem;
    height: 46rem;
    overflow: scroll;
  }

  .site-updates {
    width: 17rem;
    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;
    scrollbar-width: none;

    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;
      background-color: var(--l2);
      width: 12rem;
      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: 1px; }

      &::marker { content: url('/assets/mats/site-update-closed.gif'); }	    
    }

    details[open] { 
      width: 12rem;
      font-family: 'departure', monospace;
      outline-style: dashed;
      outline-width: 1px;
      outline-offset: -2px;
    }

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

  /* circle  */

  .circle-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);
      background-image: url('/assets/mats/');
    }
    &[aria-selected="true"] {
      background-color: var(--face);
      border-color: var(--d2) var(--l1) var(--l1) var(--d2);
      background-image: url('/assets/mats/sub-tab-active-bg.gif');
      background-repeat: no-repeat;
      background-position: left bottom;
    }
  }

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

  /* background */

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

  /* biographical  */

  .content { 
  display: flex;
}

  .pic {
    display: flex;
    justify-content: center;
    img {
      height: auto;
      width: 18rem;
      margin-left: 1em;
      margin-top: 2rem;
      outline-style: dashed;
      outline-width: 1px;
      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;
    text-align: center;
    background-color: var(--l2);
    width: 8rem;
    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: 25rem;
    padding: 5px 0 0 1em;
    margin: 5px 0 0 5em;
  }

  .detail-windows {
    max-height: 30rem;
  .about-rows { 
  gap: 1em; }
  }

  .list-block { 
    width: 14rem; 
    padding: 0;
    h3 {
      letter-spacing: 4px;
      text-align: center;
      font-family: 'cordata', monospace;
    }

    ul { 
      overflow-y: scroll; 
      max-height: 30rem; 
      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;
      border-style: dashed;
      border-width: 0 0 1px 0;

      &::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; 
  }

  .table-tab {
    font-family: 'cordata', monospace;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: var(--l2);
    width: 8rem;
    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 {
    display: flex;
    justify-content: center;
    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: 40rem;
    table { width: 100%; padding: 1em; }
    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: 100px; 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);

    }
  }

  /*
  ===-------------===
  == right column  ==
  ===-------------===
   */

  .right-column {
    max-width: 35rem;
    height: 70rem;
    padding: 1px;
    font-size: var(--small);
  }

  .stamps {
    width: 35rem; height: 60rem;
    iframe { width: 30rem; height: 60rem; border: none; }
  }
  
  
/* mobile */

  @media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  .frame { display: flex; flex-direction: column; }

  .left-column-hat { display: flex; justify-content: center; }

  .left-column,
  .centre-column,
  .right-column { width: 100%; }


  .tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 3rem;
  }
  .abt-box { padding: 1em;}
  .abt-tab {
    font-family: 'departure', monospace;
    margin: 0 1em 0 1em;
    font-size: 9px;
    text-align: left;
    background-color: var(--l2);
    width: 9rem;
    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.2s ease, border-color 0.2s ease;
  }

  .circle-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: 0px;
    margin: -1rem 1rem 0 2rem;
    font-size: 9px;
    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);
      background-image: url('/assets/mats/');
    }
    &[aria-selected="true"] {
      background-color: var(--face);
      border-color: var(--d2) var(--l1) var(--l1) var(--d2);
      background-image: url('/assets/mats/sub-tab-active-bg.gif');
      background-repeat: no-repeat;
      background-position: left bottom;
    }
  }

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

  /* background */

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

  
  .abt-columns {
    flex-direction: column;
    height: 45rem;
  }

  .abt-web { width: 100%; }

  .site-updates {
    margin-top: 1em;
    width: 100%;
    }

  /* biographical  */

  .content { 
  display: flex;
}

  .pic {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 3em;
    img {
      height: auto;
      width: 18rem;
      margin-left: 1em;
      margin-top: 2rem;
      outline-style: dashed;
      outline-width: 1px;
      outline-offset: 4px;
      outline-color: black;  
    }
  }

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

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

  .detail-tab {
    font-family: 'cordata', monospace;
    text-align: center;
    background-color: var(--l2);
    font-size: 9px;
    width: 6rem;
    height: 1.5rem;
    margin: 0 1em 0 1em;
    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: 25rem;
    padding: 0px;
    margin: 0px;
  }

  .detail-windows {
    max-height: 30rem;
  .about-rows { 
  gap: 1em; 
    display: flex;
    flex-direction: column;}
  }

  .list-block { 
    width: 14rem; 
    padding: 0;
    h3 {
      letter-spacing: 4px;
      text-align: center;
      font-family: 'cordata', monospace;
    }

    ul { 
      overflow-y: scroll; 
      max-height: 30rem; 
      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;
      border-style: dashed;
      border-width: 0 0 1px 0;

      &::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;
  }

  .table-tab {
    font-family: 'cordata', monospace;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: var(--l2);
    width: 8rem;
    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 {
    display: flex;
    justify-content: center;
    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: 40rem;
    width: 25rem;
    table { width: 100%; padding: 0em; }
    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: 60px; width: auto; filter: drop-shadow(1px 1px 1px var(--d2)); }
      &.favourite::after { content: ''; height: 50px; width: 50px; 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: 8px; font-weight: bold; height: 60px; width: 60px; 
      span { font-size: 6px; font-weight: normal; margin-top: 4rem;} 

    }
  }
  .value-defns { 
    overflow-y: scroll;
    max-height: 29rem;
    padding: 3px 1em 1em 1em;
    width: 20rem;
    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: 18rem;
      font-family: 'cordata', monospace;
      font-size: 16px;
      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: 16rem;
      font-family: 'departure', monospace;
      font-size: 9px;
      background-color: #CBCFD8;
      border-style: solid;
      border-width: 5px;
      border-color: var(--d2) var(--l1) var(--l1) var(--d2);

    }
  }

  .right-column { display: flex; justify-content: center; }
}