:root {
  --background: white;
  --color: hsl(212, 100%, 5%);
  --color--secondary: hsl(212, 30%, 40%);
  --accent-color: hsl(212, 100%, 42%);
  --link-color: var(--accent-color);
  --link-color--hover: hsl(212, 100%, 35%);
  --link-color--active: hsl(212, 100%, 30%);
}

.app-\!-display-flex {
  display: flex;
}

a {
  color: var(--link-color);
  text-decoration-thickness: 2px;
  text-decoration-skip: none;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--link-color--hover);
}

a:active, a:focus {
  color: var(--link-color--active);
}

a:focus-visible {
  outline: 2px solid var(--color);
}

.app-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.app-avatar__image {
  position: relative;
  display: inline-flex;
  border-radius: 100%;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.app-avatar::before {
  position: absolute;
  content: "";
  inset: 0;
  background: currentColor;
  z-index: -1;
  -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='417px' height='418px' viewBox='0 0 417 418' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.980673, 0.980673)' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M210.919327,0.0193270899 C93.9393271,-1.56067291 -1.56067291,93.9393271 0.0193270899,210.919327 C1.57932709,323.109327 92.9293271,414.459327 205.119327,416.019327 C322.119327,417.619327 417.599327,322.119327 415.999327,205.139327 C414.459327,92.9293271 323.109327,1.57932709 210.919327,0.0193270899 Z M337.339327,327.269327 C336.532877,328.141425 335.380548,328.609997 334.194338,328.548175 C333.008128,328.486353 331.910751,327.900533 331.199327,326.949327 C322.254817,315.246761 311.301056,305.22754 298.849327,297.359327 C273.389327,281.019327 241.129327,272.019327 208.019327,272.019327 C174.909327,272.019327 142.649327,281.019327 117.189327,297.359327 C104.738051,305.224049 93.7842588,315.239911 84.8393271,326.939327 C84.127903,327.890533 83.0305259,328.476353 81.8443159,328.538175 C80.6581059,328.599997 79.5057768,328.131425 78.6993271,327.259327 C49.3560751,295.582996 32.7342766,254.192296 32.0193271,211.019327 C30.3893271,113.709327 110.239327,32.2593271 207.589327,32.018782 C304.939327,31.7793271 384.019378,110.829327 384.019378,208.019327 C384.052862,252.233399 367.379541,294.82752 337.339327,327.269327 Z'%3E%3C/path%3E%3Cpath d='M208.019327,96.0193271 C188.299327,96.0193271 170.469327,103.409327 157.799327,116.839327 C145.129327,130.269327 138.799327,148.839327 140.229327,168.769327 C143.129327,208.019327 173.539327,240.019327 208.019327,240.019327 C242.499327,240.019327 272.849327,208.019327 275.809327,168.779327 C277.289327,149.039327 271.009327,130.639327 258.129327,116.959327 C245.409327,103.459327 227.609327,96.0193271 208.019327,96.0193271 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='417px' height='418px' viewBox='0 0 417 418' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(0.980673, 0.980673)' fill='%23000000' fill-rule='nonzero'%3E%3Cpath d='M210.919327,0.0193270899 C93.9393271,-1.56067291 -1.56067291,93.9393271 0.0193270899,210.919327 C1.57932709,323.109327 92.9293271,414.459327 205.119327,416.019327 C322.119327,417.619327 417.599327,322.119327 415.999327,205.139327 C414.459327,92.9293271 323.109327,1.57932709 210.919327,0.0193270899 Z M337.339327,327.269327 C336.532877,328.141425 335.380548,328.609997 334.194338,328.548175 C333.008128,328.486353 331.910751,327.900533 331.199327,326.949327 C322.254817,315.246761 311.301056,305.22754 298.849327,297.359327 C273.389327,281.019327 241.129327,272.019327 208.019327,272.019327 C174.909327,272.019327 142.649327,281.019327 117.189327,297.359327 C104.738051,305.224049 93.7842588,315.239911 84.8393271,326.939327 C84.127903,327.890533 83.0305259,328.476353 81.8443159,328.538175 C80.6581059,328.599997 79.5057768,328.131425 78.6993271,327.259327 C49.3560751,295.582996 32.7342766,254.192296 32.0193271,211.019327 C30.3893271,113.709327 110.239327,32.2593271 207.589327,32.018782 C304.939327,31.7793271 384.019378,110.829327 384.019378,208.019327 C384.052862,252.233399 367.379541,294.82752 337.339327,327.269327 Z'%3E%3C/path%3E%3Cpath d='M208.019327,96.0193271 C188.299327,96.0193271 170.469327,103.409327 157.799327,116.839327 C145.129327,130.269327 138.799327,148.839327 140.229327,168.769327 C143.129327,208.019327 173.539327,240.019327 208.019327,240.019327 C242.499327,240.019327 272.849327,208.019327 275.809327,168.779327 C277.289327,149.039327 271.009327,130.639327 258.129327,116.959327 C245.409327,103.459327 227.609327,96.0193271 208.019327,96.0193271 Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.app-authors {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.app-author {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  font-size: 1.15rem;
  line-height: 1.66;
  color: var(--color);
}

