/*fonts*/
  @font-face {
    font-family: "Jacquard24";
    src: url("/Fonts/Jacquard24-Regular.ttf") format("truetype")
  }
  @font-face {
    font-family: "body";
    src: url("/Fonts/SourceSerif4.ttf") format("truetype")
  }
  @font-face {
    font-family: "body-italic";
    src: url("/Fonts/SourceSerif4-Italic.ttf") format("truetype")
  }
/*variables*/
  :root {
  /* colors */
    --bg-color: #fed766;
    --main-ft-color: #272727;
    --h-color: #d74e09;
    --ext-a-color: #bc93fa;
    --int-a-color: #608068;
    --border-color: #608068;
/* margins */
    --big-margin: 3em;
    --sm-margin: 2em;
/*main text types*/
  body {
    color: var(--main-ft-color);
    background-color: var(--bg-color);
    font-family: "body", Serif;
  }
/*backgrounds*/
  p {
    margin: var(--sm-margin);
  }
/*lists*/
  ul, ol {
    display: inline-block;
    list-style-position: inside;
    text-align: left;
  }
  .mnlist {
    list-style-image: url("/images/moon-dot.png");
  }
/*footer formats*/
  .footer {
    position: sticky;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-image: url("/images/bgmoon.png");
    background-position: center;
    background-repeat: no-repeat;
    text-align: left;
  }
  .footerdk {
    position: sticky;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background-image: url("/images/bgmoondk.png");
    background-position: center;
    background-repeat: no-repeat;
    text-align: left;
  }
/*text classes*/
  .italic {
    font-family: body-italic;
  }
  .center {
    text-align: center;
  }
  .lg-para {
    text-align: justify;
    text-align-last: left;
  }
/*text box types*/
  .text-box {
    width: 80%;
    height: auto;
    margin: auto;
    padding: 40px;
    border: 2px dotted #608068;
    align-content: center;
    background-color: #FFFFFF65;
  }
  .alt-box {
    width: 80%;
    height: auto;
    margin: auto;
    padding: 10px;
    align-content: center;
  }
/*for external hyperlinks*/
  .ext {
    color: #bc93fa;
  }
  .ext:hover {
    text-shadow: 2px 2px 2px #bc93fa75;
  }
/*for internal hyperlinks*/
  .int {
    color: #608068;
  }
  .int:hover {
    text-shadow: 2px 2px 2px #60806875;
  }
/*headers*/
  h1, h2, h3, h4, h5, h6 {
    text-align: center;
    font-family: "Jacquard24", Serif;
    color: var(--h-color);
  }
  h1 {
    font-size: 48px;
  }
  h2 {
    font-size: 40px;
  }
  h3 {
    font-size: 36px;
  }
  h4 {
    font-size: 30px;
  }
  h5 {
    font-size: 26px;
  }
  h6 {
    font-size: 22px;
  }