:root {
  --font: "Source Code Pro";
  --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: #a0a0a0;

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

.red {
  color: var(--red);
}

.blue {
  color: var(--blue);
}

.green {
  color: var(--green);
}

.yellow {
  color: var(--yellow);
}

.pink {
  color: var(--pink);
}

.bold {
  font-weight: bold;
}

.underline 
{
  text-decoration: underline;
}

.strikethrough 
{
  text-decoration: line-through;
}


.indent-1
{
  padding-left: calc(var(--font-size)*1.5);
  display: inline-block;
}

.indent-2
{
  padding-left: calc(var(--font-size)*3);
  display: inline-block;
}

.indent-3
{
  padding-left: calc(var(--font-size)*4.5);
  display: inline-block;
}
@font-face 
{
  font-family: "Source Code Pro";
  src: url("/font/source_code_pro.ttf");
}

@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);
}

#status {
  padding-top: 64px;
}

#status-content {
  overflow-wrap: break-word;
  border: 2px dashed grey;
  border-radius: 2%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}


#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);
}

.soft {
  color: var(--grey);
}

.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;
}



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

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

li, ul, ol {
  margin: 1rem;
  padding: 0px;
}


#links > p {
  margin: 0 auto
}

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

#main-col {
  flex: 4;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1
}

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

#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);
  color: var(--red);
  padding-left: calc(var(--font-size)*1.5);
}

.blog-body > h2 ~ * {
  padding-left: calc(var(--font-size)*1.5);
}
.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{
}

.sketch > canvas {
  border: solid 2px grey;
}

.sketch {
  display: flex;
  justify-content: center;
}


#term {
  background-color: var(--bg);
  color: var(--fg);
  margin: 0px auto;
}

#terminal
{
  overflow: auto;
  height: 550px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  scrollbar-width: thick;
  scrollbar-color: var(--scrollbar-color);
}

#terminal pre 
{

  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
}

.banner
{
  white-space: pre;
  line-height: var(--font-size);
}
#terminal-input
{
  color: inherit;
  background-color: var(--bg3);
  width: 100%;
  font-family: inherit;
  border: none;
  outline: none;
  font-size: inherit;
  padding: 10px;
}