:root {
  --clr01: #fff; /* white */
  --clr02: #000; /* black */
  --clr03: #00f; /* blue */
  --clr04: #000080; /* navy */
  --clr05: #4E0870; /* deep purple */
  --clr06: #b0b0b0; /* silver */
  --clr07: #bbb; /* grey */
  --clr08: #ff0; /* yellow */
  --clr09: #ffffe0; /* light yellow */
  --clr10: #555; /* dark grey */
  --clr11: #feeb32; /* cautionary yellow */
  --clr12: #f00; /* red */
  --clr13: #dfe9fc; /* pale blue */
  --clr14: #eee; /* light grey */
  --clr15: #000050; /* dark navy */
  --font01: "Open Sans", Tahoma, san-serif;
  --font02: Aleo, Verdana, san-serif;
  --font03: "Nanum Gothic Coding", "Times New Roman", serif;
  --font04: Tahoma, Ariel, san-serif;
  --font05: Lekton, "Times New Roman", serif;}
html
 {height: 100%;}
*,
*::before,
*::after
  {box-sizing: border-box;}
*:focus-visible
 {background-color: var(--clr09);
  border: 1px solid var(--clr03);
  box-shadow: 3px 3px 5px var(--clr04);
  font-size: 1.1rem;
  font-weight: bold;
  margin: 2px;
  padding: 3px;}
body
 {background-color: var(--clr01);
  color: var(--clr04);
  display: flex;
  flex-direction: column;
  font-family: var(--font01);
  font-size: 12pt;
  margin: 0;
  padding:0;
  overflow-x: clip;
  min-height: 100%;
  width: 100vw;
  max-width: 1920px;}
a
  {color: var(--clr04);
   font-weight: bold;
   text-decoration: none;}
a:focus-visible
 {color: #00f !important;
  padding: 5px;
  text-decoration: underline;}
a:hover
 {color: #00f !important;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 5px;
  text-decoration: underline;}
a:visited
 {color: var(--clr05);}
article
 {content: normal;
  margin: 0;
  min-height: 60vh;}
  @media (max-width: 800px) {
    article
     {margin-right: 40px;}
  }
caption
 {font-size: 1.5rem;
  text-align: center;
  margin: 0;
  padding: 0;}
div
 {margin:0;
  padding: 5px 15px 15px 25px;}
dl
 {font-size: 1.2rem;}
dt
 {margin: 10px 0 0 2rem;}
dd
 {margin: 0 0 0 3rem;
  text-wrap: pretty;
  max-width: 85ch;}
dd a
 {font-size:0.8rem;}
em
  {color: inherit;
   font-style: italic;
   font-size: inherit;
   font-weight: bold;}
footer
 {background-color: var(--clr04);
  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: relative;
  bottom: 0;
  right: 0;
  height: fit-content;
  width: 100vw;
  max-width: 1920px;
  text-align: right;}
  @media (max-width: 800px) {
    footer
    {position: fixed;
      font-size: 0.75rem;}
  }
form
 {border: 2px solid var(--clr02);
  box-shadow: 5px 5px 10px var(--clr06);
  color: var(--clr02);
  margin: 10px 10%;
  padding: 5px;}
h1
 {font-size: 2rem;
  margin: 25px auto;
  text-align: center;}
h2
 {display: block;
  font-size: 1.5rem;
  margin: 25px auto 10px auto;
  text-align: center;}
h3
 {display: block;
  font-size: 1.25rem;
  margin: 25px auto 10px auto;
  text-align: center;}
h4
 {display: block;
  font-size: 1.15rem;
  margin: 1pt auto 10px 35%;
  text-align: left;}
    div:focus-visible > h4
     {font-size: 1.5rem;
      font-weight: bold;}
h5
 {display: block;
  font-size: 1.1rem;
  margin: 1pt auto 10px 40%;
  text-align: left;}
    div:focus-visible > h5
     {font-size: 1.1rem;
      font-weight: bold;}
h6
 {font-size: 1rem;
  font-weight: bold;
  margin: 1pt auto 10px 45%;
  text-align: left;}
    div:focus-visible > h6
     {font-size: 1rem;
      font-weight: bold;}
