@import url("header.css");

@font-face {
  font-family: dynapuff;
  src: url("static/fonts/DynaPuff/DynaPuff-VariableFont_wdth,wght.ttf");
}

@font-face {
  font-family: shrikhand;
  src: url("static/fonts/Shrikhand/Shrikhand-Regular.ttf");
}

@font-face {
  font-family: merri;
  src: url("static/fonts/Merriweather/Merriweather-Bold.ttf");
}

body {
  /* center */
  background: #F6F6F6;
  color: #0D0D0D;
  font-family: roboto;
  font-size: 1.2rem;
  text-align: justify;
}

.centered-column {
  max-width: clamp(5vw, 50rem, 90vw);
  /* margin: 0 auto 20 auto; */
  margin: auto;
  margin-top: 0;
  margin-bottom: 100px;
}

h1 {
  font-family: merri;
  font-size: 2.5rem;
  text-align: center;
}

h2 {
  font-family: merri;
  font-size: 1.8rem;
}

img {
  mix-blend-mode: darken;
}

.center-img {
  display: block;
  margin: auto;
}

.img-root,
.video-root {
  display: flex;
  width: 100%;
  gap: 50px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 30px;
  margin-bottom: 50px;
}

.img-root>div,
.video-root>div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-root img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

.img-title,
.video-title {
  text-align: center;
  font-size: 1.1rem;
  font-style: italic;
}

.video-div {
  mix-blend-mode: darken;
  display: block;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}

.footer {
  font-size: 0.9em;
  font-style: italic;
  margin-top: 50px;
  text-align: right;
}

/* Everything code related */

code:not(:has(> *)) {
  color: #515151;
  background: #DCF2E5;
  border-radius: 4px;
  padding-left: 3px;
  padding-right: 3px;
  font-size: 1rem;
}

code>div>pre {
  font-size: 0.9rem;
  overflow-x: scroll;
  color: #8f3f71;
  background: #f0f0f0;
  padding: 20px;
  border-radius: 7px;
  border-style: solid;
  border-color: #d0d0d0;
}

/* Function definitions */
.nf {
  color: #79740e;
}

.n {
  color: #3c3836;
}

/* String */
.s2 {
  color: #79740e;
}

/* Comments */
.c1,
.sd {
  color: #7c6f64;
}

/* Keywords */
.k,
.kn,
.ow {
  color: #9d0006;
}