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

  --bg0: #000000;
  --bg1: #181818;
  --bg2: #333333;
  --fg: #eeeeee;

  --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: #c3c3c3;

  --text_strips_color1: #d0a8cf;
  --text_strips_color2: #c28dc0;
}


.highlight{
  font-size: var(--font-size-code);
}


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

}

#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(--pink);
  animation: 3s infinite flicker, 1s infinite text_strips;
}

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

  color: var(--fg);
  font-family: var(--font);
  font-size: var(--font-size);
}

h1, h2, h3, h4, h5 {
  display: inline;
}

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

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

}

.box {
  background: var(--bg1);
  border: 1px solid rgb(56, 56, 56);
  border-radius: 5px;
  margin: 5px;
}

.box-content
{
  padding-left: 8px;
  padding-right: 8px;
}
.box-title
{
  background: var(--pink);
  color: var(--bg0);

  letter-spacing: 3px;
  padding: 2px;
  padding-left: 8px;
  margin-bottom: 0px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}



#links > p {
  margin: 0 auto
}

#grid {
  display: flex;
}

#main-col {
  flex: 3;
}

#side-col {
  flex: 1;
}

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

a:hover {
  text-decoration: underline;
}

hr {
}

/* blog stuff */
#blog {
  border: 2px solid var(--bg2);
  border-radius: 10px;
  background-color: var(--bg1);
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}



.blog-body > details > summary {
  color: var(--yellow);

}
.blog-body > details > p {
  padding-left: 1rem;
}
.blog-body > h1 {
  font-weight: normal;
  font-size: 1.2rem;
  color: var(--blue);
}

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

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

.blog-date {
  color: var(--green);
  font-size: 20px;
}

.blog-body{
  color: var(--grey);
  margin-top: 10px;
  margin-bottom: 10px;
}

#music_container
{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  margin: 10px auto;
}

.music_item
{
  display: flex;
  position: relative;
  aspect-ratio: 1/1;
  width: fit-content;
  align-items: center;
  justify-content: center;
}

.music_item_overlay
{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  text-align: center;
  opacity: 0.7;
  font-size: 30px;

  /* @note: needs to be same as music_item.
   * Honestly this is really stupid and I can't
   * believe it's 2024 and it's so hard to justify
   * text vertically */
  line-height: 53px; 
}

.music_item_thumbnail
{
  width: 100%;
  display: block;
  height: auto;
}

.music_item_overlay:hover {
  cursor: pointer;
}