@media screen and (max-width: 600px) {
  .app-author {
    display: flex;
    flex-direction: column;
  }
}

.app-author__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.app-author p {
  margin-bottom: 0 !important;
}

.app-author p:empty {
  display: none;
}

.app-author__name {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0 !important;
}

.app-back-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.app-back-link::before {
  content: "";
  position: relative;
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  background-color: currentColor;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 550 512'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='60' d='M328 112L184 256l144 144'/%3E%3C/svg%3E%0A");
  background-size: 1rem;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100vmax;
}

.app-author-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75ch;
}

.app-author-link .app-avatar {
  width: 1.4rem;
}

.app-tags {
  display: flex;
  align-items: center;
  list-style-type: none;
  flex-wrap: wrap;
  padding: 0;
  gap: 0.5rem;
  margin-bottom: 0;
}

.app-tags__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

.app-tags__tag::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  border-radius: 100vmax;
  background: currentColor;
}

.app-social-media-buttons {
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.app-social-media-buttons li {
  display: contents;
}

.app-social-media-buttons li a {
  --brand-color: var(--accent-color);
  --brand-color-translucent: hsla(212, 100%, 42%, 40%);
  position: relative;
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0;
  flex-shrink: 0;
}

.app-social-media-buttons li a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-color);
  box-shadow: 0 0 0 10px transparent;
  transition: 0.3s ease;
  border-radius: 100vmax;
  opacity: 0.2;
}

.app-social-media-buttons li a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M202.24 74C166.11 56.75 115.61 48.3 48 48a31.36 31.36 0 00-17.92 5.33A32 32 0 0016 79.9V366c0 19.34 13.76 33.93 32 33.93 71.07 0 142.36 6.64 185.06 47a4.11 4.11 0 006.94-3V106.82a15.89 15.89 0 00-5.46-12A143 143 0 00202.24 74zM481.92 53.3A31.33 31.33 0 00464 48c-67.61.3-118.11 8.71-154.24 26a143.31 143.31 0 00-32.31 20.78 15.93 15.93 0 00-5.45 12v337.13a3.93 3.93 0 006.68 2.81c25.67-25.5 70.72-46.82 185.36-46.81a32 32 0 0032-32v-288a32 32 0 00-14.12-26.61z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M202.24 74C166.11 56.75 115.61 48.3 48 48a31.36 31.36 0 00-17.92 5.33A32 32 0 0016 79.9V366c0 19.34 13.76 33.93 32 33.93 71.07 0 142.36 6.64 185.06 47a4.11 4.11 0 006.94-3V106.82a15.89 15.89 0 00-5.46-12A143 143 0 00202.24 74zM481.92 53.3A31.33 31.33 0 00464 48c-67.61.3-118.11 8.71-154.24 26a143.31 143.31 0 00-32.31 20.78 15.93 15.93 0 00-5.45 12v337.13a3.93 3.93 0 006.68 2.81c25.67-25.5 70.72-46.82 185.36-46.81a32 32 0 0032-32v-288a32 32 0 00-14.12-26.61z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 50%;
  mask-size: 50%;
}

.app-social-media-buttons li a[href*="linkedin"] {
  --brand-color: rgba(14, 78, 181);
  --brand-color-translucent: rgba(14, 78, 181, 0.4);
}