hr
 {border: 1px solid var(--clr02);
  margin: 25px 15% 5px 25%;
  width: 60%;}
  @media (max-width: 800px) {
    hr
     {margin: 5px 25%;
      width: 50%;}
  }
i
 {color: inherit;
  font-style: italic;
  font-size: inherit;}
img
 {display: inline-block;}
input
 {background-color: var(--clr01);}
li
 {font-family: var(--font01);
  font-size: 1rem;
  list-style-type: inherit;
  margin: 0 auto 5px 2rem;
  margin-bottom: 5px;
  text-indent: -0.75rem;
  text-wrap: pretty;}
li:last-child {
  margin-bottom: 10px;}
li li
 {font-family: inherit;
  margin: 0;
  text-indent: -1rem;}
nav
 {background-color: var(--clr04);
  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: 100dvw;
  max-width: 1920px;
  z-index: 1;}
ol
 {list-style-type: decimal;
  list-style-position: inside;
  margin: 0 auto 10px 1rem;
  padding: 0;}
ol > li
 {margin-left: 5%;}
p
 {margin: 0 5px 10px 2rem;
  padding:0;
  text-wrap: pretty;}
section
 {margin: 0 10% 0 15%;
  padding: 0;
  width: auto;}
section > h3
 {display: block;
  font-size: 20pt;
  margin: 1pt 0 10px 0;
  padding: 0;
  text-align: left;}
  @media (max-width: 800px) {
    section > h3
     {font-size: 16pt;
      font-weight: bold;
      text-indent:0;}
   }
section > h4
 {display: block;
  font-size: 18pt;
  margin: 1pt 0 10px 0;
  padding: 0;
  text-align: left;}
  @media (max-width: 800px) {
    section > h4
     {font-size: 14pt;
      font-weight: bold;
      text-indent:0;}
   }
section > h5
 {display: block;
  font-size: 16pt;
  margin: 1pt 0 10px 0;
  padding: 0;
  text-align: left;}
  @media (max-width: 800px) {
    section > h5
     {font-size: 12pt;
      font-weight: bold;
      text-indent:0;}
   }
section > h6
 {font-size: 14pt;
  font-weight: bold;
  margin: 1pt 0 10px 0;
  text-align: left;}
  @media (max-width: 800px) {
    section > h6
     {font-size: 10pt;
      font-weight: bold;
      text-indent:0;}
   }
section ol,
section ul
 {font-size: 1rem;
  margin-left: 2rem;}
section > section
 {margin: 0 0 0 3%;
  text-align: left;}
table
 {border: 1px solid var(--clr04);
  border-collapse: collapse;
  margin: 25px auto;
  padding: 0;
  width: 80%;}
table ol,
table ul
 {color: var(--clr04);}
tr
 {min-height: 1rem;}
th
 {background-color: var(--clr04);
  border: 2px solid var(--clr04);
  color: var(--clr08);
  font-family: var(--font01);
  font-size: 2rem;
  margin: 25px auto;
  padding: 0;
  text-align: center;
  vertical-align: top;}
td
 {background-color: var(--clr01);
  border: 1px solid var(--clr04);
  color: var(--clr04);
  font-size: 1rem;
  margin: 0;
  padding: 5px;
  vertical-align: top;}
ul
 {list-style-type: none;
  list-style-position: inside;
  margin: 0 auto 10px 1rem;
  padding: 0;}

.asterisk
 {color: var(--clr02);
  font-size: 1.25rem;
  font-weight: bold;
  vertical-align: super;}
.black
 {color: var(--clr02);}
.blank
 {color: var(--clr10);
  display: inline;
  font-family: var(--font03);
  font-style: italic;
  font-size: 0.8rem;
  padding: 0;
  margin: 0;
  text-decoration: underline;
  text-decoration-color: var(--clr02);
  text-transform: uppercase;
  }
.blank::before
 {color: var(--clr10);
  content: "[blank space for ";}
.blank::after
 {color: var(--clr10);
  content: "]";}
.blockhead
 {display: block;}
.change_notice
 {background-color: var(--clr09);
  border: 5px double var(--clr12);
  margin: 10px auto;
  padding: 1rem;
  max-width: 75%;}
