#blog-headers h1 { font-weight: 1000; text-wrap: balance; }

#blog, #blog-headers, #whats-next { width: min(800px, 90dvw); padding-left: 0; padding-right: 0; }

.back-blog { width: min(1000px, 90dvw) }

#blog h2:not(:first-child) { margin-top: 4rem; }
#blog h3 { margin-top: 2rem; }
#blog img { margin-top: 2rem; margin-bottom: 2rem; }
#blog p a { font-weight: 700 }

#whats-next img {
  height: 100%;
}

#blog {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

#blog-headers img {
  max-height: 50dvh;
  object-fit: cover;
}

@media (min-width: 769px) {
  #blog-headers #header-wrapper {
    bottom: 0px;
    color: white;
    background-color: #00000088;

    padding-top: 150px !important;
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 150px);
    mask-image: linear-gradient(to bottom, transparent, black 150px);
  }
}

#blog p, #blog ul, #blog .alert {
  font-size: 19px;
  font-weight: 350;
  line-height: 1.9em;
  letter-spacing: 0.5px
}

#blog :is(.alert-warning, .alert-info) {
  border-left: 7px solid;
}

#blog p {
  margin-bottom: 1.75rem;
}

#blog li {
  margin-bottom: 1.25rem;
}

#blog :is(h2, h3) a {
  text-decoration: none;
  color: inherit;
}

#blog :is(h2, h3) a:hover {
  color: #555;
}


.highlighter-rouge {
  color: #ca1c1c;
}

.text-spoil:hover {
    transition: 0.3s;
}

.text-spoil:not(:hover):not(:focus) {
    background-color: #888;
    outline: 1px solid #777;
    border-radius: 3px;
    color: #00000000;
}

@media (max-width: 768px) {
  #blog-headers :is(.position-relative, .position-absolute) {
    position: unset !important;
  }

  h1 {
    font-size: 32px;
  }
}







/* Code */
.rouge-wrapper {
  max-width: min(800px, 90dvw);
  overflow-x: auto;
}

.rouge-line-table {
    background-color: #272822;
    margin-bottom: 2rem;
}

.rouge-line-table td {
  line-height: 1.2;
}

.rouge-line-table .rouge-code {
    width: 100%;
    border-left-width: 8px !important;
}

.rouge-line-table .rouge-gutter pre {
    text-align: right;
    min-width: 30px;
    margin-right: 5px;
    opacity: .5;
    border-right: 1px solid #555;
    padding-right: 3px;
}

.rouge-line-table pre {
  margin-bottom: 0;
}

.rouge-line-table pre, .rouge-line-table pre .w {
    color: #f8f8f2;
    background-color: #272822;
}

.rouge-line-table :is(.err) {
  color: #272822;
  background-color: #f92672;
}
.rouge-line-table :is(.c,  .cd,  .cm,  .c1,  .cs) {
  color: #75715e;
}
.rouge-line-table :is(.cp, .nt) {
  color: #f4bf75;
}
.rouge-line-table :is(.o,  .ow, .p,  .pi) {
  color: #f8f8f2;
}
.rouge-line-table :is(.gd, .nf) {
  color: #f92672;
}
.rouge-line-table :is(.gh) {
  color: #66d9ef;
  background-color: #272822;
  font-weight: bold;
}
.rouge-line-table :is(.k, .kn, .kp, .kr, .kv, .nl) {
  color: #ae81ff;
}
.rouge-line-table :is(.kc, .kt, .kd) {
  color: #fd971f;
}
.rouge-line-table :is(.s,  .sb,  .sc,  .sd,  .s2,  .sh,  .sx,  .s1, .dl) {
  color: #46b9ff;
}
.rouge-line-table :is(.sr) {
  color: #a1efe4;
}
.rouge-line-table :is(.si, .se) {
  color: #cc6633;
}
.rouge-line-table :is(.nn, .nc, .no) {
  color: #f4bf75;
}
.rouge-line-table :is(.na, .mi) {
  color: #66d9ef;
}
.rouge-line-table :is(.m,  .mf,  .mh,  .il,  .mo,  .mb,  .mx, .ss, .gi, .nb, .n, .nx) {
  color: #a6e22e;
}
.rouge-gutter {
  -moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;
}

/* \ Code */


/* https://www.bram.us/2019/10/24/pure-css-scroll-shadows-vertical-horizontal/ */
.scrollcontainer {
  --background-color: #EAECEF;
  --shadow-color: rgba(150,150,150, 0.5);
  --shadow-size: 0.75em;
  --transparent: rgba(255, 255, 255, 0);
}

.scrollcontainer--vertical {
  overflow-y: scroll;

  background:
    linear-gradient(var(--background-color), var(--background-color), var(--transparent) calc(var(--shadow-size) * 2)),
    radial-gradient(farthest-side at 50% 0, var(--shadow-color), var(--transparent)),
    linear-gradient(to top, var(--background-color), var(--background-color), var(--transparent) calc(var(--shadow-size) * 2)),
    radial-gradient(farthest-side at 50% 100%, var(--shadow-color), var(--transparent)) 0 100%;
  background-color: var(--background-color);
  background-repeat: no-repeat;
  background-attachment: local, scroll, local, scroll;
  background-size: 100% 100%, 100% var(--shadow-size), 100% 100%, 100% var(--shadow-size);
}

.scrollcontainer--horizontal {
  overflow-x: scroll;

  background:
    linear-gradient(to right, var(--background-color), var(--background-color), var(--transparent) calc(var(--shadow-size) * 2)),
    radial-gradient(farthest-side at 0 50%, var(--shadow-color), var(--transparent)),
    linear-gradient(to left, var(--background-color), var(--background-color), var(--transparent) calc(var(--shadow-size) * 2)),
    radial-gradient(farthest-side at 100% 50%, var(--shadow-color), var(--transparent)) 100%;
  background-color: var(--background-color);
  background-repeat: no-repeat;
  background-attachment: local, scroll, local, scroll;
  background-size: 100% 100%, var(--shadow-size) 100%, 100% 100%, var(--shadow-size) 100%;
  height: 100%;
}