.app-social-media-buttons li a[href*="linkedin"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z'/%3E%3C/svg%3E");
}

.app-social-media-buttons li a[href*="github.com"] {
  --brand-color: rgb(110, 84, 148);
  --brand-color-translucent: rgba(110, 84, 148, 0.4);
}

.app-social-media-buttons li a[href*="github.com"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z'/%3E%3C/svg%3E");
  -webkit-mask-size: 55%;
  mask-size: 55%;
}

.app-social-media-buttons li a[href*="twitter"] {
  --brand-color: rgb(29, 161, 242);
  --brand-color-translucent: rgba(29, 161, 242, 0.4);
}

.app-social-media-buttons li a[href*="twitter"]::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/%3E%3C/svg%3E");
}

.app-social-media-buttons li a:hover::before {
  opacity: 0.25;
}

.app-social-media-buttons li a:active::before, .app-social-media-buttons li a:focus::before {
  box-shadow: 0 0 0 5px var(--brand-color-translucent);
  opacity: 0.3;
}

.listingblock {
  background-color: #f1f1f4;
  padding: 1rem;
  margin: 0 0 1.5rem 0;
}

.listingblock pre {
  margin-bottom: 0;
}

.highlight table td {
  padding: 5px;
}

.highlight table pre {
  margin: 0;
}

.highlight .cm {
  color: #999988;
  font-style: italic;
}

.highlight .cp {
  color: #999999;
  font-weight: bold;
}

.highlight .c1 {
  color: #999988;
  font-style: italic;
}

.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}

.highlight .c, .highlight .cd {
  color: #999988;
  font-style: italic;
}

.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}

.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}

.highlight .ge {
  color: #000000;
  font-style: italic;
}

.highlight .gr {
  color: #aa0000;
}

.highlight .gh {
  color: #999999;
}

.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}

.highlight .go {
  color: #888888;
}

.highlight .gp {
  color: #555555;
}

.highlight .gs {
  font-weight: bold;
}

.highlight .gu {
  color: #aaaaaa;
}

.highlight .gt {
  color: #aa0000;
}

.highlight .kc {
  color: #000000;
  font-weight: bold;
}

.highlight .kd {
  color: #000000;
  font-weight: bold;
}

.highlight .kn {
  color: #000000;
  font-weight: bold;
}

.highlight .kp {
  color: #000000;
  font-weight: bold;
}

.highlight .kr {
  color: #000000;
  font-weight: bold;
}

.highlight .kt {
  color: #445588;
  font-weight: bold;
}

.highlight .k, .highlight .kv {
  color: #000000;
  font-weight: bold;
}

.highlight .mf {
  color: #009999;
}

.highlight .mh {
  color: #009999;
}

.highlight .il {
  color: #009999;
}

.highlight .mi {
  color: #009999;
}

.highlight .mo {
  color: #009999;
}

.highlight .m, .highlight .mb, .highlight .mx {
  color: #009999;
}

.highlight .sb {
  color: #d14;
}

.highlight .sc {
  color: #d14;
}

.highlight .sd {
  color: #d14;
}

.highlight .s2 {
  color: #d14;
}

.highlight .se {
  color: #d14;
}

.highlight .sh {
  color: #d14;
}

.highlight .si {
  color: #d14;
}

.highlight .sx {
  color: #d14;
}

.highlight .sr {
  color: #009926;
}

.highlight .s1 {
  color: #d14;
}

.highlight .ss {
  color: #990073;
}

.highlight .s {
  color: #d14;
}

.highlight .na {
  color: #008080;
}

.highlight .bp {
  color: #999999;
}

.highlight .nb {
  color: #0086B3;
}

.highlight .nc {
  color: #445588;
  font-weight: bold;
}

.highlight .no {
  color: #008080;
}

.highlight .nd {
  color: #3c5d5d;
  font-weight: bold;
}

.highlight .ni {
  color: #800080;
}

.highlight .ne {
  color: #990000;
  font-weight: bold;
}

.highlight .nf {
  color: #990000;
  font-weight: bold;
}

.highlight .nl {
  color: #990000;
  font-weight: bold;
}

.highlight .nn {
  color: #555555;
}

