* {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* for 700px or less */
@media screen and (max-width: 700px) {
  body .container {
    position: static;
    width: auto;
    margin: 0 auto;
    float: none;
  }
  body .sidebar {
    position: static;
    width: var(--post-size);
    max-width: none;
    margin: 0 auto;
    float: none;
  }
}

:root {
  --main-bg-color: #fff;
  --borders: #d9cbc7;
  --tab-shadow: #ababab;
  --tab-links-shadow: #ababab;
  --tab-links: #969292;
  --body-font: #969292;
  --links: #000;
  --links-hover: #000;
  --tab-fade: #c5dbd9;
  --glow-box: #dedede;
  --dividers: #d9cbc7;
  --post-size: 400px;
}

::-webkit-scrollbar {width:11px;}

::-webkit-scrollbar-track {
    border: 5px solid rgba(245, 245, 245, 0);
    background-color: white;
}

::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    border: 5px solid rgba(245, 245, 245, 0);
    background-color: var(--dividers);

}

html {font-size: 62.5%;}

body {
  color: var(--body-font);
  background: var(--main-bg-color);
  font-family: Georgia, serif;
  font-size: 1rem;
  overflow-x: hidden;
}

a, .nav-link p {
  color: var(--links);
  text-decoration: none;
  transition: color 500ms ease-in-out;
}

a:hover{
  color: var(--links-hover);
}

.sidebar {
  position: fixed;
  top: 35%;
  margin-left: 20rem;
  max-width: 18rem;
  min-width: 13.2rem;
  width: 21.217%;
}

.side-title {
  position: relative;
  right: 15%;
  margin-top: -1.2rem;
  float: right;
  clear: both;
}

.side-title a {font-size: 1.6em;}

.side-title a:hover {color: var(--body-font);}

.title-border {
  background-color: var(--borders);
  margin-top: .5rem;
  width: 100%;
  height: .1rem;
  box-shadow: inset 2.4rem 0 1.7rem -.6rem var(--main-bg-color),
  inset -2.4rem 0 1.7rem -.6rem var(--main-bg-color);
}

.side-info {
  padding-bottom: 1rem;
  margin-top: .76rem;
  width: 100%;
  max-height: 45%;
  border-bottom: 1px solid var(--borders);
  overflow: hidden;
}

.nav {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tab {
  background-color: rgba(115, 182, 230, 0);
  position: relative;
  margin-top: .2rem;
  height: 2rem;
  box-shadow: inset 120px 0 50px -15px var(--main-bg-color);
  transition: all 200ms ease-in;
}

.nav-box {
  width: 100%;
  height: 100%;
}

.nav-box::before {
  content: '';
  position: absolute;
  background-color: var(--tab-shadow);
  width: 1.9rem;
  height: 1.9rem;
  left: 0;
  bottom: 0;
}

.nav-box::after {
  opacity: 0;
  content: '';
  position: absolute;
  background-color: #ffedae;
  width: .7rem;
  height: .7rem;
  left: .5rem;
  bottom: .7rem;
  border-radius: 50%;
  box-shadow: 0 0 15px 4px #ffcd71;
  animation: glow 900ms ease-in-out 0s infinite normal;
  animation-play-state: paused;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 15px 4px #ffcd71;
  }
  65% {
    box-shadow: 0 0 15px 6px #ffcd71;
  }
  100% {
    box-shadow: 0 0 15px 4px #ffcd71;
  }
}

.nav-box i {
  background-color: var(--tab-shadow);
  position: absolute;
  width: 100%;
  height: .2rem;
  bottom: 0;
}

.nav-box b {
  opacity: 0;
  background-color: var(--tab-shadow);
  position: absolute;
  width: 100%;
  height: .2rem;
  bottom: 0;
}

.nav-link {
  margin-top: -1.5rem;
  margin-left: 2.5rem;
}

.nav-link p {
  cursor: pointer;
  color: var(--tab-links-shadow);
  text-transform: uppercase;
}

.nav-link a {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  color: var(--tab-links-shadow);
  text-transform: uppercase;
}

.tab:hover .nav-box::before, .follow .nav-box.toggle::before {
  background-color: var(--tab-shadow);
  animation: flash 700ms ease 0s 1 normal;
  box-shadow: inset 3px 3px 0 0 var(--glow-box),
  inset -3px -3px 0 0 var(--glow-box), 1px 1px 0 0 var(--tab-shadow);
  -webkit-transform: translate(-.1rem, -.1rem);
  -ms-transform: translate(-.1rem, -.1rem);
  transform: translate(-.1rem, -.1rem);
}

