:root {
  --font: Consolas;
  --font-size: 16px;
  --font-size-code: var(--font-size);

  --bg0: #000000;
  --bg1: #181818;
  --bg2: #333333;
  --bg3: rgb(56,56,56);
  --fg: #dddddd;

  --green:  hsl(112 46.7% 76.5%);
  --pink:   hsl(309 46.7% 76.5%);
  --blue:   hsl(176 46.7% 76.5%);
  --red:    hsl(000 46.7% 76.5%);
  --yellow: hsl(044 46.7% 76.5%);
  --grey: #c0c0c0;

  --text_strips_color0: hsl(309 46.7% 76.5%);
  --text_strips_color1: #d0a8cf;
  --text_strips_color2: #c28dc0;
}

@font-face 
{
  font-family: "pixel nes";
  src: url("/font/pixel_nes.otf");
}

@keyframes text_strips 
{
  0%, 33% {
    background-image: linear-gradient(var(--text_strips_color1), var(--text_strips_color1) 50%, var(--text_strips_color2) 50%, var(--text_strips_color2));
    background-size: 100% 6px;
    background-clip: text;
    color: transparent;
  }
  34%, 66% {
    background-image: linear-gradient(var(--text_strips_color2), var(--text_strips_color2) 33%, var(--text_strips_color1) 33%, var(--text_strips_color1) 66%, var(--text_strips_color2) 66%, var(--text_strips_color2) 100%);
    background-size: 100% 6px;
    background-clip: text;
    color: transparent;
  }
  67%, 100% {
    background-image: linear-gradient(var(--text_strips_color2), var(--text_strips_color2) 50%, var(--text_strips_color1) 50%, var(--text_strips_color1));
    background-color: #ff0000;
    background-size: 100% 6px;
    background-clip: text;
    color: transparent;
  }
}

blockquote{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding-left: 15px;
  border-left: 3px solid #555;
  color: var(--grey);
} 
.highlight{
  font-size: var(--font-size-code);
}

@keyframes flicker
{
  0%, 89% {
    opacity: 1;
  }
  90%, 91% {
    opacity: 0.5;
  }
  92%, 93% {
    opacity: 1;
  }
  94%, 95% {
    opacity: 0.5;
  }
  96%, 100% {
    opacity: 1;
  }
}

#container {
  width: 900px;
  margin: 0px auto;
}

#minimomo {
  width: 64px;
  margin-right: 8px;
  float: left;
  transform: scale(-1, 1);
}

#statuscafe {
  padding-top: 10px;
}

#statuscafe-content {
  overflow-wrap: break-word;
}

#statuscafe-timeago {
  color: grey;
}
#statuscafe-mood {
  color: pink;
}

#title {
  font-size: 60px;
  letter-spacing: 5px;
  font-family: "pixel nes";
  text-align: center;
  text-shadow: rgba(255, 255, 255, 0) 0px 0px 10px, rgba(255, 255, 255, 0.5) 0px 0px 20px, rgba(224, 0, 230, 0.35) 0px 0px 30px, rgba(0, 230, 178, 0) 0px 0px 40px, rgba(0, 230, 189, 0.24) 0px 0px 50px, rgba(178, 0, 230, 0.16) 0px 0px 60px, rgba(167, 0, 230, 0.34) 0px 0px 70px;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: var(--text_strips_color0);
  animation: 3s infinite flicker, 1s infinite text_strips;
}


img {
  max-width: 100%;
}

body {
  background: var(--bg0);
  image-rendering: pixelated;

  color: var(--fg);
  font-family: var(--font);
  font-size: var(--font-size);
  text-rendering: optimizeLegibility;

}


table, th, td
{
  border-collapse: collapse;
  border: 1px solid;
  border-color: var(--grey);
}

th, td 
{
  padding: 10px;
  text-align: left;

}

.box {
  background: var(--bg1);
  position: relative;
  padding-top: 15px;
}

.seperator {
  border-bottom: 2px solid var(--bg3);
}

.box > .title
{
  background: var(--bg1);
  border: 2px solid var(--bg3);
  padding-left: 5px;
  padding-right: 5px;
  font-weight: strong;
  color: var(--pink);
  position: absolute;
  top: -12px;
}

#side-col > .box > .title
{
  left: 10px;
}

#main-col > .box > .title
{
  right: 10px;
}

.box > .content
{
  padding-top: 0px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}

box > .content > p
{
  margin-top: 20px;
}

.no-border-top
{
  border-top: none;
}
.no-border-right
{
  border-right: none;
}
.no-border-left
{
  border-left: none;
}
.no-border-bottom
{
  border-bottom: none;
}


.box > h2 {
  padding: 0px;
  font-family: "pixel nes";
  animation: 0.75s linear infinite text_strips;
}

.box > h3 {
  padding: 0px;
  color: var(--blue);
}


#links > p {
  margin: 0 auto
}

#grid {
  display: flex;
  margin-top: 10px;
  border: 2px solid var(--bg3);
  background: var(--bg1);
}

#main-col {
  flex: 3;
}


#side-col {
  flex: 1;
  border-right: 2px solid var(--bg3); 
}

#nav {
  left: 20px;
  color: var(--fg);
}

#nav > .root {
  color: var(--pink);
  font-weight: bold;
}

#nav > a {
  color: var(--green);
}

#nav > folder
{
}

a {
  text-decoration: none;
  color: var(--green)
}

a:hover {
  text-decoration: underline;
}


/* blog stuff */
.blog-body > details > p {
  padding-left: 1rem;
}

.blog-body > h1 {
  font-weight: normal;
  font-size: calc(var(--font-size)*1.45);
  color: var(--blue);
}

.blog-body > h2 {
  font-weight: normal;
  font-size: calc(var(--font-size)*1.35);
}

.blog-divider {
  border: 1.5px dashed grey;
}

.blog-title {
  color: var(--pink);
  text-decoration: none;
  font-size: 24px;
}

.blog-date {
  color: var(--yellow);
  font-size: 18px;
}

.blog-page > a{
  color: var(--blue);
  font-size: 18px;
}


.blog-body{
}

#jukebox  {
  padding-bottom: 10px;
}

#jukebox > .item {
  margin: 10px;
  text-align: center;
  border: 2px dotted var(--bg3);
  padding-top: 2px;
  padding-bottom: 2px;

}

#jukebox > .play {
  border: 2px solid var(--green);
  cursor: pointer;
  animation: pulse 0.5s ease-in-out infinite;
}

#jukebox > .item:not(.play):hover
{
  cursor: pointer;
  border-color: #fff;
  border: 2px solid var(--red);
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}