/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face { font-family: "Courier New"; src: url('fPL/Courier New.ttf');}
@font-face { font-family: "Keyboard"; src: url('fPL/Keyboard.ttf');}

:root {
  --integrity: #D6F25E;
  --primacy: #FADA37;
  --agency: #fc8638;
  --contingency: #E0266B;
  --specificity: #6450EB;
  --bodytext: #dcddde;
}

h1 {
 font-family: Oxanium;
 padding-bottom: 1em;
 line-height: 125%;
 font-size: 34pt;
}

h2 {
  font-family: Oxanium;
  padding-bottom: 0em;
  line-height: 125%;
  font-size: 20pt;
}

code {
  font-family: Anonymous;
  font-size: 14pt;
  line-height: 125%;
}

.code-escape {
  font-family: Anonymous;
  font-size: 14pt;
  line-height: 125%;
}  

.body-text {
  margin-left: 16.67%;
  margin-right: 16.67%;
  margin-top: 3em;
  text-align: justify;
}

.integrity {
  color: var(--integrity);
}

.primacy {
  color: var(--primacy);
}

.agency {
  color: var(--agency);
}

.contingency {
  color: var(--contingency);
}

.specificity {
  color: var(--specificity);
}

.number {
  font-family: Anonymous;   
  color: var(--integrity);
  font-style: normal;
  font-weight: bold;
}

.modifier {
  font-family: Anonymous; 
  color: var(--primacy);
  font-style: italic;
  font-weight: bold;
}

.phrase {
  font-family: Anonymous;   
  color: var(--agency);
  font-style: normal;
}

.phenomenon {
  font-family: Anonymous;   
  color: var(--contingency);
  font-style: italic;
}

.response {
  font-family: Anonymous;   
  color: var(--specificity);
  font-style: italic;
  font-weight: bold;
}

.intent {
  font-family: Anonymous;   
  font-style: italic;
}

.token {
  font-family: Anonymous;   
  color: var(--specificity); 
}

.default-value {
  font-family: Anonymous;
  color: var(--primacy);
}


.collapsible {
  background-color: #141414;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: var(--contingency);
  cursor: pointer;
  padding: 10px;
  width: 80%;
  border: none;
  font-family: Oxanium;
  text-align: center;
  outline: none;
  font-size: 30px;
}

.collapsible-definition {
  background-color: #141414;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: var(--primacy);
  cursor: pointer;
  padding: 10px;
  width: 80%;
  border: none;
  font-family: Oxanium;
  text-align: center;
  outline: none;
  font-size: 30px;
}

/*.collapsible:hover {
  color: #E0266B;
}*/

.active {
  background-color: var(--contingency);
  color: black;
}

.active-definition {
  background-color: var(--primacy);
  color: black;
}

/*.active:hover {
  color: #701336;
}*/

.collapsible:after {
  content: '+';
  text-shadow: 0 0 10px var(--contingency);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.collapsible-definition:after {
  content: '+';
  text-shadow: 0 0 10px var(--primacy);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.collapsible:hover {
  color: white;
  text-shadow: 0 0 10px white;
}

.collapsible:hover:after {
  color: white;
  text-shadow: 0 0 10px white;
}

.collapsible-definition:hover:after {
  color: white;
  text-shadow: 0 0 10px white;
}

.active:after {
  content: "\2013";
  color: black;
}

.active-definition:after {
  content: "\2013";
  color: black;
}

.active:hover:after {
  color: white;
}

.active-definition:hover:after {
  color: white;
}

.content {
  background-color: black;
  border: #141414 solid;
  border-width: 0 3px 3px 3px;
  padding: 0 18px;
  max-height: 0;
  width: 80%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-family: Anonymous;
  font-size: 14pt;
  text-align: left;
  line-height: 125%;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  white-space: pre;
}

.codebox {
  border: #141414 solid;
  border-width: 3px;
  border-radius: 10px;
  width: 80%;
  font-family: Anonymous;
  text-align: left;
  padding: 1em;
}

.content-inner {
  padding-top: 1em;
  padding-bottom: 1em;
  white-space: pre;
  text-wrap: wrap;
}