body 
{
	background: #1C1C1C;
	color: #AAA;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 30px auto auto auto;
	text-align: center;
  padding-left: calc(100vw - 100%);
  
  counter-reset: sidenote-counter;
}

.hotbar
{
  color: #a9a9a9;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
	margin: auto auto 10px auto;
}

a:hover, a:visited, a:link, a:active
{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #a9a9a9;
  text-decoration: none;
}

a:hover, a:link:hover, a:visited:hover 
{
	color: #f33;
}

.box
{
	background: #383838;
	border: 1px solid #000000;
	padding: 20px;
	width: fit-content;
	width: moz-fit-content;
  margin-left: 50%;
	transform: translate(-50%,-0);
	margin-bottom: 50px;
}

.textblock
{
  display: block;
  text-align: justify;
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

.textblock a:link, .textblock a:visited
{
  color: #8080E0;
}

.textblock a:hover, .textblock a:active
{
  color: #f33;
}


.sideimage
{
  position:fixed;
  bottom:0;
  right:3%;
  height:100%;
  width:100%;
  max-height: 60%;
  max-width: 20%;
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  z-index: -1;
}

img 
{
  max-width: 100%;
  height: auto;
  width: auto;
  margin-bottom: 20px;
}

.imagelink
{
  display: block;
}

p
{
  margin-top: 10px;
  margin-bottom: 0;  
}

p:first-of-type
{
  margin-top: 0; 
}

h1
{
  margin-top: 10px;
  margin-bottom: 10px;
  color: #B03030;
}

h2
{
  margin-top: 20px;
  margin-bottom: 20px;
}

h3
{
  margin-top: 20px;
  margin-bottom: 20px;
}

h4
{
  margin-top: 20px;
  margin-bottom: 20px;
}

.quote
{
  padding-left: 2vw;
  padding-right: 2vw;
  margin-top: 10px;
}





/* Sidenotes */

.sidenote {
  font-size: 0.8rem;
  float: right;
  clear: both;
  width: 50ch;
  max-width: 20vw;
  margin-right: -25vw;
  margin-bottom: 10px;
  background: #383838;
	border: 1px solid #000000;
  padding: 10px;
  word-wrap: break-word;
}

.sidenote.left {
  float: left;
  margin-left: -25vw;
  margin-bottom: 10px;
}

.sidenote.quote{
  margin-right: -27vw;
  margin-top: 0;
}

/* sidenote counter */
.sidenote-number {
  counter-increment: sidenote-counter;
}

.sidenote-number::after,
.sidenote::before {
  position: relative;
  vertical-align: baseline;
  color: #8080E0;
}

/* add number in main content */
.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 0.7rem;
  top: -0.5rem;
  left: 0.1rem;
}

/* add number in front of the sidenote */
.sidenote-number ~ .sidenote::before {
  content: counter(sidenote-counter) ' ';
  font-size: 0.7rem;
  top: -0.5rem;
}

label.sidenote-toggle:not(.sidenote-number) {
  display: none;
}


label.sidenote-toggle {
  display: inline;
  cursor: pointer;
}

input.sidenote-toggle {
  display: none;
}

@media (max-width: 1050px) {
  label.sidenote-toggle:not(.sidenote-number) {
    display: inline;
  }
  .sidenote {
    display: none;
  }
  .sidenote-toggle:checked + .sidenote {
    display: block;
    margin: 0.5rem 1.25rem 1rem 0rem;
    float: left;
    left: 1rem;
    clear: both;
    width: 95%;
    max-width: 95%;
  }
}


/* Article formatting */
.cmti-10{font-style: italic;}
.cmti-12{font-style: italic;}
.cmsl-12{font-style: oblique;}