:root {
  --clr01: #fff; /* white */
  --clr02: #000; /* black */
  --clr03: #777; /* dark grey */
  --clr04: #ddd; /* light grey */
  --clr05: #FCF5E5; /* parchment */
  --clr06: #800000; /* maroon */
  --clr07: #400000; /* dark red */
  --clr08: #ffff00; /* yellow */
  --clr09: #F9EBEA; /* light maroon */
  --clr10: #0000ff; /* blue */
  --clr11: #FCF3CF; /* pale yellow */
  --font01: "Open Sans", Tahoma, sans-serif;
  --font02: Aleo, Verdana, sans-serif;
  --font03: "Nanum Gothic Coding", "Times New Roman", serif;
}
*
 {box-sizing: border-box;
  color: var(--clr07);
  font-family: var(--font01);
  font-size: 12pt;
  margin: 0;
  padding:0;}
*::before,
*::after
  {box-sizing: border-box;}
a
 {text-decoration: none;}
body
 {background-color: var(--clr05);
  font-size: 12pt;}
a:hover
a:focus-visible
 {background-color: var(--clr01);
  border: 3px double var(--clr10);
  color: var(--clr10);
  font-size: 1.2rem;
  padding: 3px;
  font-weight: bold;}
article
 {content: normal;
  padding: 0 5% 0 5%;
  min-height: 65vh;
  width: 100vw;}
div
  {padding: 15px 25px;}
em
  {color: inherit;
    font-style: italic;
    font-size: inherit;font-weight: bold;}
footer
 {background-color: var(--clr06);
  border-top-width: 15px;
  border-top-style: solid;
  border-image: linear-gradient(to right, gold, yellow, white, gold) 1;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
  color: var(--clr08);
  margin: 25px 0 0 0;
  padding: 0;
  position: fixed;
  bottom: 0;
  right: 0;
  height: 100px;
  width: 100vw;
  text-align: right;}
  @media (max-width: 800px) {
    footer
    {position: fixed;
      font-size: 0.75rem;}
  }
h1
  {font-size: 2rem;
  font-family: var(--font01);
  margin: 25px auto;
  text-align: center;}
h2
  {font-size: 1.5rem;
  font-family: var(--font01);
  margin-bottom: 10px;
  text-align: left;}
h3
  {font-size: 1.25rem;
  font-family: var(--font01);
  margin-bottom: 5px;}
hr
 {border: 10px solid maroon;}
i
  {color: inherit;
  font-style: italic;
  font-size: inherit;}
img
  {display: inline-block;}
li
  {padding: 0 0 5px 2rem;
  text-indent: -1rem;}
li:first-of-type
  {padding-top: 5px;}
li li
  {margin-left: 3rem;
  text-indent: -3rem;}
nav
 {background-color: var(--clr06);
  border-bottom-width: 15px;
  border-bottom-style: solid;
  border-image: linear-gradient(to right, gold, yellow, white, gold) 1;
  border-right-width: 0;
  border-top-width:0;
  border-left-width:0;
  color: var(--clr08);
  display: flex;
  flex-direction: row;
  font-family: var(--font01);
  margin: 0;
  padding: 10px 0;
  top: 0;
  left: 0;
  min-height: fit-content;
  width: 100vw;
  z-index: 1;}
ol
 {font-size: inherit;
  margin: 3px 0 0 1rem;
  padding-left: 25px;}
ol > li
 {margin: 0;
  padding-left: 15px;}
p
 {margin: 0;
  padding: 0 0 5px 1rem;
  text-indent:none;}
section
  {display: contents;}
ul
  {list-style-type: none;
  padding-left: 2rem;
  text-indent: -1rem;}

div.bumper
 {display: block;
  height:150px;}

div.container
  {min-height: calc(100vh);}
.check li::before
  {content: "\2610  ";
    font-size: 1.5rem;}
.dotted li::before
 {content: "\25CF \00A0 \00A0";
  font-size: 0.5rem;}
.dotted li li::before
 {content: "\27A3 \00A0 \00A0";
  font-size: 0.5rem;}
.non_indent
 {text-indent: none;}
