@font-face {
font-family: "Stories";
src: url('Stories.ttf'); }

:root {
--box-border: 1px solid #cd706e;
--box-bg: #f0bb8d; } 

body {
background: #e7a7b9 no-repeat url('kagomepink.png') fixed;
background-position: bottom left; }

a {
color: #f84c76;
text-decoration: none; }

a:active {
color: #fb5582; }

a:visited {
color: #ea1e90; }

a:hover {
color: #ef255c; }

b, strong {
color: #500de8; }

i, em {
color: #4545ff; }

u {
color: #de45ff; }

s {
color: #911eea; }

big {
color: #f960ff; }

small {
color: #cd3ead; }

::selection {
background: #e891a6;
color: #c95fa3; }

blockquote {
background: #f9e2da;
border: 1px solid #d54248;
color: #d54248;
padding: 5px;
text-shadow: none; }

#container {
margin: 80px 50px 0 50px; }

#sidebar {
position: fixed;
width: 350px;
float: left; }

#blurb {
border: var(--box-border);
background: var(--box-bg);
color: #c60c68;
padding: 10px;
margin-bottom: 5px;
font-family: "Stories";
font-size: 30px;
text-align: justify;
text-shadow: 1px 1px 5px #e45175;
line-height: .85em; }

#navigation a {
display: inline-block;
border: var(--box-border);
width: 171px;
height: 50px;
text-align: center; }

.main {
background: #f0bb8d url('main.png') no-repeat center; }

.thoughts {
background: #f0bb8d url('thoughts.png') no-repeat center; }

.scraps {
background: #f0bb8d url('scraps.png') no-repeat center; }

.lists {
background: #f0bb8d url('lists.png') no-repeat center; }

.log {
background: #f0bb8d url('log.png') no-repeat center; }

.dreams {
background: #f0bb8d url('dreams.png') no-repeat center; }

#content {
position: absolute;
top: 80px;
margin-left: 400px;
margin-right: 50px;
border: var(--box-border);
background: var(--box-bg);
color: #FFFFFF;
text-shadow: 1px 1px 5px #e45175;
padding: 20px;
font-family: "Stories";
font-size: 35px;
text-align: justify;
height: 80vh;
overflow: scroll;
overflow-x: hidden;
scrollbar-color: #d54248 #f9e2da;
line-height: .85em; }

#content img {
max-width: 100%; }

#title {
background: no-repeat url('titletitle.png') top right;
height: 124px;
position: relative;
left: 30px;
top: -65px;
z-index: 30; }

#header {
font-size: 50px;
color: #c60c68; }

#writing {
white-space: pre-line; }

@media screen and (max-width : 800px) {
  body {
    background-image: none;
  }
  #container {
    margin: 20px;
  }
  #sidebar {
    position: sticky;
  float: none; 
  width: auto;
  margin-right: 0px;}
  #navigation {
   text-align: center;
    text-shadow: 1px 1px 5px #e45175;
font-family: "Stories";
font-size: 30px;
  }
  #navigation a {
background: none;
    width: auto;
    border: 0;
    height: auto;
  }
  .dreams:after {
    content: "Dreams";}
    .thoughts:after {
      content: "Thoughts";
    }
  .scraps:after {
    content: "Scraps";
  }
  .main:after {
    content: "Main";
  }
  .log:after {
    content: "Log";
  }
  .lists:after {
    content: "Lists";
  }
 
  #blurb {
    display: none;
  }
  #title {
    display: none;
  }
  #content { margin-left: 0;
    margin-right: 0;
    top: 0;
    position: relative;
   height: 70vh;}
}