:root {
   --window-shadow: inset -1px -1px #0a0a0a,
                    inset 1px 1px #dfdfdf,
                    inset -2px -2px #808080,
                    inset 2px 2px #ffffff;
   --window-inner-shadow: inset -1px -1px #ffffff,
                          inset 1px 1px #808080,
                          inset -2px -2px #dfdfdf,
                          inset 2px 2px #0a0a0a;                       
   --button-shadow: inset -1px -1px #0a0a0a,
                    inset 1px 1px #ffffff,
                    inset -2px -2px #808080,
                    inset 2px 2px #dfdfdf;
   --button-shadow-pushed: inset -1px -1px #ffffff,
                           inset 1px 1px #0a0a0a,
                           inset -2px -2px #dfdfdf,
                           inset 2px 2px #808080;
   
    --blue: #000187;
    --grey: #c0c0c0;
    --red: #eb4043;
    --green: #a7ad48;
    --off-white: #f7f6e9;
  }


  @font-face {
   font-family: "JetBrainsMono";
   src: url("../fonts/JetBrainsMonoNerdFont-Regular.ttf?#iefix");
  }

  body {
   background-image: url("../images/background-pool-tile.png");
	 background-position: left;
   font-size: 13px;
   font-family: "JetBrainsMono";
   color: var(--blue);
   margin: 0;
   }

/* -------------------------------------------------------------------------------------------------------------------------------------------------- grid layout */

  .big-grid {
   display: grid;
   grid-template-columns: 20px repeat(3, 1fr) minmax(0, 1fr);
   grid-template-rows: repeat(2, auto) 1fr auto;
   gap: 15px;
   min-height: 100vh;
  }
       
  .box-margin { 
   grid-column: 2 / 4;
   grid-row: 3;
  }

  .box-wide {
   grid-column: 2 / 5;
   grid-row: 3;
   min-width: 1000px;
  }
  
/* ------------------------------- set position inline */
  .box-offset {
    grid-column: 3;
    grid-row: 3;
    position: relative;
    z-index: 2;
    min-width: 500px;
  }

/* -------------------------------------------------------------------------------------------------------------------------------------------------- generic container components */

  .window-outer {
   display: block;
	 background-color: var(--grey);
   box-shadow: var(--window-shadow);
   border-width: 1px;
   padding: 5px;
   margin-bottom: 10px;
  }
  
  .window-inner {
   padding: 3px 10px;
   background-color: var(--off-white);
   box-shadow: var(--window-inner-shadow);
   margin-top: 5px;
   margin-bottom: 5px;
  }

  .title-bar {
   background-color: var(--green);
   padding: 2px 4px;
   display: flex;
   justify-content: start;
   align-items: center;
  }

  .title-bar-text {
   font-weight: bold;
   font-size: 90%;
   letter-spacing: 0;
   margin-right: 24px;
   margin-left: 8px;
  }

  .status-bar {
   margin: 0 1px;
   display: flex;
   padding: 0;
   gap: 1px;
  }

  .status-bar-field-1 {
   box-shadow: inset -1px -1px #dfdfdf,
               inset 1px 1px #808080;
   flex-grow: 1;
   padding: 1px 3px; 
  }

  .status-bar-field-2 {
   box-shadow: inset -1px -1px #dfdfdf,
               inset 1px 1px #808080;
   flex-grow: 6;
   padding: 1px 3px;
   text-align: right;
  }

  .window-outer-margin {
   margin-right: 40%;
	 background-color: var(--grey);
   box-shadow: var(--window-shadow);
   border-width: 1px;
   padding: 5px;
  }

  .sidenote {
   position: relative;
   float: right;
   clear: right;
   margin: 5px -97%;
   width: 90%;
   padding: 1px;
   background-color: var(--grey);  
   box-shadow: var(--window-shadow);
   z-index: 1;
  }
  
  .sidenote .status-bar {
    padding: 0 3px 3px;
  }

/* -------------------------------------------------------------------------------------------------------------------------------------------------- header */

  .box-header {
   grid-column: 1 / 6;
   grid-row: 1; 
   margin-top: 20px;
   margin-left: 35px;
   top: 20px;
   position: sticky;
   z-index: 4;
   min-width: 1024px;
  }

  .element-divider {
   grid-column: 1 / 6;
   grid-row: 1 / 3;
   margin-top: -20px;
   top: -55px;
   position: sticky;
   background-image: url("../images/background-pool-tile.png");
   background-position: left;
   border-bottom-style: double;
   border-bottom-width: thick;
   z-index: 3;
  }

  .box-nav {
   grid-column: 1 / 6;
   grid-row: 2;
   margin-top: -20px;
   margin-left: 35px;
   display: inline-flex;
   text-align: left;
   justify-content: flex-start;
   gap: 70px;
   top: 80px;
   position: sticky;
   z-index: 5;
  }

  .box-nav a figure {
   margin-left: 0;
   margin-right: 0;
   margin-bottom: -10px; 
  }

  .box-nav a figcaption {
   position: relative;
   top: -25px;
   left: 39px;
  }

  figcaption {
   margin-top: 3px;
  }

  figcaption span {
   background-color: var(--off-white);
   padding: 0 3px;
  }

  #here {
   background-color: var(--red);
   color: var(--off-white);
  }