.highlight .nt {
  color: #000080;
}

.highlight .vc {
  color: #008080;
}

.highlight .vg {
  color: #008080;
}

.highlight .vi {
  color: #008080;
}

.highlight .nv {
  color: #008080;
}

.highlight .ow {
  color: #000000;
  font-weight: bold;
}

.highlight .o {
  color: #000000;
  font-weight: bold;
}

.highlight .w {
  color: #bbbbbb;
}

.app-blog-page .attrs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.app-blog-page .attrs > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-post-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 100ch;
  min-height: 65rem;
  margin-top: 4rem;
  color: var(--color);
  margin-bottom: 4rem;
}

@media screen and (max-width: 600px) {
  .app-post-page {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media screen and (max-width: 1200px) {
  .app-post-page {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

.app-post-page h1 {
  font-size: 2.75rem;
  font-weight: 800;
  max-width: 80%;
  margin-bottom: 0;
}

@media screen and (max-width: 600px) {
  .app-post-page h1 {
    max-width: unset;
  }
}

@media screen and (max-width: 1200px) {
  .app-post-page h1 {
    font-size: 2rem;
  }
}

.app-post-page h2 {
  font-size: 1.6rem;
  font-weight: 700;
}

.app-post-page .post-attrs {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  gap: 1rem;
  color: var(--color--secondary);
  flex-wrap: wrap;
}

.app-post-page .submitted {
  display: flex;
  align-items: center;
  gap: 0.5ch;
  font-weight: 500;
}

.app-post-page .blog-content {
  margin-bottom: -1.5rem;
}

.app-post-page .blog-content h3 {
  font-size: 1.4rem;
  font-weight: 600;
}

.app-post-page .blog-content .paragraph, .app-post-page .blog-content h2, .app-post-page .blog-content h3, .app-post-page .blog-content hr, .app-post-page .blog-content table, .app-post-page .blog-content pre, .app-post-page .blog-content ul, .app-post-page .blog-content ol, .app-post-page .blog-content .imageblock, .app-post-page .blog-content .listingblock {
  margin: 0 0 1.5rem 0 !important;
}

.app-post-page .blog-content .imageblock {
  background-color: #f1f1f4;
}

.app-post-page .blog-content .imageblock.right, .app-post-page .blog-content .image.right {
  float: right;
}

.app-post-page .blog-content .imageblock.left, .app-post-page .blog-content .image.left {
  float: left;
}

.app-post-page .blog-content .imageblock.center, .app-post-page .blog-content .image.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.app-post-page .blog-content .imageblock.boxshadow img {
  margin: 5px 5px 5px 5px;
  -moz-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.5);
}

.app-post-page .blog-content .sectionbody, .app-post-page .blog-content .sect1, .app-post-page .blog-content .ulist, .app-post-page .blog-content .sect2 {
  display: contents;
}

.app-post-page .blog-content .paragraph p, .app-post-page .blog-content li, .app-post-page .blog-content li p {
  margin: 0 !important;
  line-height: 1.66;
  font-size: 1.15rem;
}

.app-post-page .twitter-share-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-items: center;
  gap: 1ch;
  box-sizing: border-box;
  padding: 0 0.8rem;
  color: #0d92e5;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 0;
  margin-left: auto;
}

.app-post-page .twitter-share-button::before {
  content: "";
  position: relative;
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  background-color: #0d92e5;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.app-post-page .twitter-share-button::after {
  content: "";
  position: absolute;
  inset: -0.45rem 0;
  background-color: #1da1f2;
  border-radius: 0.66rem;
  box-shadow: 0 0 0 10px transparent;
  transition: 0.3s ease;
  z-index: -1;
  opacity: 0.15;
}

.app-post-page .twitter-share-button:hover {
  text-decoration: none;
}

.app-post-page .twitter-share-button:hover::after {
  opacity: 0.25;
}

.app-post-page .twitter-share-button:active::after, .app-post-page .twitter-share-button:focus::after {
  opacity: 0.3;
  box-shadow: 0 0 0 5px rgba(29, 161, 242, 0.4);
}

@media screen and (max-width: 600px) {
  .app-post-page .twitter-share-button {
    display: none;
  }
}