.check li::before
  {content: "\2610  ";
   font-size: 1.5rem;
   letter-spacing: 1px;
   vertical-align: 25%;}
ul > li.dotted::before
 {content: "\25CF \00A0 \00A0";
  font-size: 0.75rem;
  letter-spacing: 1px;}
p.dot::before
 {content: "\25CF \00A0 \00A0";
  font-size: 0.5rem;
  letter-spacing: 1px;
  vertical-align: 25%;}
.dotted li::before
 {content: "\25CF \00A0 \00A0";
  font-size: 0.5rem;
  letter-spacing: 1px;
  vertical-align: 25%;}
.dotted li li::before
 {content: "\27A3 \00A0 \00A0";
  font-size: 0.5rem;
  letter-spacing: 1px;
  vertical-align: 25%;}
#end
 {display:none}
  @media (max-width: 800px) {
    #end
    {border: none;
      background-color: transparent;
      display: block;
      height: 150px;}
  }
p.example
 {border-left: 3px double var(--clr04);
  text-indent: -1rem;
  padding-left: 2rem;
  padding-right: 3rem;}
  @media (max-width: 800px) {
    p.example
     {border-left: 3px double var(--clr04);
      text-indent: -0.5rem;
      padding-left: 1rem;
      padding-right: 1.5rem;}
  }
.I
 {font-family: var(--font03);
  vertical-align: 2px;}
div.index_section
 {background-color: var(--clr04);
  border: 1px solid var(--clr08);
  outline: 3px solid var(--clr04);
  border-radius: 50%;
  box-sizing: border-box;
  padding: 10px;
  height: 50px;
  width: 50px;
  text-align: center;
  vertical-align: middle;}
.index_section
 {color: var(--clr08);
  font-family: var(--font02);
  font-size: 1.75rem;
  margin: 10px auto 10px 3rem;
  text-align: left;}
a.larger
 {color: var(--clr03);
  font-size: 1.25rem;
  padding: .5rem;
  text-decoration: underline;}
  @media (max-width: 800px) {
      a.larger
      {font-size: 1rem;}
    }
a.larger:focus-visible,
a.larger:hover
 {background-color: var(--clr09);
  border: 2pt double var(--clr03);
  font-size: 1.25rem;}
  @media (max-width: 800px) {
    a.larger:focus-visible,
    a.larger:hover
    {font-size: 1rem;}
  }
a.larger:visited
 {color: var(--clr03);}
.last
 {font-size: 0.9rem;
  text-align: left;}
h4.line
 {display: inline;}
h4.line ::after
 {content: "/a"}

section > #MainContent
 {margin-left: 10%;}
.no_dot ::before
 {content: none;}
ul.no_dot
 {list-style-type: none;}
.non_indent
 {text-indent: 0;}
p.note
 {font-size: 0.8rem;
  font-style: italic;
  margin:0;
  padding: 10px 5px;}
div.note_form
 {border: 3px double var(--clr02);
  border-radius: 15pt;
  margin: 2.5rem 25px 1rem 15px;
  min-width: fit-content;}
.note_form p
 {color: var(--clr02);
  font-size: 10pt;
  padding: 0.5rem;
  margin: 0;}
div.note_form2
 {background-color: var(--clr09);
  border: 3px double var(--clr03);
  border-radius: 15pt;
  box-shadow: 10px 10px 5px var(--clr07);
  padding: 1rem;
  margin: 2.5rem 10% 1rem 10%;
  min-width: fit-content;}
.note_form2 p
 {color: var(--clr02);
  font-size: 1.1rem;
  padding: 0 0 0.25rem 3%;
  margin: 0;}
  @media (max-width: 800px) {
      .note_form2 p
       {font-size: 1rem;}
  }
.paragraph_indent
 {text-indent: 1rem;
  margin-left: -0.5rem;}
div.pdf
 {margin: 0 0 20px 0;
  padding: 0;
  text-align: center;
  height: fit-content;
  width: 100%;}
.pdf a
 {text-align: center;}
