:root {
  --font: monospace;
  --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(0 46.7% 76.5%);
  --yellow: hsl(44 46.7% 76.5%);
  --grey: #a0a0a0;

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

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

.highlight{
  font-size: 16px;
}

h1 {
  color: var(--blue);
  font-weight: normal;
  font-size: 28px;
}

h2 {
  color: var(--red);
  font-weight: normal;
  font-size: 24px;
}

head, 
body {
  font-family: monospace;
  font-size: 16px;
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--bg0);
  color: var(--fg);
  background-image: 
    linear-gradient(var(--bg1) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg1) 1px, transparent 1px),
    linear-gradient(var(--bg1) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg1) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

main {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--bg3);
  margin: 0 auto;
  background: var(--bg1);
  width: 900px;
}

#blog-list-top
{
  flex: 1;
  border-bottom: 2px solid var(--bg3);
  padding: 10px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

#blog-list-filter
{
  background: var(--bg2);
  color: var(--fg);
  font-family: monospace;
  border: solid 2px var(--bg3);
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  font-size: 16px;
  padding: 2px;
  width: 100%;
}

#blog-list-filter-clear
{
  background: var(--bg2);
  color: var(--fg);
  font-family: monospace;
  outline: none;
  box-shadow: none;
  appearance: none;
  border: solid 2px var(--bg3);
  -webkit-appearance: none;
  font-size: 16px;
  padding: 2px;
  margin-top: 8px;
  width: 100px;
}

#blog-list-filter-clear:hover
{
  background-color: var(--bg3);;
}

.blog-list-filter-shortcut
{
  color: var(--green);
  cursor: pointer;

}
.blog-list-filter-shortcut:hover
{
  font-size: 24px;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
  background: var(--bg3);

}

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

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

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




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

#blog-post
{
  padding: 10px;
}

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

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


#blog-list
{
  flex: 10;
  display: flex;
  flex-direction: column;
  width: 800px;
  padding: 10px;
}

.blog-list-item
{
  display: flex;
  gap: 15px;
  text-decoration: none;
}
.blog-list-item:hover
{
  font-size: 24px;
  border-top: 2px solid var(--grey);
  border-bottom: 2px solid var(--grey);
  background: var(--bg3);
}

#blog-list-no-post-msg 
{
  padding: 10px;
  display: none;
}

#blog-list-no-post-msg[visible="on"]
{
  display: flex;
}

.blog-list-item[visible="off"]
{
  display: none;
}

.blog-list-item-info
{
  flex: 1;
}

.blog-list-item-info-name
{
  color: var(--green);
  text-decoration: none;
}


.blog-list-item-info-tags
{
  color: grey;
}

.blog-content-tags
{
  color: blue;
  text-decoration: none;
}


.blog-content-date
{
  color: var(--yellow);
}

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

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