@charset "UTF-8";



/* @FONT FACE (enable the use of 'custom fonts' inside your document) */

@font-face {
  font-family: 'Sofia Sans', sans-serif;
  font-weight: 100 900;
  /* font-family: 'Source Code Pro', monospace;
  font-weight: 200 300; */
}



/* VARIABLES */

:root {
  /* Color settings */
  --color-background: rgb(235, 235, 235);
  --color-text: rgba(20, 20, 20, 1);
  --color-text-link: rgba(0, 69, 133, 0.8);
  --color-text-link-hover: rgba(8, 8, 191, 0.4);
  /* Font settings */
  --font-family: 'Sofia Sans', sans-serif;
  --font-size: 24px;
  --font-weight: 400;
  /* Margins settings */
  --margin: 1rem;
  --primary-gradient: linear-gradient(rgba(148, 227, 255, 0.724), rgba(138, 138, 235, 0.524));
}



/* GENERAL STYLES */

html {
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  background-color: var(--color-background);
  /* background-image: linear-gradient(rgba(148, 227, 255, 0.724), rgba(138, 138, 235, 0.524)); */
  /* max-width: 100%;   */
  overflow-y: visible;
  overflow-x: hidden;
}

body {
  position: relative;
  /* background-color: var(--color-background); */
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  max-width: 100vw;
  height: auto;
  /* overflow-y: visible;  */
  /* overflow-x: hidden; */

}

a {
  color: var(--color-text-link);
  text-decoration: underline;
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

a:focus-visible {
  color: var(--color-text-link-hover);
  text-decoration: none;
}

h1 {
  /* h1 style */
  font-weight: 800;
}


h4 {
  font-weight: 800;
}

h5 {
  font-size: smaller;
}

p {
  /* paragraph style */
  font-weight: 400;
}



summary {
  font-weight: 400;
}



/* PAGE STYLES */

/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */
  padding-left: var(--margin);
}

div.rightmarg {
  max-width: 45rem;
  padding-right: var(--margin);
}

/* navigation */




/* GENERAL USABILITY */

/* hide desktop mobile etc */

.desktop {
  display: block;
}

.mobile {
  display: none;
}

/* if you want to hide something visually but want to keep it readable / accessible for screen readers (sr) */

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}


/* where ro is doing things yay this is fun -------------------------------------------------------------------------------------------- */


.sticky {
  position: -webkit-sticky;
  position: sticky;
  /* top: 0; */
  background: var(--color-background);
  background-clip: content-box;

  margin-left: 0;
  padding: 0;
}



.sticks1 {
  color: black;
  top: -1px;
  /* position: sticky */
}

.sticks2 {
  color: black;
  top: -1px;
}

.sticks3 {
  color: black;
  top: -1px;
}

.sticks4 {
  color: black;
  top: -1px;
}

.sticks5 {
  color: black;
  top: -1px;
}




.stuck1 p {
  font-weight: 800;
}

.stuck1 {
  padding-top: 1px;

  z-index: 100;

}

.stuck2 p {
  font-weight: 800;
}

.stuck2 {
  z-index: 99;
  padding-top: 1.1rem;

}

.stuck3 p {
  font-weight: 800;
  /* padding-top: calc(4px + 2.2rem); */
}

.stuck3 {
  z-index: 98;
  padding-top: 2.2rem;

}

.stuck4 p {
  font-weight: 800;
  /* padding-top: calc(6px + 3.3rem); */
}

.stuck4 {
  z-index: 97;
  padding-top: 3.3rem;

}

.stuck5 p {
  font-weight: 800;
  /* padding-top: calc(8px + 4.4rem); */
}

.stuck5 {
  z-index: 96;
  padding-top: 4.4rem;

}

ol {
  list-style: none;
  counter-reset: test;
  /* padding-left: 0px; */
  padding: 0;
  white-space: nowrap;
  list-style-position: outside;

}

li {
  display: inline;
  font-weight: 400;
}

ol li {
  counter-increment: test;
  line-height: 1.4rem;
  padding-top: 0.8rem;
}

li div p {
  margin-top: 0;
  margin-bottom: 0;
}


ol li div:before {
  content: counters(test, ".") ".\00A0";
  font-family: "Source Code Pro", "Courier", monospace;
  font-weight: 350;
  float: left;
  /* margin-top: 0.3rem; */
  clear: left;
  /* line-height: 0.95rem; */
}

@supports (font-variation-settings: "wght" 450) {
  ol li div:before {
    font-family: "Source Code Pro";
    font-weight: 350;
  }
}

.level1 {
  top: 0;
  z-index: 100;
  padding: 0;
  padding-top: calc(0em + 1px);
}

.level2 {
  /* padding: 0; */
  top: 1.1rem;
  z-index: 99;
}

.level3 {
  top: 2.2rem;
  z-index: 98;
}

.level4 {
  top: 3.3rem;
  z-index: 97;
}

.level5 {
  top: 4.4rem;
  z-index: 96;
}

.level6 {
  top: 5.5rem;
  z-index: 95;
}

.level7 {
  top: 6.6rem;
  z-index: 94;
}

.level8 {
  top: 7.7rem;
  z-index: 93;
}

.level9 {
  top: 8.8rem;
  z-index: 92;
}

.level10 {
  top: 9.9rem;
  z-index: 80;
}

