:root {
     --main-color:#fff;
     --backround-color:#000000;
     --accent:#678ab3;
}
 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:98%;
     font-family:ms gothic;
     font-size:16px;
     background-color: var(--backround-color);
     color:var(--main-color);
     padding:1px;
}
 body a {
     color:var(--main-color);
     text-decoration: none;
}
 ul.list li {
     padding-bottom:5px;
}
 #container {
     max-width:1200px;
     margin:0px auto;
     height:fit-content;
     margin-top:40px;
}
 h1, h3, h5 {
     color:var(--accent);
     text-shadow: 0 0 32px var(--accent);
     font-family: 'Courier New', Courier, monospace;
}
 h2, h4, h6 {
     color:var(--main-color);
}
 #header {
     max-width:1200px;
     margin:0px auto;

     /*background-image: url(photos/catphoto.jpg);*/
     background-position: center;
     background-size: cover;
     /*border:1px solid var(--dkest-color);*/
}
 .title {
     font-size:35px;
     margin-top: 100px;
     margin-right: 10px;
     color:var(--accent);
     text-align: left;
     
}
 .section-title {
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:var(--backround-color);
     color:var(--main-color);
     font-size:12px;
}
 .wrapper {
     display:flex;
     flex-wrap:wrap;
     height:auto;
     width:100%;
}
 #left-sidebar {
     width:197px;
     /*border:1px solid var(--dkest-color);*/
     height:100%;
     border-right:none;
     background-color:var(--lt-color);
}
 .content {
     padding:10px;
}
 #main-content {
     /*border:1px solid var(--dkest-color);*/
     width:1000px;
     min-height: 600px;
     height:600px;
     overflow-y: scroll;
     background-color: var(--backround-color);
}
 p {
     padding:5px;
     
}
 p a {
     color:var(--main-color);
     font-weight:bold;
}
a:hover {
  text-decoration: underline dotted;
}
 .scroll::-webkit-scrollbar-track {
     background-color: var(--backround-color);
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: var(--backround-color);
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: var(--accent);
}
 #footer {
     text-align:center;
     justify-content: right;
     margin:0px auto auto;
}
 #footer p {
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
 textarea {
     background-color:var(--backround-color);
     color:var(--lt-color);
     font-size:10px;
}
 .code-wrapper {
     display:flex;
     padding-left:10px;
}
/* COMMENT OUT OR DELETE THE BELOW CODE FOR TWO SIDEBARS */
 #right-sidebar {
     display:none;
}
button {
    position: fixed;
    left: 10;
    top: 10;
    width: 120px;
    height: 30px;
    background-color: var(--backround-color);
    border: 1px solid var(--accent);
    color: var(--accent);
    margin-bottom: 4px;
    z-index: 1;
}
 @media only screen and (max-width: 917px) {
     #left-sidebar {
         order:1;
         width:100%;
         border-right:1px solid var(--backround-color);
    }
     .main-content {
         order:2;
         width:100%;
         border-bottom:none;
         border-right:1px solid var(--backround-color);
    }
     .navbar a {
         padding-bottom:10px;
    }
    #think {
        display: none;
    }
}
 
#light {
    position: fixed;
    z-index: 0;
}

#gif {
    position: fixed;
    bottom: 0;
    right: 0;
}

#link {
    display: flex;
    height: 20px;
    gap: 10px;
    margin: 10px;
}

#blog-info{
    display: flex;
    gap: 40px;
    justify-content: center;
}
#think {
    position: relative;
    right: 0;
    bottom: 0;
}

.post {
  width: 90%;
  height: fit-content;
  border-bottom: 1px dashed #707070;
}

/*READING LOG*/
.shelf{
    width: 90%;
    padding: 5px;
    height: fit-content;
    border-bottom: 1px dashed #707070;
    display: grid;
    grid-template-columns: 10% 90%;
}
#book {
    grid-column: 1 / 2;
}
#desc {
    grid-column: 2 / 3;
}



@keyframes flicker {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
.crt::before {
  content: " ";
  display: block;
  position:fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(26, 0, 0, 0.02), rgba(0, 36, 0, 0.02), rgba(17, 0, 0, 0.02));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.crt {
  animation: textShadow 1.6s infinite;
}