@keyframes flash {
  0% {
    background-color: #ffedae;
  }
  100% {
    background-color: var(--tab-shadow);
  }
}

.tab:hover .nav-box::after, .follow .nav-box.toggle::after {
  opacity: 1;
  animation-play-state: running;
}

.tab:hover .nav-box b {
  opacity: 1;
  background-color: var(--glow-box);
  width: 100%;
  animation: length 900ms ease-in 0s 1 normal;
  -webkit-transform: translate(-.1rem, -.1rem);
  -ms-transform: translate(-.1rem, -.1rem);
  transform: translate(-.1rem, -.1rem);
}

@keyframes length {
  0% {
    width: 25%;
  }
  100% {
    width: 100%;
  }
}

.tab:hover .nav-link {
  -webkit-transform: translate(-.1rem, -.1rem);
  -ms-transform: translate(-.1rem, -.1rem);
  transform: translate(-.1rem, -.1rem);
  text-shadow: .1rem .1rem var(--tab-links-shadow);
}

.tab:hover .nav-link a, .tab:hover .nav-link p {color: var(--tab-links);}

.tab:hover {
  background-color: var(--tab-fade);
}

.container {
  position: fixed;
  top: 32%;
  margin-left: var(--post-size);
  max-width: 54rem;
  width: 64%;
  float: left;
  transition: all 200ms ease-in;
}

.post {
  margin: 0 auto;
  max-width: var(--post-size);
}

.post-wrap {
  max-height: 18.2rem;
  overflow: hidden scroll;
}

#index-info {line-height: 1.6;}

#contact-info {display:none;}

.divider {
  position: relative;
  background-color: var(--dividers);
  max-width: var(--post-size);
  margin: 1rem auto;
  height: .6rem;
}

.divider::before {
  content: '';
  position: absolute;
  margin-left: -.4rem;
  border-width: .3rem .4rem .3rem 0rem;
  border-style: solid;
  border-color: transparent var(--dividers) transparent transparent;
}

.divider::after {
  content: '';
  position: absolute;
  margin-left: 100%;
  border-width: .3rem 0rem .3rem .4rem;
  border-style: solid;
  border-color: transparent transparent transparent var(--dividers);
}

.divider i {
  background-color: var(--dividers);
  position: absolute;
  margin-top: .15rem;
  margin-left: -.8rem;
  height: .4rem;
  width: .4rem;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.divider i::before {
  content: '';
  position: absolute;
  border-width: .3rem 0rem .3rem .4rem;
  border-style: solid;
  border-color: transparent transparent transparent var(--dividers);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: rotate(-45deg) translate(-.4rem, .1rem);
  -ms-transform: rotate(-45deg) translate(-.4rem, .1rem);
  transform: rotate(-45deg) translate(-.4rem, .1rem);
}

.divider i::after {
  content: '';
  position: absolute;
  border-width: .3rem 1.4rem .3rem 0rem;
  border-style: solid;
  border-color: transparent var(--dividers) transparent transparent;
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: rotate(-45deg) translate(-1.8rem, .1rem);
  -ms-transform: rotate(-45deg) translate(-1.8rem, .1rem);
  transform: rotate(-45deg) translate(-1.8rem, .1rem);
}

.divider b {
  background-color: var(--dividers);
  position: absolute;
  margin-top: .15rem;
  margin-left: calc(100% + .4rem);
  height: .4rem;
  width: .4rem;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.divider b::before {
  content: '';
  position: absolute;
  border-width: .3rem 0rem .3rem 1.4rem;
  border-style: solid;
  border-color: transparent transparent transparent var(--dividers);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: rotate(-45deg) translate(0.8rem, .1rem);
  -ms-transform: rotate(-45deg) translate(0.8rem, .1rem);
  transform: rotate(-45deg) translate(0.8rem, .1rem);
}

.divider b::after {
  content: '';
  position: absolute;
  border-width: .3rem .4rem .3rem 0rem;
  border-style: solid;
  border-color: transparent var(--dividers) transparent transparent;
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: rotate(-45deg) translate(0.4rem, .1rem);
  -ms-transform: rotate(-45deg) translate(0.4rem, .1rem);
  transform: rotate(-45deg) translate(0.4rem, .1rem);
}