.pdf a:hover,
.pdf a:focus-visible
 {border: none;
  color: var(--clr03);
  font-size: 1rem;
  margin-top: 0;
  padding-top: 0;
  text-decoration: underline;}
.pdf a:visited
 {color: var(--clr02);}
.pdf img
 {display: block;
  margin: 10px auto 0 auto;
  padding: 0;
  height: 60px;}
.quote
 {font-family: var(--font02);
  font-size: inherit;}
div.single
 {margin-left: 15%;
  width: 70%;}
  @media (max-width: 800px) {
    div.single
     {margin-left: 25px;
      width: 90%;}
  }
.smaller
 {font-size: smaller;}
.strike_through
 {text-decoration: line-through;}
.underline
 {text-decoration-line: underline;
  text-decoration-style: solid;}
.double_underline
 {text-decoration-line: underline;
  text-decoration-style: double;}
.ui
 {color: var(--clr02);
  font-family: var(--font05);
  font-size: 1.2rem;
  font-weight: bold;}
.ui_underline
 {color: var(--clr02);
  font-family: var(--font05);
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: underline;}
p.vh
 {color: transparent;
  font-size: 0%;
  overflow: hidden;
  padding: 0;
  margin: 0;}
.visually_hidden
 {border: 0;
  clip-path: circle(0);
  color: transparent;
  overflow: hidden; 
  padding: 0; 
  position: absolute;
  text-decoration: none;
  height: 0;
  width: 0;
  opacity: 0;}

 /* aside */
aside
 {grid-area: sb;
  margin:0 3% 0 0;
  padding: 0;
  width: fit-content;}
  @media (max-width: 800px) {
    aside
     {display: flex;
      flex-direction: column;
      width: 100%;}
  }
aside > p
 {color: var(--clr02);
  font-family: var(--font01);}
aside > h2,
aside > h3,
aside > h4,
aside > h5,
aside > h6
 {color: var(--clr02);
  display: block;
  font-family: var(--font01);
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0 0 5px 2rem;
  padding: 0 0 0 1rem;
  text-align: left;
  text-indent: 0;}
section > aside
 {grid-area: sb;
  margin:0 3% 0 0;
  padding: 0;
  width: fit-content;}
  @media (max-width: 800px) {
    section > aside
     {display: flex;
      flex-direction: column;
      width: 100%;}
  }
aside > p
 {color: var(--clr02);
  font-family: var(--font01);}

  /* footer */
footer table
 {background-color: var(--clr04);
  border-collapse: collapse;
  color:var(--clr08);
  margin: 10px 0 0 0;
  width: 100%;}
footer table td
 {background-color: var(--clr04);
  border: 5px solid var(--clr04);
  color: var(--clr08);
  font-size: 1.25rem;
  margin: 0;
  padding: 0;
  height: fit-content;
  width: 25%;}
  @media (max-width: 800px) {
    footer table td
     {font-size: 1rem;
      font-weight: normal;}
  }
footer table td.left
 {padding: 0 0 20 25px;
  text-align: left;
  vertical-align: middle;
  width: 25%;}
  @media (max-width: 800px) {
    .left a:hover,
    .left a:focus-visible
     {font-size: 1rem;
      font-weight: normal;}
  }
footer table td.center
 {text-align: center;
  vertical-align: middle;
  padding: 0;
  width: 50%;}
  @media (max-width: 800px) {
    footer table td.center
     {font-size: 10pt;
      font-weight: normal;}
  }
footer table td.right
 {padding:0 25px 0 0;
  text-align: right;
  vertical-align: middle;
  width: 25%;}
  @media (max-width: 800px) {
    .right a:hover,
    .right a:focus-visible
     {font-size: 1rem;
      font-weight: normal;}
  }
footer table td.legal
 {background-color: var(--clr09);
  color: var(--clr04);
  font-size: 1.2rem;
  font-weight: normal;
  padding: 5px;
  text-align: center;
  width: 50%;}
  @media (max-width: 800px) {
    footer table td.legal
     {font-size: 10pt;
      font-weight: normal;
      padding: 3px;}
  }
.legal span
 {display:none}
  @media (max-width: 800px) {
    .legal span
     {display: inline;}
  }