.visually_hidden
 {border: 0;
  clip-path: circle(0);
  display:none;
  overflow: hidden; 
  padding: 0; 
  position: absolute;
  text-decoration: none;}

  /* nav */
 .skip_div
  {background-color: var(--clr06);
   border: none;
   display: block;
   margin: 0;
   padding: 3px;
   position: relative;
   text-align: center;
   top: 0;
   left: 0;
   min-height: fit-content;}
 .skip_div a
 {background-color:var(--clr09);
  border: 3px single var(--clr06);
  color: var(--clr06);
  padding: 3px;
  text-align: center;
  width: fit-content;}
.skip_div a:hover,
.skip_div a:focus-visible
 {border: 3px double var(--clr06);
  color: var(--clr06);
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: underline;}
.skip_div a:visited
 {background-color:var(--clr09);
  color: var(--clr06);
  padding: 3px;}
 .left
  {margin: 0;
   padding: 0;
   width: 10%;}
 .center
  {color: var(--clr08);
   font-size: 1.25em;
   margin: 0;
   padding: 5px 2px;
   text-align: center;
   min-height: 50px;
   width: 80%;}
 .right
  {margin: 0;
   padding: 0;
   width: 10%;}
 nav.menu
  {background-color: transparent;
   border:none;
   border-radius: 0;
   margin: 15px auto;
   padding: 0;}
button#menu
 {background: url('images/menu.ico') no-repeat scroll 0 0 transparent;
  background-color: transparent;
  border-radius: 0;
  color: var(--clr01);
  height: 40px;
  margin: 5px 50px 5px 0;
  padding: 0;
  height: 50px;
  width: 75px;}
 ul#navdd
  {border:1px solid var(--clr02);
   display: none;
   margin: 0;
   padding:0;
   float: right;
   position: absolute;
   top: 75px;
   right: 50px;
   width: fit-content;
   z-index: 2;}
 #navdd li
  {background-color: var(--clr01);
   border: 1px solid var(--clr06);
   color: var(--clr02);
   display: block;
   margin: 0;
   padding: 3px 5px;
   text-indent: 0;
   min-width: 7rem;}
 #navdd li:hover
  {background-color: var(--clr09);}
 #navdd li a
  {color: var(--clr02);
   font-weight: inherit;
   display: block}
 #navdd li a:hover
  {font-size: inherit;}
 #navdd li a:focus-visible
  {background-color: var(--clr09);
   font-size: 1.1rem;
   font-weight: bold;
   padding: 5px;}

  /* sidebar */
div.section-container
 {display:grid;
  grid-template-areas:
    'main sb';
  gap: 3px;
  margin: 0;
  padding: 5px;
  width: 100%;}
    @media (max-width: 800px) {
      div.section-container
       {display: block;
        position: relative;
        width: 100%;}
    }
.main-container 
 {grid-area: main;
  margin: 0;
  padding: 0;
  width: 66vw;}
    @media (max-width: 800px) {
      .main-container
       {display: flex;
        flex-direction: column;
        width: 100%;}
    }
.main-container li
 {font-family: var(--font01);
  font-size: 1rem;
  color: var(--clr04);
  list-style-type: none;
  list-style-position: inside;}
 
.sidebar-container
 {grid-area: sb;
  padding: 0;
  width: 25vw;}
    @media (max-width: 800px) {
      .sidebar-container
       {display: flex;
        flex-direction: column;
        width: 100%;}
   }
 .sidebar-container > p
  {color: var(--clr02);
   font-family: var(--font01);;}
 .sidebar-container > h3
  {color: var(--clr02);
   font-size: 1.1rem;
   padding-left: 20px;}
     @media (max-width: 800px) {
       .sidebar-container > h3
        {display: none;}
     }
  .sidebar-container > h4
  {color:var(--clr02);
   margin: 0;
   padding: 25px 0 5px 5%;}
 .sidebar-container > img
  {margin: 10px 10%;
   width: 80%;}
 .shorty
  {background-color: var(--clr04);
   border: 1px solid var(--clr02);
   border-radius: 15px;
   grid-area: short;
   margin: 0 2% 1rem 2%;
   padding: 1.5rem 1.5rem;
   min-height: fit-content;
   max-width: 35vw;
   transition: width 2s;}
   @media (max-width: 800px) {
     .shorty
      {max-width: 100%;}
   }
 .shorty p
  {color: var(--clr02);
   font-family: var(--font03);
   font-size: 0.85rem;
   margin: 1px;
   padding: 3px}
 .shorty ul, ol
  {color: var(--clr02);
   font-family: var(--font03);
   font-size: 0.85rem;
   margin-left: 1rem;}
 .shorty li
  {color: inherit;
   font-family: var(--font03);
   font-size: 0.85rem;
   margin-left: 1rem;
   text-indent: -1rem;}
 .shorty li:first-child
  {padding-top: 5px;}
 .shorty h4
  {color: var(--clr02);
   font-size: 0.85rem;
   margin-bottom: 10px;}
 .shorty h5
  {color: var(--clr02);
   font-size: 0.85rem;
   margin-left: 1rem;
   margin-bottom: 10px;}
 p.citation
  {margin: 1px;
   padding: 3px;
   text-align: right;}
 ul.citation
  {list-style-type: none;
   margin: 0.25rem 0 1rem 25%;}
 .citation li
  {margin: 0;
   padding: 0;}
 .citation a
  {color: var(--clr02);
   font-size: 0.8rem;
   font-weight: bold;}
 .citation a:hover,
 .citation a:focus-visible
  {background-color: var(--clr09);
   border: 3px solid var(--clr03);
   box-shadow: none;
   font-size: 1rem;
   font-weight: bold;
   margin: 0;
   padding: 5px;}

   /* Up & Down */
