:root {
  --pale: #DEDEDE;
  --offwhite: #FFFFEF;
  --pine: #234234;
  --gray: #555555;
  --lightGray: #CCCCCC;
  --coolPurple: #3333DD55
  --footerBg: #DDDDDD; 
  --footerBorder: #BBB;
  
  --theme_background: #333;
  --theme_font_color: #CDECDE;
}

@font-face {
  font-family: decorativeText;
  src: url('../adine-kirnberg/Spirax-Regular.ttf');
}

body {
  background-color: var(--theme_background);
  background-image: url(/multicolored_lights.jpg); 
  background-size: 2048px 300px; 
  background-repeat: no-repeat; 
  color: var(--theme_font_color);
}

blockquote {
  display:block; 
  left: 2em;
}

pre  {
  display: none; 
}

hr {
  width:100%; 
  border-top: inset 5px;
  border-bottom: inset 5px;
}

sup { 
  font-size: 0.7em; 
  color:#995522; 
}

a {
  color: var(--coolPurple); 
}

comment {
  color: var(--pine); 
  font-family:Times; 
}

hint, term {
  font-size: 14pt; 
  font-family: Georgia; 
  text-decoration: underline;
}

hint:hover, [msg_id]:hover {
  cursor: pointer; 
  font-weight: bold; 
}

[class^="medM"],[msg_id] {
  border-bottom: dashed 2px green;
}

blockquote, .mathblock {
  margin-left:5%;
  padding-left:20px;
  margin-top: 5px;
  padding-right: auto;
  display:block;
  color: #111111;
  border-left: solid 5px var(--pine);
}

[id ~= "htmlwidget"] {
  z-index:2;
  width:120%;
}

[id^='Math'] {
  font-size: 14pt; 
}

#problemStatement { 
  color: #666666; 
  font-family:Georgia; 
  font-size:14pt; 
}

.container-fluid .main-container .wrapper { 
  margin:auto !important; 
  width:100% !important; 
}

.wrapper { 
  overflow: auto;
}

.article {
  background-color: #EFEFEF; 
  display:block;
  padding:20px; 
  border-radius: 20px
  display: inline;
}

.content {
  width: 100% !important;
  max-width: 960px !important;
  align: center;
}

.warning {
  background-color:#DFDFDFEE; 
  border-top: solid 2px #AA0000; 
  border-bottom: solid 2px #AA0000;
}

.definition {
  display:block; 
  font-style: italic;
  font-family: Georgia;
  color: var(--coolPurple); 
  background-color: var(--pale); 
  border-top: var(--coolPurple); 
  border-bottom: var(--coolPurple); 
}

.decorativeText {
  font-family: decorativeText;
  /*font-size: 2em;*/
  font-variant: italic;
  margin-bottom:-10px;
}  

.decorative-line {
  margin-left: 2.5em;
  margin-right: auto;
  margin-top:1.15em;
  width: 90%;
  align: center;
  display: block;
}

.party-popper {
  margin-left: 2.5em;
  margin-right: auto;
  margin-top:1.15em;
  width: 90%;
  align: center;
  display: block;
}

.bigMath span {
  font-size: 15pt;
}

.medMath span {
  font-size: 20pt;
}

.mathblock {
  max-width: 60%;
}

.def_sym {
  font-weight:bold; 
  color:#5555DD; 
} 

.speech {
  color: #444444; font-family:Georgia; 
  font-style: italic;font-size:16pt;  
}

.sidebar {
  float:right; 
  display:block;
  width:8em;
  height:auto;
  max-width:300px;
  min-width:180px;
  background-color:#EFF4FA; 
  border: outset 5px var(--pine);
  padding:10px; 
  margin:10px 0 10px 10px; 
  font-size: smaller;
}

.first{
  font-variant:small-caps; 
  font-weight:bold; 
  background-color:#EFF4FA; 
}
  
.sidebar > term {
  background-color: var(--gray); 
  color:#CCCCEE; 
  padding:5px; 
  margin-right:5px; 
}

.optional {
  background-color:#FFEFFF; 
  margin-left:20px; 
  margin-bottom: 10px; 
  border-left: var(--gray); 
}

.quote {
  font-family:Georgia; 
  font-style:italic; 
  color: var(--pine)
}

.ref {
  color: green;
}

.in_progress:after {
  color: red;
  content: " (in progress)";
}