:root {
  --accent:darkred;
}

html, body {
  scroll-behavior:smooth;
  background-color:black;
  font-family:Georgia, serif;
  cursor:url("/assets/cursor.png"), default;
}

@font-face {
  font-family:"Sell Your Soul";
  src:url("/fonts/Sell_Your_Soul.woff") format("woff");
}

@font-face {
  font-family:"GHOSTWRITER";
  src:url("/fonts/GHOSTWRITER.woff") format("woff");
}

.container {
  width:100%;
  margin:0 auto;
  background-color:black;
}

.sidebar {
  width:400px;
  height:100%;
  position:fixed;
  margin-top:-30px;
  margin-left:-10px;
  margin-bottom:-10px;
  border-right:10px solid black;
  background:black url("/assets/images/sides/main.png") no-repeat 50% 100%;
}

.title {
  color:darkred;
  font-size:44px;
  margin-top:15px;
  font-weight:bold;
  text-align:center;
  font-style:italic;
  font-family:"Sell Your Soul";
  text-shadow:
  #000 0px 0px 3px,
  #000 0px 0px 3px,
  #000 0px 0px 3px,
  #000 0px 0px 3px,
  #000 0px 0px 3px,
  #000 0px 0px 3px;
}

.sidecase {
  left:15px;
  bottom:15px;
  position:absolute;
}

.sidebox {
  color:white;
  font-size:15px;
  padding:5px 8px;
  background:black;
  font-style:italic;
  border-radius:5px;
  font-family:Georgia, serif;
}

.content {
  color:white;
  position:right;
  font-size:15px;
  padding-bottom:15px;
  margin-left:420px;
  background-color:black;
  font-family:Georgia, serif;
}

#footer {
  text-align:center;
  margin-bottom:-20px;
}

h1 {
  color:darkred;
  font-size:55px;
  margin-top:30px;
  text-align:center;
  margin-bottom:5px;
  padding-bottom:35px;
  border-bottom:2px inset darkred;
  font-family:"Sell Your Soul", serif;
}

h2 {
  margin:0;
  color:darkred;
  font-size:30px;
  font-family:"GHOSTWRITER", serif;
}

h3 {
  margin:2px 0;
  color:darkred;
  font-size:20px;
  border-bottom:2px inset darkred;
  font-family:"GHOSTWRITER", serif;
}

ul {
  margin-top:5px;
  padding-left:35px;
}

li {
  line-height:18px;
  padding-left:5px;
  list-style-type:"⛤";
}

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

.firstLetter {
  color:darkred;
  font-size:35px;
  line-height:90%;
  font-weight:bold;
  margin-right:2px;
  font-family:"Sell Your Soul", serif;
}

.thoughts {
  text-indent:15px;
  text-align:justify;
  text-justify:inter-word;
}

blockquote {
  color:grey;
  padding:5px;
  margin-top:10px;
  margin-left:18px;
  font-style:italic;
  padding-left:10px;
  border-left:4px solid darkred;
}

textarea {
  width:90%;
  padding:10px;
  border-radius:5px;
  background:darkred;
  border:1px solid darkred;
}

hr {
  margin-bottom:15px;
  border:1px solid darkred;
}

.center {
  text-align:center;
}

.flex {
  display:flex;
}

.charaDiv {
  display:inline-block;
  border:2px solid darkred;
}

.chara {
  height:185px;
  margin:auto;
  display:block;
  filter:saturate(0);
  transition:.5s linear;
}

.chara:hover {
  filter:saturate(1);
  transition:.2s linear;
}

#heart {
  height:80px;
  margin:0 8px 55px 8px;
}

.img {
  height:220px;
}

a {
  color:darkred;
  text-decoration:none;
  transition:.5s linear;
  cursor:url("/assets/pointer.png"), pointer;
}

a:hover {
  color:white;
  transition:.2s linear;
  text-decoration:line-through;
  cursor:url("/assets/pointer.png"), pointer;
}

summary {
  margin-bottom:15px;
  cursor:url("/assets/pointer.png"), pointer;
}

details > summary {
  list-style:none;
}

details > summary::-webkit-details-marker {
  display:none;
}

.lyric {
  margin-left:25px;
}

.help {
  opacity:50%;
  text-decoration:dotted underline;
}

.outlink:after {
  content:"⤤";
  line-height:12px;
}

::selection {
  color:black;
  background-color:darkred;
}

::-webkit-scrollbar {
  color:darkred;
}

::-webkit-scrollbar-track {
  background:black;
}

::-webkit-scrollbar-thumb {
  background:darkred;
}

::-webkit-scrollbar-thumb:hover {
  background:white;
  border-left:2px solid black;
  border-right:2px solid black;
  cursor:url("/assets/pointer.png"), pointer;
}

::-webkit-resizer {
  background:darkred;
}

@media only screen and (max-width:800px) {
  .sidebar {
    margin:0;
    width:100%;
    z-index:99;
    height:120px;
    border-right:0;
    position:static;
    padding-top:1px;
    margin-bottom:-10px;
    border-bottom:10px solid black;
  }
  
  .sidecase {
    position:static;
  }
  
  .content {
    margin-left:0;
  }
  
  h1 {
    font-size:40px;
  }
  
  .chara {
    width:100%;
    height:auto;
  }
  
  #heart {
    width:auto;
    height:150px;
    margin:15px 125px;
  }
  
  .img {
    width:100%;
    height:auto;
  }
  
  .outlink:after {
    font-size:22px;
    margin-left:-2px;
    vertical-align:top;
  }
}