div.ud
{display: none;
 position: relative;}
  @media (max-width: 800px)  {
   div.ud
    {display: block;
     position: fixed;
     top: 25%;
     right: 0;
     float: right;
     padding: 5px;
     background-color: var(--clr04);
     border: 1px solid var(--clr06);}
   .ud > a
   {color: var(--clr06);
     font-size: 1rem;
     margin: auto;
     padding: 5px;}
   .ud > a:hover
    {font-size: 1.1rem;}
 }

/* footer */
.e
 {grid-area: empty;
  margin: 0;
  padding: 0;}
footer div a
 {color: var(--clr08);
  margin: 0;
  padding: 0;}
.npc
 {grid-area: ver;
  color: var(--clr08);
  font-size: 1.25rem;
  margin: 3px 3px 0 3px;
  padding: 0;
  text-align: center;}
  @media (max-width: 800px) {
    .npc
    {font-size: 0.75rem;
      padding-top: 10px;}
  }
.npl
 {grid-area: previous;
  font-size: 12pt;
  margin: 0;
  padding: 10px 10px 0 10px;
  text-align: left;}
.npl > a
 {font-size: 12pt;}
.npl > a:hover,
.npl > a:focus-visible
 {background-color: var(--clr01);
  border: 3px double var(--clr10);
  color: var(--clr10);
  font-size: 1.2rem;
  padding: 5px;
  font-weight: bold;
  text-decoration: underline;}
.npr
 {grid-area: next;
  margin: 0;
  padding: 10px 10px 0 10px;
  text-align: right;}
.npr > a
  {font-size: 12pt;}
.npr > a:hover,
.npr > a:focus-visible
  {background-color: var(--clr01);
  border: 3px double var(--clr10);
  color: var(--clr10);
  font-size: 1.2rem;
  padding: 5px;
  font-weight: bold;
  text-decoration: underline;}
.last
 {color: var(--clr08);
  grid-area: last;
  font-size: 0.8rem;
  margin: 0;
  padding: 5px 10px;
  text-align: right;}
.grid-container
 {display: grid;
  grid-template-areas:
    'previous ver next'
    'empty empty last';
  width: 90%;
  margin: 0 auto;
  padding: 0;}
  @media (max-width: 800px) {
    .grid-container
    {grid-template-areas:
      'previous empty next'
      'ver ver last';
      width: 100%;}
    }
     

  /* under construction */
  div.under
  {background-color: var(--clr03);
   float: right;
   margin:0;
   opacity: 85%;
   position: fixed;
   height: calc( 100vh - 20% );
   width: 100vw;
   z-index: 1;}
 div.const
  {background-color: var(--clr08);
   border: 10px double var(--clr02);
   float: right;
   opacity: 100%;
   position: fixed;
   margin: 15% auto auto 15%;
   height: 30%;
   width: 70%;
   z-index: 2;}
 .const p
  {color: var(--clr02);
   font-family: var(--font02);
   font-size: 2.5rem;
   font-weight: bold;
   text-align: center;
   margin-top: 50px;}


/* Last update: 22 July 2024 */