html {
  font-size: 62.5%;
  background-color: #FBF9F4;
  font-family: Charter, 'Times New Roman', Times, serif;
}

body {
  font-size: 1.6rem;
  color: #000;
}

header {
  border-bottom: 0.2rem solid #000;
}

canvas {
  background-color: transparent;
  margin-top: 50px;
}

pre {
  font-size: 1.2rem;
  background-color: rgba(240, 230, 215, 0.7);
  overflow-y: auto;
  padding: 0 0.75rem;
}

p code{ 
  font-size: 1.2rem;
  background-color: rgba(240, 230, 215, 0.7);
}

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

article{
  text-align: justify;
}

#vizzes {
  display: block;
  height: auto;
}


.bio {
  margin-top: 20px;
  font-size: 18px;
}

.writing { 
  margin-top: 60 px

}

a {
  color: black;
}

.post-row { 
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 5px;

  padding: 8px 0;
}

figcaption {
  font-family: "Elms Sans";
  font-size: 1.0rem;
}
figcaption a {
  text-decoration: none;
}

.post-list{
  margin-top: 15px;
}
.post-title{
  text-decoration: none;
  font-family: 'Georgia';
  font-size: 2.0rem;
  color: rgba(55, 55, 54, 0.802)
}


.post-tags, .post-row time { 
  color: #777777;
 }

footer {
  margin-top: 3rem;
  padding: 1.2rem 0;
  font-size: 1.4rem;
  color: #555;
}

#logo{
  font-size: 3.5rem;
  text-decoration: none;
}

p code {
    padding: 0 0.2rem;
}

.footnote-ref{
  text-decoration: none;
}

@media (max-width: 639px) {
  body {
    width: 90%;
    margin: 0 auto;
    padding: 0 5%;
  }
  header {
    margin: 4.2rem 0;
  }
  footer {
    text-align: center;
  }
  .sidenote-block,
  .footnotes-end-of-block {
    position: fixed;
    left: 1.2rem;
    right: 1.2rem;
    bottom: 1.2rem;
    top: auto;

    width: auto;
    max-width: none;
    margin: 0;
    transform: none;

    display: none;
    z-index: 1000;

    max-height: 40vh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 1.4rem 1.6rem;
    background: #fbf9f4;
    border: 1px solid #aaa;
    border-radius: 0.8rem;
    box-shadow: 0 0.8rem 2.5rem rgb(0 0 0 / 20%);

    font-size: 1.3rem;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .footnotes-end-of-block:has(li:target) {
    display: block;
  }

  .footnotes-end-of-block ol {
    margin: 0;
    padding-left: 2rem;
  }

  .footnotes-end-of-block li,
  .footnotes-end-of-block p {
    margin-top: 0;
    margin-bottom: 0;
  }

  #vizzes {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}
@media (min-width: 640px) {
  body {
    width: 65rem;
    margin: 0 auto;
    padding: 0;
  }
  header {
    margin: 0 0 3rem;
    padding: 1.2rem 0;
  }
  footer {
    text-align: right;
  }
  .footnotes-end-of-block {
    position: absolute;
    left: calc(100% + 3rem);
    width: 35rem;       
    font-size: 1.2rem;
    color:#3c3c3c;
  }
  article{
    text-align: justify;
    position: relative;
    overflow: visible;
  }
}