.level11 {
  top: 11rem;
  z-index: 78;
}

.level12 {
  top: 12.1rem;
  z-index: 77;
}

.level13 {
  top: 13.2rem;
  z-index: 76;
}

.level14 {
  top: 14.3rem;
  z-index: 74;
}

.level15 {
  top: 15.4rem;
  z-index: 73;
}

.level16 {
  top: 16.5rem;
  z-index: 72;
}

.level17 {
  top: 17.6rem;
  z-index: 71;
}

.level18 {
  top: 18.7rem;
  z-index: 69;
}

.level19 {
  top: 19.8rem;
  z-index: 68;
}

.level20 {
  top: 20.9rem;
  z-index: 67;
}

.level21 {
  top: 22rem;
  z-index: 66;
}

.level22 {
  top: 23.1rem;
  z-index: 65;
}

.level23 {
  top: 24.2rem;
  z-index: 64;
}

.level24 {
  top: 25.3rem;
  z-index: 63;
}

.level25 {
  top: 26.4rem;
  z-index: 62;
}




.levelA {
  top: 0;
  z-index: 89;
  margin-top: 3rem;
  /* height: 2rem; */
}

/* ------------------------------------------------------------fix white space */
div.sticky {
  white-space: nowrap;
  overflow: scroll;
  /* text-overflow: ellipsis; */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */

}

/* Hide scrollbar for Chrome, Safari and Opera */
div::-webkit-scrollbar {
  display: none;
}

ul.nav,
ol {
  padding: 0;

}

ul li {
  display: block;

}

ul.glossary {
  margin-left: 0rem;
  font-size: 0.8rem;
}

li.gword {
  font-weight: 400;
}

.gword ul li {
  font-weight: 300;
}

p.mla {
  /* padding-top: .2rem; */
  margin-bottom: 0;
  font-size: 0.9rem;
}

p.refnote {
  font-weight: 300;
  margin-top: 0;
  font-size: 0.8rem;
}

/* .indentL {
  padding-left: .2rem;
} */

strong {
  font-weight: 650;
}

/* ol {
  list-style: none;
  counter-reset: test;
  list-style-position: inside;
  margin-left: 0px;
  padding-left: 0px;
}
ol li {
  counter-increment: test;
  padding-left: 0px;
  margin-left: 0px; 
   
}
ol li:before {
  content: counters(test, ".") "."\00A0;
  font-family: "Courier", monospace;
  padding-left: 0px;
  margin-left: 0px; 

} */



/* MEDIA QUERIES */

/* responsive typeface */

@media (max-width: 298px) {
  :root {
    --font-size: 15px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 299px) and (max-width: 339px) {
  :root {
    --font-size: 16px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 340px) and (max-width: 439px) {
  :root {
    --font-size: 17px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 440px) and (max-width: 599px) {
  :root {
    --font-size: 18px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 600px) and (max-width: 779px) {
  :root {
    --font-size: 19px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 780px) and (max-width: 992px) {
  :root {
    --font-size: 20px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  :root {
    --font-size: 22px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 1201px) and (max-width: 1319px) {
  :root {
    --font-size: 24px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 1320px) and (max-width: 1619px) {
  :root {
    --font-size: 26px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 1620px) and (max-width: 1879px) {
  :root {
    --font-size: 28px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 1880px) {
  :root {
    --font-size: 30px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}



/* website media queries */

@media (max-width: 779px) {

  /* styles for screen sizes 779px, should covers 'mobile' and 'tablet' */
  /* style this one first and then use the two others to 'override' some styles (exceptions/details) */






  /* utilities */

  /* .desktop {
    display: none !important;
  }

  .mobile {
    display: block;
  } */

}



@media (max-width: 339px) {

  /* use this query to apply style changes to smaller smartphones sizes (like an iPhone 5S or SE 2016), max size of 339px */

}

@media (min-height: 401px) and (max-height: 450px) and (orientation: landscape) {

  /* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */
  :root {
    --font-size: 14px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-height: 301px) and (max-height: 400px) and (orientation: landscape) {

  /* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */
  :root {
    --font-size: 12.5px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (max-height: 300px) and (orientation: landscape) {

  /* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */
  :root {
    --font-size: 11px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media print {
  :root {
    --color-background: #fff
  }

  ol li div:before {
    position: absolute;
    display: block;
    height: 100%;
    float: left;
    clear: left;
    /* margin-top: 0.3rem; */
    /* clear: left; */
  }

  div.sticky {
    white-space: normal;
    /* overflow: visible; */
  }

  p.wide1 {
    margin-left: 2rem;
  }

  p.wide2 {
    margin-left: 3.2rem;
  }

  p.wide3 {
    margin-left: 4.4rem;
  }

  p.wide4 {
    margin-left: 5.6rem;
  }

  p.wide5 {
    margin-left: 6.8rem;
  }

  p.wide6 {
    margin-left: 8rem;
  }

  p.wide7 {
    margin-left: 9.2rem;
  }

  p.wide8 {
    margin-left: 10.4rem;
  }

  p.wide9 {
    margin-left: 11.6rem;
  }

  p.wide10 {
    margin-left: 12.8rem;
  }

  p.wide11 {
    margin-left: 14rem;
  }

  p.wide12 {
    margin-left: 15.2rem;
  }


}