:root {
     --dk-color:#170c27;
     --mid-color:#000;
     --lt-color:#61616108;
     --dkest-color:#d5d5d5;
     --accent:#f2f2f7;
}

@font-face {
    font-family: 'old_english_text_mtregular';
    src: url('/oldenglishtextmt-webfont.woff2') format('woff2'),
         url('/oldenglishtextmt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}  
 html, body {
     margin:0;
     padding-top:25px;
     height:100%;
     font-family:courier, lucida console;
     text-align: center; 
     font-size:12px;
     background-image:url('/Journal/bg.png');
     background-size: cover;
     background-repeat: repeat;
     background-attachment: fixed;
     color:var(--accent);
     padding:1px;
     image-rendering: optimizespeed;
     image-rendering: pixelated;
}
 body a {
     color:var(--accent);
     font-weight:bold;
}
ul {
     list-style: disclosure-closed inside;
     padding: 0;
}
 
 li {
     margin-top: 2px;
}
 .list li {
     padding-bottom:5px;
}
 .container {
     max-width:60rem;
     margin:0 auto;
     height:auto;
     margin-top:30px;
     position: relative;
     background-color: var(--lt-color);
}
 h1, h3, h5 {
     text-align: center; 
     color:var(--accent);
     margin: 0.5em;
}
 h2, h4, h6 {
     color:var(--dkest-color);
     margin: 0.5em;
}
 img{
     opacity: 1;
     color: solid;
     margin: 0px;
}
 hr {
    display:block;
    width: 90%;
}
 #header {
     height:14em;
     margin:auto;
     background-color: var(--lt-color);
     border:1px solid var(--dkest-color);
     max-width: 60rem;
     position: relative;
     
     padding: 0.1em;
}
 .logo > img{ 
      position: absolute;
      width: 100%;
      height: auto; 
      bottom: -5rem; 
      
      right: -0rem;
}
   
 .navbar li a, .navbar-footer li a {
     text-decoration:none;
     position: relative;
     text-align:center;
     font-family:"old_english_text_mtregular";
     font-size:30px;
     margin-right:20px;
     margin-left: 20px;
}
 .navbar ul, .navbar-footer ul {
     list-style-type:inline-flex;
     padding:0;
}
 .navbar,.navbar-footer {
     background-color:var(--lt-color);
     min-width:17rem;
     border:2px solid #d5d5d57a;
     padding-top:1px;
     margin-left:0;
     position: fixed;
     overflow: auto;
     left: 5%;
     margin-bottom: 10px;
     border-radius: 1px;
     top: 10rem;
}
 .navbar-footer {
     display:none;
     margin-top: 1em;
}
 .title {
     
     font-size:40px;
     text-align:center;
     font-style:italic;
     color:var(--dkest-color);
}
 .section-title { 
     margin: 0px;
     text-align:left;
     background-color:#29292996;
     color:var(--dkest-color);
     font-size:11px;
     padding: 3px;
     font-family: segoe UI;
     justify-content: space-between;
     display: flex;
     background-image: linear-gradient(#303238cf,black);
     border: 2px solid #484848;
     height: 2em;
}
.title-text{
     margin: 10px;
     vertical-align: top;
     display: inline;
}
 .wrapper {
     display:flex;
     flex-wrap:wrap;
     height:auto;
     width:90%;
     background-color: var(--lt-color);
     padding: 0px;
     margin: auto;
     margin-top: 20px;
}
 .content {
     padding:10px;
}
.content-footer{
     position: relative;
     bottom: 0px;
     margin: 0rem;
     padding-top: 1rem;
}
 .content >img {
}
 .main-content {
     border:2px solid #d5d5d57a;
     width:100%;
     height:auto;
     margin: 0;
     border-radius: 2px;
}
 .messages{
      font-family:courier, lucida console;
      font-size: 17px;
     
}
 .messages p {
      padding: 1em;
      margin: 0.7em;
      background-color: black;
      display: inline-block;
      border: 2px inset grey;
      background-image: linear-gradient(#151515cf,black);
      overflow-wrap: break-word;
}
   p{
     margin: 0px;
}
 p a {
     color:var(--dkest-color);
     font-weight:bold;
}
.messages >ul{
     padding: 0;
}
.messages li{
     position: relative;
     width: 100%;
     flex-direction: column;
     display: flex;
}
.message-left{
     position: relative;
     text-align: left;
     margin: 0em;
     margin-right: 2em;
     padding: 0.5em;
     left: -3em;
     display: block;
}
.message-right{
     position: relative;
     text-align: right;
     margin: 0em;
     margin-left: 3em;
     padding: 0.5em;
     right: -2.8em;
}
.message-right p{
    background-color: #0c074a;
    background-image: linear-gradient(#000000cf,#1e2026);
    border: 2px inset #8995a5;
}
 .scroll::-webkit-scrollbar-track {
     background-color: var(--lt-color);
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #f2b1a4;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--dk-color);
}
 .navbar li, .navbar-footer li {
     position: relative;
     display:flex;
     justify-content: space-evenly;
}

 .navbar a, .navbar-footer a {
     display:block;
     color:var(--accent);
     transition:0.2s all linear;
}

 .navbar a:hover,.navbar-footer a:hover{
     background:var(--lt-color);
     color:var(--accent);
     transition:0.2s all linear;
     z-index:1;
}
 .navbar li > ul, .navbar-footer li > ul {
     background:var(--mid-color);
     display:none;
     position:absolute;
     margin-left:0;
     border:1px solid var(--dkest-color);
}
 .navbar li > ul a, .navbar-footer li > ul a {
     padding-left:0;
     padding-right:0;
     padding-top:5px;
     padding-bottom:5px;
}
 .navbar li > ul li, .navbar-footer li > ul li{
     display:block;
}
 .navbar li:hover > ul, .navbar-footer li:hover > ul{
     display:block;
}
 .navbar ul ul ul, .navbar-footer ul ul ul {
     position:absolute;
     left:100%;
     top:0;
}
 ul.subitems {
     padding-left:0;
     padding-right:0;
     margin-right:0;
}
 ul.subitems li a {
     margin-right:0;
     padding-left:10px;
     padding-right:10px;
     padding-top:10px;
     display:block;
}
 #cd{
     position: fixed;
     
          
     right: 60px;
     bottom: 21px;
}
 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background-color:black;
     display:block;
     max-width:30em;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
     font-size: 10px;
}
 textarea {
     background-color:var(--dkest-color);
     color:var(--lt-color);
     font-size:12px;
}
 .code-wrapper {
     display:flex;
     padding-left:10px;
}
@media only screen and (max-width: 1000px){
     .navbar-footer {
          display: inherit;
          position: initial;
}
     .message-left{
          margin-right: 1em;
          left: -2em;
     }
     .message-right{
          margin-left: 1em;
          right: -1.8em;
     }
     .container{
          max-width: 90%;
     }
     .navbar{
          max-width: 100%;
          position: static;
     }
      #header {
     height:10em;
}
     .logo > img{ 
      bottom:-1rem;
      width: 115%;
      right: -2rem;
     }
     #cd{
          display: none;
     }
}