/* -------------------------------------------------------------------------------------------------------------------------------------------------- index components */

  .box-small-1 {
   grid-column: 2;
   grid-row: 3;
   width: 415px;
  }

  .box-small-2 {
   grid-column: 3;
   grid-row: 3;
   min-width: 420px;
   margin-top: 50px;
   margin-left: -100px;
   z-index: 2;
  }

  .box-small-3 {
   grid-column: 4;
   grid-row: 3;
   min-width: 350px;
  }  

  .box-footer {
   grid-column: 1 / 6;
   grid-row: 4;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   border-style: double none;
   border-width: thick;
   background-color: var(--grey);
  }
                          
  .window-inner-scroll {
   max-height: 260px;
   overflow-y: scroll;
   margin-right:-8px;
   scrollbar-color: var(--grey) var(--off-white);
  }
  
  

  .scrolling-text {
   animation-name: scroll;
   animation-duration: 40s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
  }

  @keyframes scroll {
   from {
    translate: 100vw 0;
   }
   to {
    translate: -95em 0;
   }
  }


/* -------------------------------------------------------------------------------------------------------------------------------------------------- outbox components */

  .outbox-grid {
   display: grid;
   grid-template-columns: 1fr 3fr 1fr;
   grid-template-rows: repeat(3, auto);
   gap: 0;
  }

  .box-outbox-1 {
   grid-column: 1;
   grid-row: 1;
   background-color: var(--off-white);
   box-shadow: var(--window-inner-shadow);
   margin-top: 5px;
   margin-bottom: 5px;
  }

  .box-outbox-2 {
   grid-column: 2;
   grid-row: 1;
   background-color: var(--off-white);
   box-shadow: var(--window-inner-shadow);
   margin-top: 5px;
   margin-bottom: 5px;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden; 
  }

  .box-outbox-3 {
   grid-column: 3;
   grid-row: 1;
   background-color: var(--off-white);
   box-shadow: var(--window-inner-shadow);
   margin-top: 5px;
   margin-bottom: 5px; 
  }

  .title-bar-outbox {
   background-color: var(--green);
   padding: 2px 4px;
   margin-top: 2px;
   margin-left: 2px;
   margin-right: 2px;
   margin-bottom: 2px;
  }

  .title-bar-text-outbox {
   font-weight: bold;
   font-size: 90%;
   letter-spacing: 0; 
  }

  .outbox-item {
   border-bottom-style: solid;
   border-bottom-width: 1px;
   margin: 2px 2px;
   padding: 0px 4px;
   max-width: 100%;
   height: 16px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-top: 2px;
  }

 /* -------------------------------------------------------------------------------------------------------------------------------------------------- change-log */
 
  .window-inner-log {
   padding: 3px 10px;
   background-color: var(--blue);
   box-shadow: var(--window-inner-shadow);
   margin-top: 5px;
   margin-bottom: 5px;
   padding-top: 15px;
   padding-bottom: 15px;
  }

  .window-inner-log hr {
   border-style: dashed;
  }
 
  .log-item {
   color: var(--grey);
   line-height: 2em;
   margin-left: 86px;
   text-indent: -86px;
  }
 
  .log-item-2 {
   color: var(--grey);
   line-height: 2em;
  }
 
 /* -------------------------------------------------------------------------------------------------------------------------------------------------- text formatting */
 
  article {
   display: block;
   padding: 8px 4px;
  }

  p {
   line-height: 2.2em;
   margin-bottom: 2.2em;
  }
 
  .status-bar-field-1, .status-bar-field-2 {
   font-size: 80%;
  }
  
  ul {
    padding-left: 2em;
  }
  
  small {
    font-size: 90%;
  }
  
/* --------------------------- format for side-notes */

  .sidenote small {
   display: block;
   margin: 4px 4px;
   padding: 8px 4px;
   line-height: 1.7em;
   box-shadow: var(--window-inner-shadow); 
  }
 
/* --------------------------- block quote */

  blockquote {
   border-left-style: solid;
   border-width: 2px;
   font-style: italic;
   line-height: 2.2em;
   padding-left: 20px;
   margin-bottom: 2.2em;
   text-indent: -17px; 
  }

  blockquote p {
   margin-bottom: 0em;
   margin-top: 0em;
  }

  blockquote p:before {
   content: '"';
   font-size: 16px; 
  }

  blockquote p:after {
   content: '"';
   font-size: 16px;
  }