footer table td.last
 {font-size: 10pt;
  font-style: italic;
  padding:0 25px 35px 0;
  text-align: right;
  vertical-align: bottom;}
  @media (max-width: 800px) {
    footer table td.last
     {font-size: 8pt;
      font-weight: normal;}
  }
footer table td.last::before
 {content: "Last revision: ";
  font-style: normal;}
 @media (max-width: 800px) {
    footer table td.last::before
     {display: none;}
  }
footer a
 {color: var(--clr08);
  margin: 0;
  padding: 3px 5px;}
footer a:hover,
footer a:focus-visible
 {background-color: var(--clr09);
  border: 1px solid var(--clr03);
  color: var(--clr08);
  font-size: 1.2rem;}
footer a:visited
 {color: var(--clr08);}

  /* form */
div.form
 {background-color: var(--clr01);
  border: 1px solid var(--clr02);
  box-shadow: 10px 10px 10px var(--clr07);
  margin: 20px auto 20px 10%;
  padding: 1rem 3%;
  width: 75%;}
.form
 {font-size: 12pt;}
 @media (max-width: 800px) {
  .form
   {font-size: 10pt;}
    }
.form p
 {margin: 0 0 0.5rem 0;
  padding:0;
  text-indent: 0;}
.form li
 {margin: 0 0 3px 0;
  padding-left: 1rem;
  text-indent: -1rem;}
.form li li
  {padding-left: 1rem;
   text-indent: -1rem;}
.form ul, ol
 {margin: 0 5% 3px 5%;
  padding: 0;}
.form p.ss
 {padding-left: 8rem;}
.form_blank
 {color: var(--clr10);
  font-size: 10pt;
  margin:0;
  padding: 0;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--clr02);}
 @media (max-width: 800px) {
.form_blank
   {font-size: 8pt;}
    }
.form_blank::before
 {color: var(--clr10);
  content: "[blank space for ";}
.form_blank::after
 {color: var(--clr10);
  content: "]";}

    /* Header Levels */
div.header-container
 {margin: 5px 5px 20px 65%;
  width: fit-content;
  z-index: 1;}
  @media (max-width: 800px) {
    div.header-container
     {margin: 5px 5px 5px 5%;
      width: fit-content;}
  }
.header-container h1,
.header-container h2,
.header-container h3,
.header-container h4
 {display: block;
  margin:0;
  padding: 0;
  text-indent: 0;
  width: fit-content;
  z-index: 1;}
.header-container a,
.header-container a:visited
 {color: var(--clr04);
  display: block;
  font-size: 12pt;
  font-weight: bold;
  margin:0;
  padding: 2px 2px 2px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  white-space: nowrap;
  width: fit-content;
  z-index: 1;}
  @media (max-width: 800px) {
    .header-container a,
    .header-container a:visited 
     {font-size: 12pt;}
  }
.header-container a:hover
 {background-color: var(--clr09);
  font-size: 1.25rem;}
.title
 {font-size: 22pt;
  margin: 25px auto 25px 25px;
  text-align: left;
  text-indent: -3rem;}
  @media (max-width: 800px) {
    .title
     {font-size: 16pt;
      font-weight: bold;
      text-indent:0;}
   }

  /* Skip */
.skip_div
 {background-color: var(--clr04);
  border: none;
  display: block;
  margin: 0;
  padding: 2px;
  position: relative;
  text-align: center;
  top: 0;
  left: 0;
  height: fit-content;
  width: 100dvw;
  opacity: 1;
  max-width: 1920px;}
.skip-div.shorten
 {width: 0;
  height: 0;
  opacity: 0;}
.skip_div a,
.skip_div a:focus-visible,
.skip_div a:hover,
.skip_div a:visited
 {background-color:var(--clr09);
  border: 3px double var(--clr04);
  color: var(--clr03);
  font-size: 1.2rem;
  font-weight: bold;
  padding: 2px;
  position:absolute;
  top:0;
  left: 45%;
  text-decoration: underline;
  text-align:center;
  height: fit-content;
  width: fit-content;
  z-index: 10;}
#skip.is-closed
 {background-color: var(--clr04);
  color: transparent;
  border: none;}
