:root {
  --header-bg:#E4ECED;
  --nav-bg:#787a66;
  --article-bg:#91937B;
  --border-color: black;
  --sidebar-text-color:#fff;
  --article-text-color:black;
  --article-heading-color:#fff;
  --nav-link-color:#fff;
  --darker-border-color:black;
}
html, body {
  padding:0;
  margin:0;
}
body {
  font-size:14px;
  background-color: #CBC3C1;
  background-image: url('https://secretgoldfish.neocities.org/images/silent_hill.gif');
color: black;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
  font-family: times;
}

mark { 
  background-color: #787a66;
  border: 2px inset;
}
 nav {
    border:1px solid black;
  width: 800px;
} 
header, nav {
  max-width:100%;
}
aside {
  width:150px;
  margin-top:30px;

}
.flex {
  display:flex;
  max-width:800px;
}
nav {
  max-height:25px;
  height:25px;
  margin-bottom:10px;
  background-color:var(--nav-bg);
} 
header {
  max-height:200px;
  height:200px;
  background-image:url('');
  background-repeat:repeat-y;
  background-size:600px;
  background-position:fixed;
}
main {
  width:100%;
  margin-left:20px;
  margin-right:20px;
  background-image: url('https://secretgoldfish.neocities.org/images/tumblr_2107589b789077409cd07ae8cc5600a3_772b10ff_640.png');
    background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  
 
}

header {
  margin-bottom:10px;
}
section {
  margin-bottom:10px;
  color:var(--sidebar-text-color);
}
article {
  border:1px solid black;
  margin: 15px;
  padding: 15px;
  background-color:var(--article-bg);
  color:var(--article-text-color);
  text-align: justify;
  opacity: 0.8;
}
.left-article {
  border:1px solid black;
  margin-left: -25px;
  padding: 10px;
  background-color:var(--article-bg);
  color:var(--article-text-color);
  text-align: justify;
  width: 175px;
  opacity: 0.8;
}
.misc-content {
  border:1px solid black;
  margin-left: -25px;
  padding: 10px;
  background-color:var(--article-bg);
  color:var(--article-text-color);
  text-align: justify;
  width: 175px;
  height: 165px;
  overflow-y: scroll;
	overflow-x: hidden;
  opacity: 0.8;
}
.playlist {
  border:1px solid black;
  margin-left: -25px;
  padding: 10px;
  background-color:var(--article-bg);
  color:var(--article-text-color);
  text-align: justify;
  width: 175px;
  height: 420px;
  overflow-y: scroll;
	overflow-x: hidden;
  opacity: 0.8;
}
.subtitle {
  border:1px solid var(--darker-border-color);
  background-color:var(--nav-bg);
}
.links {
  list-style-type:none;
  padding-left:0;
  color: #3F443E;
  text-transform:lowercase;
}
.links li {
  background-color:var(--nav-bg);
  border:1px solid var(--border-color);
  margin:0px;
  width: 195px;
  margin-left: -25px;
}
.links li a {
  text-decoration:none;
  color:inherit;
}
.nav {
  margin-top:5px;
}
.nav li {
  display:inline-block;
  padding-left:30px;
}
.nav li a {
  text-decoration:none;
  text-transform:lowercase;
  color:var(--nav-link-color);
}
.left-siderbar {
  margin-left:50px;
  width: 200px;
  
}
.subtitle {
  color:var(--article-text-color);
  font-weight: normal;
letter-spacing: 2px;
font-size: 20px;
line-height: 13px;
color: #fff;
}
/* article */ .subtitle {
  text-transform:lowercase;
  font-size:16px;
  color:var(--article-heading-color);
  margin-top:10px;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:10px;
  letter-spacing: 5px;
  padding-left: 3px;
}

#sideimg{
width: 300px;
margin-left: -65px;
}

#aboutme{
width: 380px;
height: 250px;
border: 1px lightgrey;
margin-left: auto;
margin-right:auto;
margin-bottom: 30px;
margin-top: 30px;
text-align: left;
display: block;
background-color: #91937B;
color: black;
font-family: Times New Roman;
opacity: 0.7;
font-size: 14px;
letter-spacing: 1px;
padding: 10px;
overflow: auto;
}

#journal{
width: 400px;
border: 1px lightgrey;
margin-left: auto;
margin-right:auto;
margin-bottom: 30px;
margin-top: 30px;
text-align: left;
display: block;
background-color: #91937B;
color: black;
font-family: Times New Roman;
opacity: 0.8;
font-size: 14px;
letter-spacing: 1px;
padding: 10px;

}
.box-b {
  position: fixed;
  float: left;
  top: 100px;
  left: 300px;
  z-index: 2; 
  overflow-y: scroll;
	overflow-x: hidden;
  padding: 7px;
  font-size: 14px;
  color: #363538;
	text-align: center;
	word-wrap: break-word;
	width: 200px;
	height: 300px;
	background-color:#91937B;
	letter-spacing: 1px;
	opacity: 0.8;
}

.box-d {
  position: fixed;
  float: left;
  top: 45%;
  left: 300px;
  z-index: 2; 
  overflow-y: scroll;
	overflow-x: hidden;
  padding: 7px;
  font-size: 14px;
  color: #363538;
	text-align: center;
	word-wrap: break-word;
	width: 200px;
	height: 175px;
	background-color:#91937B;
	letter-spacing: 1px;
	opacity: 0.8;
}

.divider{
border-top: 1px dotted #000;
}

h5 {
  font-size: 13;
  font-style: italic;
  font-weight: 100;
}


a{
text-decoration: none;
color: #3F443E;
}
 
a:visited{
color: #3F443E;
}
 
a:hover{
font-style: italic;
}
 
a:active{
font-weight: bold;
}