/* --------------------------- superscript */

  .box-wide sup {  
   vertical-align: text-top;
  }

  sup {
   line-height: 0;
   color: var(--off-white);
   background-color: var(--blue);
   vertical-align: 0.35em;
   font-size: 75%;
   padding: 0 2px;
  }

/* --------------------------- links */

  a:visited {
   color: blue;
  }

  .log-item a:link, .log-item-2 a:link {
   color: var(--blue);
   background-color: var(--grey);
  }

  .log-item a:visited, .log-item-2 a:visited {
   color: var(--blue);
   background-color: var(--grey);
  }
 
  .box-nav a:link, .outbox-item a:link {
   text-decoration: none;
   color: var(--blue);
  }

  .box-nav a:visited, .outbox-item a:visited {
   text-decoration: none;
   color: var(--blue);
  }

/* --------------------------- text decoration */

  .underline {
   text-decoration: underline;
   display: inline;
  }

/* -------------------------------------------------------------------------------------------------------------------------------------------------- image formatting */

  .image-container {
   box-shadow: var(--window-inner-shadow);
   padding: 2px;
   margin-top: 5px;
   margin-bottom: 5px;
  }

  .image-container img {
   width: 100%;
  }

  .box-header img {
   max-width: 100%;
  }

/* -------------------------------------------------------------------------------------------------------------------------------------------------- media player*/

  button {
   background-color: var(--grey);
   box-sizing: border-box;
   border: none;
   box-shadow: var(--button-shadow);
   display: inline-flex;
   padding: 2px 12px;
  }

  button:active {
   box-shadow: var(--button-shadow-pushed);
  }

  .line-container-1 {
   margin: 5px 2px;
   display: flex;
   padding: 0;
   gap: 3px;
   max-height: 20px;
   width: 100%;
  }

  .screen1 {
   box-shadow: var(--window-inner-shadow);
   background-color: black;
   color: var(--green);
   display: inline-flex;
   padding: 1px 6px;
   min-width: fit-content;
   flex-grow: 1;
   gap: 3px;
  }

  .track-number {
   display: inline-flex;
  }

  .current-time {
   display: inline-flex;
  }

  .control-buttons {
   display: inline-flex;
   flex-grow: 1;
  }

  .line-container-2 {
   margin: 5px 2px;
   display: flex;
   max-width: 100%;
   padding: 0;
   gap: 3px;
  }

  .detail1 {
   padding: 2px 3px;
   display: inline-flex;
   width: 50px;
   font-size: 12px;
  }

  .detail2 {
   box-shadow: var(--window-inner-shadow);
   display: inline-flex;
   padding: 2px 3px;
   flex-grow: 3;
   font-size: 12px;
  }

  .track-title {
   box-shadow: var(--window-inner-shadow);
   padding: 2px 3px;
   display: inline-flex;
   flex-grow: 3;
   font-size: 12px;
  }

  .track-artist {
   box-shadow: var(--window-inner-shadow);
   padding: 2px 3px;
   display: inline-flex;
   flex-grow: 3;
   font-size: 12px;
  }


/* -------------------------------------------------------------------------------------------------------------------------------------------------- mobile formatting */

@media (max-width: 768px) {
  
  .sidenote {
   display: block;
   float: none;
   margin: 5% 10% 5% 10%;
   width: 90%;
   z-index: 1;
  }
  
  .window-outer-margin {
   margin-right: 0;
  }
  
  .big-grid {
   gap: 5px;
   grid-template-rows: repeat(6, auto);
   padding: 5px;
   min-height: 0;
  }
 
  .box-header {
   min-width: 100%;
   max-width: 100%;
   margin-left: 0px;
   z-index: 4;
  }
  
  .element-divider {
   top: -20px;
  }
   
  .box-nav {
   top: 67px;
   margin-left: 5px;
   margin-top: 0;
   width: 95%;
   flex-wrap: wrap;
   flex-direction: row;
   gap: 0 50px; 
  }

  .box-nav figure {
   margin-top: -5px;
  }

  .box-margin {
   grid-column: 1 / 6; 
   grid-row: 3;
  }
 
  .box-wide {
   grid-column: 1 / 6; 
   grid-row: 3;
   min-width: 100%;
   max-width: 100%;
  }
  
  .box-offset {
    grid-column: 1 / 6;
    grid-row: 4;
    max-width: 100%;
    min-width: 100%;
  }
  
  .box-small-1 {
   grid-column: 1 / 6; 
   grid-row: 3;
   width: 100%;
  }
  
  .box-small-2 {
   grid-column: 1 / 6; 
   grid-row: 4;
   margin-left: 0;
   margin-top: 0;
   min-width: 100%;
   max-width: 100%;
  }
  
  .box-small-3 {
   grid-column: 1 / 6; 
   grid-row: 5;
   min-width: 100%;
   max-width: 100%;
  }
       
  .box-footer {
   grid-column: 1 / 6;
   grid-row: 6;
  }

}