/* v1.2

/* root settings */

:root {

	/* text colors */
  --colorStrong: #695142;
  --colorBold:#8b9569;

	/* general page and text colours */
	--colorBackground: #f7f7ed;
	--colorText: #fde3ca;
	--colorLink: #c3a774;

	/* accent colours */
	--colorPrimary: #606e6e;
	--colorSecondary: #c3a774;
	--colorTertiary: #453b26;
	--colorQuaternary: rgb(57, 82, 66, 50%);

	/* border and box shadow colours */ 
	--colorBorder: #c1a572;
	--colorShadow: #c1a572;

	/* background colour for the sections */
	--colorBackgroundMain: #25201a;

	/* fonts */
	--fontText: 'EB Garamond', serif;
	--fontTitle: 'Basteleur', monospace;
	--fontHeading: 'Starlight', serif;

	/* borders */
	--borderSolid: 1px solid #f2ead4;
	--borderDotted: 1px dotted #f2ead4;
	--borderTree: 1px solid #c1a572;

	/* gallery settings */
	--columnCount: 2;
	--columnGap: 8px;
}

/* title font - w95fa */
@font-face {
  font-family: 'w95fa';
  src: url('../fonts/w95fa/w95fa.woff') format('woff'),
  		 url('../fonts/w95fa/w95fa.woff2') format('woff2'),
       url('../fonts/w95fa/w95fa.otf');
}

/* body font - DM mono */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  src: url('../fonts/DM Mono/dm-mono-v11-latin-regular.woff') format('woff'),
  		 url('../fonts/DM Mono/dm-mono-v11-latin-regular.woff2') format('woff2'),
       url('../fonts/DM Mono/dm-mono-v11-latin-regular.ttf');
}

@font-face {
  font-family: 'DM Mono';
  font-style: italic;
  src: url('../fonts/DM Mono/dm-mono-v11-latin-italic.woff') format('woff'),
  		 url('../fonts/DM Mono/dm-mono-v11-latin-italic.woff2') format('woff2'),
       url('../fonts/DM Mono/dm-mono-v11-latin-italic.ttf');
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/DM Mono/dm-mono-v11-latin-500.woff') format('woff'),
  		 url('../fonts/DM Mono/dm-mono-v11-latin-500.woff2') format('woff2'),
       url('../fonts/DM Mono/dm-mono-v11-latin-500.ttf');
}

@font-face {
  font-family: 'DM Mono';
  font-style: italic;
  font-weight: bold;
  src: url('../fonts/DM Mono/dm-mono-v11-latin-500.woff') format('woff'),
  		 url('../fonts/DM Mono/dm-mono-v11-latin-500.woff2') format('woff2'),
       url('../fonts/DM Mono/dm-mono-v11-latin-500.ttf');
}

@font-face {
  font-family: 'Sinistre';
  font-style: normal;
  font-weight: 700 !important;
  src: url('../fonts/Sinistre.otf');
}

@font-face {
  font-family: 'Basteleur';
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/Basteleur-Bold.otf');
}

@font-face {
  font-family: 'Starlight';
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/starlight-rune-personal-use.regular.ttf');
}

/* global text settings */

heading {
  align-items:center;
  margin:auto;
  width:100%;
  padding:0;
  font-family: var(--fontHeading);
  font-size:3.5em;
  letter-spacing: .2em;
}

.title {
  text-align:center;
  margin-top:0.5%;
}

body {
	margin: 0;
	overflow: hidden;
	background: var(--colorBackground) url("https://file.garden/Z3Hh4pAjyGTEZiDi/website/gridbackground.jpg") fixed repeat;
	background-repeat: repeat;
	background-position: 0px 0px;
}
table {
	display: none;
}
#body table {
	display: table;
}
body, td, p {
	font: 9.2pt verdana;
	color: #695142;
}

a, a:visited {
	color: #7f8fa8;
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #31496e;
}

b {
	font: bold 1em verdana;
	color: var(--colorBold);
	text-transform: uppercase;
	letter-spacing: 0.1px;
}