#skip.is-closed:hover,
#skip.is-closed:focus-visible,
#skip.is-closed:visited
 {color: transparent;}
.left
 {margin: 0;
  padding: 0;
  width: 10%;}
.center
 {color: var(--clr08);
  font-size: 1.5em;
  margin: 0;
  padding: 25px 5px 15px 5px;
  text-align: center;
  min-height: 50px;
  width: 80%;}
.right
 {margin: 0;
  padding: 25px 15px 15px 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: var(--clr04);
  border: none;
  border-radius: 0;
  color: var(--clr01);
  margin: 0;
  padding: 0;
  height: 40px;
  width: 60px;}
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;}
#skip
 {margin: 5px auto;
  text-decoration: none;}
/*
#skip:focus-visible,
#skip:hover
 {background-color: transparent;
  border: none;
  color: var(--clr01);
  text-decoration: none;}
*/

  /* numbers */
table.numbers
 {margin: 10px auto;
  width: fit-content;}
.numbers thead th
 {color: var(--clr04);
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;}
.numbers th
 {background-color: var(--clr09);
  border: 1px solid var(--clr04);
  color: var(--clr04);
  font-size: 1rem;
  margin: 0;
  padding: 10px;
  text-align: right;}
.numbers td
 {background-color: var(--clr01);
  padding: 10px 3px;
  text-align: center;
  vertical-align: middle;
  word-wrap: normal;}
.numbers td a
 {font-weight: bold;
  text-decoration: none;}

  /* registration */
div.registration
 {background-color: var(--clr01);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 5px 10% 5px 10%;}
.registration div
 {border: 1px solid var(--clr04);
  font-size: 0.8rem;
  padding: 10px;
  text-align: left;
  word-wrap: normal;
  min-width: 40%;}
div.reg_header
 {background-color: var(--clr09);
  text-align:center;}

 /* search pop-up */
p.pop_note
 {color: var(--clr02);
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0;
  margin: 0 10% 0 20%;}
  @media (max-width: 800px) {
      p.pop_note
       {font-size: 1rem;
        font-weight: normal;}
  }
#searchButton
 {border-top: 3px solid var(--clr03);
  border-right: 3px solid var(--clr04);
  border-bottom: 3px solid var(--clr04);
  border-left: 3px solid var(--clr03);
  box-shadow: 5px 5px 5px var(--clr06);}
#searchButton:hover,
#searchButton:focus
 {border-top: 4px outset var(--clr03);
  border-right: 4px outset var(--clr04);
  border-bottom: 4px outset var(--clr04);
  border-left: 4px outset var(--clr03);}

  /* section-container */
.section-container
 {display: grid;
  grid-template-areas:
    "main sb";
  grid-template-columns: 2fr 1fr;
  gap: 3px;
  margin: 0;}
  @media (max-width: 800px) {
    .section-container
     {display: flex;
      flex-direction: column;
      margin-left: 2%;
      width: 100%;}
  }

 /* main-container */
.main-container
 {display: block;
  grid-area: main;
  margin: 0 0 0 5%;
  padding: 0 2%;
  text-align: left;
  width: auto;}
  @media (max-width: 800px) {
    section.main-container
     {display: flex;
      flex-direction: column;
      margin-left: 2%;
      width: 100%;}
  }
.main-container ul > li
 {font-family: var(--font01);
  font-size: 1rem;
  color: var(--clr04);
  list-style-type: none;
  list-style-position: inside;
  margin-left: 3%;
  max-width: 85%;}
.main-container p
 {max-width: 95%;}
.main-container ol
 {list-style-type: decimal;
  list-style-position: inside;
  margin: 0 auto 0.25px 1rem;
  padding: 0;}
.main-container ol > li
 {color: var(--clr04);
  font-size: 1rem;
  margin-left: 5%;}

 /* sidebar */
.sidebar-container > h2,
.sidebar-container > h3,
.sidebar-container > h4,
.sidebar-container > h5,
.sidebar-container > h6
 {color: var(--clr02);
  display: block;
  font-family: var(--font01);
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0 0 5px 2rem;
  padding: 0 0 0 1rem;
  text-align: left;
  text-indent: 0;}
