:root {
  --background:#000000;
  --backgroundimage: url("../images/backgrounds/noise.png");

  --journalcover: url("../images/backgrounds/journalcover.png");

  --journal: #DBC5B2;
  --journalbackground: url("../images/backgrounds/journalpaper.png");
  --journalbackgroundR: url("../images/backgrounds/journalpapercornerR.png");
  --journalbackgroundL: url("../images/backgrounds/journalpapercornerL.png");
  --journalbackgroundB: url("../images/backgrounds/journalpapercorners.png");
  --font: #403D39;

  --link:#788253;
  --linkhover:#C5473B;

  --selection:#DBC5B2;
  --selectionbackground:#3A2121;
}

* { transition: all 0.5s ease-in-out; }

body {
  margin: 0;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 15px;
  background-color: var(--background);
  background-image: var(--backgroundimage);
  color: var(--font);
	}

a { color: var(--link); text-decoration: none; font-weight: bold;}

a:hover, a:focus { color: var(--linkhover); font-style: italic; cursor: pointer; }

img {
  max-width: 100%;
  height: auto;
  }

journal-spread {
  display: table;
  width: 950px;
  height:756px;
  margin: 50px auto;
  background-image: var(--journalbackground);
  background-repeat: repeat;
  background-position: center;
  border-radius: 25px;
  position: relative;
}

table-contents {
  display: table-cell;
  width: 50%;
}

table-contents > h1 {
  text-align: center;
}

table-contents > ol {
  list-style-type: lower-roman;
  margin-left: 25%;
}

left-page {
  display:table-cell;
  width: 50%;
  padding: 0 25px;
}

right-page {
  display:table-cell;
  width: 50%;
  padding: 0 25px;
}

page-header {
  display: block;
  text-align: right;
  font-weight: bold;
  letter-spacing: 0.1em;
}

@media (max-width:980px) {
  main-section {
    display:block;
    width: calc(100% - 320px);
  }
  side-bar {
    display: block;
  }
}