u {
  color: #7f8fa8;
  text-decoration-style: wavy;
}

::selection {
   background-color: #f7f7ed;
}

blockquote {
	margin: 10px 0;
	border-left: 5px solid #7f8fa8 !important;
	padding-left: 15px;
	font: italic 6.5pt arial;
	letter-spacing: 1px;
	color: #763a20 !important;
}

h1 {
	font: 1.5em arial;
	color: #aaba85;
	letter-spacing: 2px;
	margin: 10px 0;
	text-transform: uppercase;
	border-bottom: 1px dashed #7f8fa8;
	padding-bottom: 1px;
	text-align:end;
}

strong {
  font: 9pt verdana;
	color: var(--colorStrong);
  background-color: transparent;
}

h2 {
	font: bold 10pt tahoma;
	color: #7f8fa8;
	letter-spacing: 1px;
	text-transform: uppercase;
}

h3 {
	font: 6.3pt verdana;
	color: #695142;

	text-align: right;

}

h4 {
	font: 7pt verdana;
	color: #695142;
	

}

h5 {
  font: 9pt verdana;
	color: #695142;
  background-color: #f1f6f9;
  margin: 10px 0;
	border-left: 5px solid #7f8fa8 !important;
	padding-left: 15px;
}

textarea {
	background: #f7f7f7;
	border: 0;
	width: 88px;
	height: 31px;
	padding: 0;
	font: 5.5pt times;
	letter-spacing: 1px;
	color: #ccc;
}

#main {
  top:10%;
	left:20%;
	width: 60vw;
	height: 650px;
	background: #fff;
	z-index: 999;
	border-radius: 20px;
}

#sidebar {
	display: inline-block;
	vertical-align: top;
	width: 20%;
	margin: auto;
	text-align: center;
	margin-top:5%;
}

#sidebar a:hover {
  color: #a5b681;
	background: #dae1ad;
}

#sidebar i {
	font: italic 6pt georgia;
	color: #aaa;
}

.divider {
	width: 100%;
	text-align: center;
	margin: 5px 0;
	display: block;
  position: relative;
}

.divider img {
	width:60%;
	margin:2px;
	border-radius:100%;
	border: 3px solid var(--colorBold);
}

.div-image {
display: inline;
}

.ollie:hover {
  content:url('https://file.garden/Z3Hh4pAjyGTEZiDi/website/ocs/Ollie_transparent_nomask.png');
}

.div-link {
  display: block;
	font-size: 0.7em;
	margin: 5px 0px;
	padding: 5px;
	background: #a5b681;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	margin-left:15px;
	margin-right:15px;
}

#sidebar a {
  color:#fff !important;
}

#sidebar a:visited {
  color:#fff !important;
}

#content {
	display: inline-block;
	vertical-align: top;
	width: 76%;
	height: 600px;
	margin-top: 35px;
	background: #fff;
	border-left: 5px solid #fafafa;
	overflow: hidden;
}

.section {
	width: 95%;
	height: 600px;
	padding: 0px 20px;
	overflow: auto;
}

.legend {
    font-size: .5rem;
    text-transform: ;
    margin: 0.8rem .1rem;
    padding: .5rem;
    border: 1px dashed hsl(0, 4%, 87%);
    background-color: var(--colorBackground);
    color:#fff;
    width:56%;
    float:right;
}

.legend p {
    margin: 0;
    padding: .2rem;
}

/* Character Details */
.character-img {
  float:left;
  width:40%; 
  background:transparent;
}

.character-img img {
  width:100%;
}

.character-details {
  float:none;
  margin-top:5%;
}

/* Mobile */
@media screen and (max-width: 600px) {
  #main {
    top:17%;
	  left:5%;
	  width: 90vw;
  }

  #sidebar {
	  width: 100%;
  }

  .divider img {
	  width:20%;
  }

  #main {
    overflow:scroll;
  }

  #content {
	  width: 95%;
	  overflow: hidden;
	  margin-bottom:50px;
  }

  .legend {
    width:50%;
    float:right;
  }
}