.sidebar-container
 {grid-area: sb;
  margin:0;
  padding: 0;
  width: fit-content;}
  @media (max-width: 800px) {
    .sidebar-container
     {display: flex;
      flex-direction: column;
      width: 100%;}
  }
.sidebar-container > p
 {color: var(--clr02);
  font-family: var(--font01);}
.shorty
 {background-color: var(--clr14);
  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;
  width: 96%;}
  @media (max-width: 800px) {
    .shorty
     {max-width: 100%;}
  }
.shorty a,
.shorty a:visited
 {color: var(--clr02);
  padding: 2px;}
.shorty p,
.shorty dd,
.shorty dt
 {color: var(--clr02);
  font-family: var(--font03);
  font-size: 0.85rem;
  margin: 1px;
  padding: 3px}
.shorty > ol
 {color: var(--clr02);
  font-family: var(--font03);
  font-size: 0.85rem;
  margin-left: 1rem;}
.shorty > ul
 {color: var(--clr02);
  font-family: var(--font03);
  font-size: 0.85rem;
  list-style-type: none;
  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: 5px;
  text-align: right;}
ul.citation
 {list-style-type: none;
  margin: 0.25rem 0 1rem 25%;}
.citation li
 {margin: 0;
  padding: 5px;}
.citation a
 {color: var(--clr02);
  font-size: 1rem;
  padding: 7px;
  font-weight: bold;}
.citation a:hover,
.citation a:focus-visible
 {background-color: var(--clr09);
  border: 3px solid var(--clr03);
  box-shadow: none;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0;
  padding: 10px;}

  /* 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(--clr07);
      border: 1px solid var(--clr02);}
    .ud > a
    {color: var(--clr02);
      font-size: 1.25rem;
      margin: auto;}
    .ud > a:hover,
    .ud > a:focus-visible
     {font-size: 1.25rem;
      color: var(--clr03);
      margin: 0;
      padding: 0;
      text-align: center;
      text-decoration: none;}
  }

  /* under construction */
div.under
 {background-color: var(--clr10);
  float: right;
  margin:0;
  opacity: 85%;
  position: fixed;
  top: 120px;
  left: 0;
  height: 65%;
  width: 110vw;
  z-index: 1;}
div.const
 {background-color: var(--clr11);
  border: 10px double var(--clr02);
  float: right;
  opacity: 100%;
  position: fixed;
  margin: 10% 15% 15% 15%;
  height: 25%;
  width: 70%;
  z-index: 2;}
.const p
 {color: var(--clr02);
  font-family: var(--font02);
  font-size: 2.5rem;
  font-weight: bold;
  margin: 5% auto;
  text-align: center;}
  @media (max-width: 800px)  {
    div.const p
     {font-size: 2rem}
  }

  /* look & thumb */
div.look
 {background-color: var(--clr01);
  border: 2px solid var(--clr04);
  border-radius: 25px;
  box-shadow: 5px 7px 10px var(--clr06);
  color: var(--clr04);
  font-size: 1.5rem;
  font-weight: bold;
  margin: 25px 2rem 15px 0;
  padding: 1rem;
  text-align: left;
  width: fit-content;}
.look > img
 {margin: 0.25rem;
  max-height: 3rem;
  vertical-align: -1.25rem;}
.thumb p,
.what p
 {border-left: 2px solid var(--clr04);
  color: var(--clr04);
  padding: 0 0 0.25rem 1rem;
  margin: 0 0 0 2rem;}
.thumb li,
.what li
 {color: var(--clr04);
  margin: 0 0 0 2rem;
  padding:0;
  text-indent: -1rem;}
.thumb ol,
.thumb ul,
.what ol,
.what ul
 {border-left: 2px solid var(--clr04);
  margin: 0 0 0 2rem;
  padding:0 0 0 5px;}
.thumb ol ol,
.thumb ol ul,
.thumb ul ol,
.thumb ul ul,
.what ol ol,
.what ol ul,
.what ul ol,
.what ul ul
 {border-left: none;
  margin: 0 0 0 0.25rem;
  padding:0 0 0 0;}

/* Last update: 06 May 2026 */