/* Base16 Atelier Lakeside Dark - Theme */

/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside) */

/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */

/* Atelier-Lakeside Comment */

.hljs-comment,
.hljs-quote {
  color: #7195a8;
}

/* Atelier-Lakeside Red */

.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: #d22d72;
}

/* Atelier-Lakeside Orange */

.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
  color: #935c25;
}

/* Atelier-Lakeside Green */

.hljs-string,
.hljs-symbol,
.hljs-bullet {
  color: #568c3b;
}

/* Atelier-Lakeside Blue */

.hljs-title,
.hljs-section {
  color: #257fad;
}

/* Atelier-Lakeside Purple */

.hljs-keyword,
.hljs-selector-tag {
  color: #6b6bb8;
}

.hljs {
  display: block;
  overflow-x: auto;
  background: #161b1d;
  color: #7ea2b4;
  padding: 0.5em;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

@font-face {
  font-family: 'Abril Fatface';

  src: url('/fonts/abril-fatface-regular.woff2') format('woff2');

  font-weight: 500;

  font-style: normal;
}

@font-face {
  font-family: 'Francois One';

  src: url('/fonts/francois-one-regular.woff2') format('woff2');

  font-weight: 500;

  font-style: normal;
}

@font-face {
  font-family: 'Nova';

  src: url('/fonts/novaslim.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;
}

@font-face {
  font-family: 'Nova';

  src: url('/fonts/novasquare.woff2') format('woff2');

  font-weight: 700;

  font-style: normal;
}

@font-face {
  font-family: 'Nova';

  src: url('/fonts/novascript.woff2') format('woff2');

  font-weight: 400;

  font-style: italic;
}

@font-face {
  font-family: 'Nova Oval';

  src: url('/fonts/novaoval.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;
}

@font-face {
  font-family: 'Nova Mono';

  src: url('/fonts/novamono.woff2') format('woff2');

  font-weight: 400;

  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Francois One', 'Verdana', sans-serif;
  background-color: #76bfbe;
  background-image: url('/homepage-2019-06/bg.jpg');
  background-size: contain;
  background-attachment: fixed;
}

/*////////////////////////////////////////////////////////////// Homepage header ///////////////////// */

header {
  position: relative;
}

#bg-text {
  position: fixed;
  width: 160vw;
  height: 140vh;
  transform: rotate(-6deg);
  top: -10rem;
  left: -5rem;
  opacity: 0.5;
  z-index: -20;
}

/* Text excerpts selected from https://talktotransformer.com/ answers for prompt "I love dogs" */

#bg-text::after {
  content: "“I love dogs. I love puppies and I love dogs. And for the record I do. I adore them, and in this particular case they love my dog. I’m just proud of him. I love dogs like the schnauzers, the ones with the little eyes, the dachshunds.” I told them, “How about a big and cute puppy? You’ve got to be kidding. He can’t be bigger than a Doberman,” they said. “I love dogs. I love puppies. You are a wonderful fellow. I do. I am truly in awe.” That’s why I love dogs. I also love my cat. She is a dog; she’s got a heartbeat and she needs no sleep to sleep and she loves to curl up in the corner and be happy. “I love dogs. I love cats. I love the occasional cow. My dog is like, the best friend,” he tells me. “In fact, if they’re not looking for a job, maybe they should look for a family. It’s a different kind of animal—a family,” she says. If there’s one thing that is true for dog lovers everywhere, it’s that the only rule you need to adhere to is your own. “If they don’t recognize you and you’re not their friend, then there’s not anything you can do to get them to see you as a friend. You’ve just got to go, I will keep on loving you.” The first person I was able to talk to at the dog café was the sweet-natured Karen. “Hi, I’m Karen, and I just love dogs,” she said excitedly as I asked her about the café. She was right: they were so much more than I could have ever imagined a dog-loving couple for. The café was filled with a diverse group of folks from around town, a mix of dogs and people, who were all happy to share their love for their furry companions. Karen was on the ground early one morning, helping other couples around town meet to share their dogs (and how beautiful they all are). “I’m just a little girl from a small town in North Carolina, and I’m one of those small village girls who likes to love dogs,” she said. “I’ve been a dog lover for so long that whenever I go to a new town, I just love dogs! So my first few days here my friends and I were just hanging out in the café sharing my dogs. I wanted to meet this wonderful group in person and talk to all these dog lovers about it, and we just started talking and talking and chatting.” And there was one, my second. We’d be looking in the rearview mirror and the puppy’s nose popped out the front window. The rear-view mirror was out and there was the Pomeranian behind the rear-view mirror. He’s got the look of a man out of the Old West. The camera was rolling. It was all going to hell, but this dog, this little guy, got out, pulled out his camera and he took the picture. But as soon as the dog got out, he grabbed it and threw it on the ground. He wanted us to know that we’d seen something so great to happen to us. He wanted us to realize that we were so unlucky when there were no other dogs there to run.";
  font-family: 'Abril Fatface';
  font-size: 6rem;
  line-height: 4.5rem;
  letter-spacing: -0.4rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: -webkit-linear-gradient(#0e6977, #509da1);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: -20;
}

h1#title-effect /* The solid color and text shadow */ {
  font-family: 'Abril Fatface';
  font-size: 2rem;
  color: #fcaebb;
  text-shadow: -6px 3px #0e6977, -1px -1px 0 #0e6977, 1px -1px 0 #0e6977, -1px 1px 0 #0e6977, 1px 1px 0 #0e6977;
  position: absolute;
  z-index: 200;
}

@media (min-width: 1024px) {
  h1#title-effect {
    padding: 0;
    transform: rotate(-11deg);
    transform-origin: top left;
    font-size: 4rem;
  }
}

.highlight-animation /* The highlight animation, only on large screens, aria-hidden */ {
  display: block;
  position: absolute;
  top: 0;
  text-shadow: none;
  font-size: 2rem;
  background-size: 200% 100%;
  background-image: linear-gradient(100deg, #fcaebb 2.56%, #ffe4e9 2.56%, #ffe4e9 2.82%, #fcaebb 2.82%, #fcaebb 3.77%, #ffe4e9 3.77%, #ffe4e9 5%, #fcaebb 5%);
  background-clip: text;
  color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  will-change: background-position;
  -webkit-animation: 4.5s linear infinite highlight;
          animation: 4.5s linear infinite highlight;
  background-clip: text;
  -webkit-background-clip: text;
  z-index: 200;
}

@media (min-width: 1024px) {
  .highlight-animation {
    padding: 0;
    font-size: 4rem;
  }
}

@-webkit-keyframes highlight {
  0% {
    background-position: 10% 0%;
  }

  45% {
    background-position: 10% 0%;
  }

  75% {
    background-position: -100% 0%;
  }

  100% {
    background-position: -100% 0%;
  }
}

@keyframes highlight {
  0% {
    background-position: 10% 0%;
  }

  45% {
    background-position: 10% 0%;
  }

  75% {
    background-position: -100% 0%;
  }

  100% {
    background-position: -100% 0%;
  }
}

#title-effect svg {
  display: inline;
  width: 3rem;
  height: 3rem;
  -webkit-filter: drop-shadow( -6px 3px #0e6977 ) drop-shadow( -2px -2px 0 #0e6977 ) drop-shadow( 2px -2px 0 #0e6977) drop-shadow( -2px 2px 0 #0e6977 ) drop-shadow( 2px 2px 0 #0e6977);
          filter: drop-shadow( -6px 3px #0e6977 ) drop-shadow( -2px -2px 0 #0e6977 ) drop-shadow( 2px -2px 0 #0e6977) drop-shadow( -2px 2px 0 #0e6977 ) drop-shadow( 2px 2px 0 #0e6977);
}

@media (min-width: 1024px) {
  #title-effect svg {
    width: 6rem;
    height: 6rem;
  }
}

#emoji {
  display: block;
  position: relative;
  margin-left: 3rem;
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  #emoji {
    display: inline;
    margin: 0;
  }
}

#dog {
  position: absolute;
  z-index: 100;
}

#dog-wink {
  position: absolute;
  z-index: 150;
  -webkit-filter: none !important;
          filter: none !important;
  -webkit-animation: 4.5s linear infinite dog-wink;
          animation: 4.5s linear infinite dog-wink;
}

@-webkit-keyframes dog-wink {
  0% {
    opacity: 0;
  }

  74.99% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  84.99% {
    opacity: 1;
  }

  85% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes dog-wink {
  0% {
    opacity: 0;
  }

  74.99% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  84.99% {
    opacity: 1;
  }

  85% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

#sparkles {
  position: absolute;
  z-index: 170;
  width: 2rem !important;
  height: 2rem !important;
  left: 2.5rem;
  top: -0.6rem;
  -webkit-animation: 4.5s linear infinite sparkles;
          animation: 4.5s linear infinite sparkles;
}

@media (min-width: 1024px) {
  #sparkles {
    width: 3.6rem !important;
    height: 3.6rem !important;
    left: 4.0rem;
    top: -0.8rem;
  }
}

@-webkit-keyframes sparkles {
  0% {
    opacity: 0;
    transform: scale(0.01);
  }

  72% {
    opacity: 0;
    transform: scale(0.01);
  }

  75% {
    opacity: 1;
    transform: scale(1);
  }

  85% {
    opacity: 1;
    transform: scale(1) translate(7px, 0) rotate(12deg);
  }

  88% {
    opacity: 0;
    transform: scale(0.01) translate(7px, 0) rotate(12deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.01);
  }
}

@keyframes sparkles {
  0% {
    opacity: 0;
    transform: scale(0.01);
  }

  72% {
    opacity: 0;
    transform: scale(0.01);
  }

  75% {
    opacity: 1;
    transform: scale(1);
  }

  85% {
    opacity: 1;
    transform: scale(1) translate(7px, 0) rotate(12deg);
  }

  88% {
    opacity: 0;
    transform: scale(0.01) translate(7px, 0) rotate(12deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.01);
  }
}

#cool {
  z-index: 160;
  position: absolute;
  left: 4rem;
  -webkit-animation: 4.5s ease-in-out infinite cool-rotation;
          animation: 4.5s ease-in-out infinite cool-rotation;
}

@media (min-width: 1024px) {
  #cool {
    left: 7rem;
  }
}

#cool #cool-bg {
  fill: #469ca9;
  -webkit-animation: 4.5s ease-in-out infinite cool-color;
          animation: 4.5s ease-in-out infinite cool-color;
}

@-webkit-keyframes cool-rotation {
  0% {
    transform: rotate(0deg);
  }

  72% {
    z-index: 160; /* Bypasses chrome redraw issue */
  }

  75% {
    transform: rotate(0deg);
  }

  84.99% {
    transform: rotate(360deg);
  }

  85% {
    transform: rotate(0deg);
  }

  87.99% {
    z-index: 160;
    transform: rotate(0deg);
  }

  88% {
    z-index: 190;
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes cool-rotation {
  0% {
    transform: rotate(0deg);
  }

  72% {
    z-index: 160; /* Bypasses chrome redraw issue */
  }

  75% {
    transform: rotate(0deg);
  }

  84.99% {
    transform: rotate(360deg);
  }

  85% {
    transform: rotate(0deg);
  }

  87.99% {
    z-index: 160;
    transform: rotate(0deg);
  }

  88% {
    z-index: 190;
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes cool-color {
  0% {
    fill: #469ca9;
  }

  75% {
    fill: #469ca9;
  }

  80% {
    fill: #ffcc00;
  }

  85% {
    fill: #469ca9;
  }

  100% {
    fill: #469ca9;
  }
}

@keyframes cool-color {
  0% {
    fill: #469ca9;
  }

  75% {
    fill: #469ca9;
  }

  80% {
    fill: #ffcc00;
  }

  85% {
    fill: #469ca9;
  }

  100% {
    fill: #469ca9;
  }
}

#intro {
  transform: rotate(-3deg);
  transform-origin: top left;
  color: #ffcc00;
  font-size: 1rem;
  text-shadow: -2px 1px #083d45, -1px -1px 0 #083d45, 1px -1px 0 #083d45, -1px 1px 0 #083d45, 1px 1px 0 #083d45;
  margin: auto;
  margin-top: 11rem;
  width: 90%;
  z-index: 200;
}

@media (min-width: 768px) {
  margin-top: 6rem;
}

@media (min-width: 1024px) {
  #intro {
    margin-top: 8rem;
    font-size: 1.5rem;
    width: 70%;
  }
}

#intro-2 {
  display: none;
}

@media (min-width: 1024px) {
  #intro-2 {
    display: block;
    font-family: 'Abril Fatface';
    font-size: 3rem;
    color: #ffcc00;
    transform: rotate(96deg);
    transform-origin: top right;
    position: absolute;
    right: 5rem;
    bottom: -5rem;
    text-shadow: 4px 7px #0e6977, -2px -2px 0 #0e6977, 2px -2px 0 #0e6977, -2px 2px 0 #0e6977, 2px 2px 0 #0e6977;
    margin-top: 8rem;
  }
}

main {
  margin-top: 3rem;
}

/*/////////////////////////////////////////// CARDS /////////////////////////////////////////////////////////// */

.card {
  width: 100%;
  display: block;
  display: flex;
  flex-direction: column;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  height: 20rem;
  transform: rotate(-5deg) skew(-10deg, 0deg);
  opacity: 0.8;
  transition: transform 0.6s, opacity 0.6s;
  box-shadow: -6px 3px #0e6977, -2px -2px 0 #0e6977, 2px -2px 0 #0e6977, -2px 2px 0 #0e6977, 2px 2px 0 #0e6977;
  z-index: 100;
}

.card:hover {
  transform: rotate(0) skew(0deg, 0deg) !important;
  opacity: 1;
  z-index: 200;
}

@media (min-width: 1024px) {
  .card, .picture {
    width: 46%;
  }

  .card:hover {
    transform: rotate(0) skew(0deg, 0deg) scale(1.1, 1.1);
  }
}

.picture {
  height: 20rem;
  position: relative;
  z-index: 100;
}

.picture img {
  max-height: 100%;
  box-shadow: -6px 3px #0e6977, -2px -2px 0 #0e6977, 2px -2px 0 #0e6977, -2px 2px 0 #0e6977, 2px 2px 0 #0e6977;
}

.picture .label {
  font-family: 'Abril Fatface';
  color: #ffcc00;
  font-size: 1.75rem;
  text-shadow: -2px 1px #083d45, -1px -1px 0 #083d45, 1px -1px 0 #083d45, -1px 1px 0 #083d45, 1px 1px 0 #083d45;
  width: 30%;
  position: absolute;
}

#aria img {
  transform: rotate(3deg) translate(1rem, -1rem);
}

#aria .label {
  top: 4rem;
  right: 0.5rem;
  transform: rotate(6deg);
}

#ornstein img {
  transform: rotate(-7deg) translate(1rem, -1rem);
}

#ornstein .label {
  top: 1rem;
  right: 2.5rem;
  transform: rotate(-12deg);
}

#construction {
  background: url('https://youpi.neocities.org/construction.gif') no-repeat center center;
}

.card h2 {
  padding-left: 0.5rem;
  overflow: hidden;
  font-family: 'Abril Fatface';
  font-size: 1.4rem;
  background-color: #fcaebb;
  color: #083d45;
  background-image: linear-gradient(90deg, #00000044 0%, #00000000 100%);
  transition: color 0.4s, background-color 0.4s;
}

.card:hover h2 {
  background-color: #509da1;
  color: #ffcc00;
}

@media (min-width: 1024px) {
  .card h2 {
    font-size: 2.25rem;
  }
}

.card .details {
  font-size: 1.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem 1rem 2rem;
  background-color: #509da1;
  color: #fcaebb;
  --gradient: linear-gradient(90deg, #00000000 0%, #00000044 100%);
  background-image: var(--gradient);
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  text-shadow: -1px -1px 0 #0e6977, 1px -1px 0 #0e6977, -1px 1px 0 #0e6977, 1px 1px 0 #0e6977;
  transition: color 0.4s, background-color 0.4s;
  overflow: hidden;
}

.card .details span {
  transition: transform 0.4s;
}

#genderdruid {
  transform: rotate(-4deg) skew(12deg, 5deg);
}

#genderdruid .details {
  background-image: url('/homepage-2019-06/druid.jpg'), var(--gradient);
}

#identity {
  transform: rotate(-6deg) skew(-3deg, -6deg);
}

#identity .details {
  background-image: url('/homepage-2019-06/door.jpg'), var(--gradient);
}

#imsn {
  transform: rotate(-4deg) skew(4deg, 7deg);
}

#imsn .details {
  background-image: url('/homepage-2019-06/imsn.jpg'), var(--gradient);
}

#mail {
  transform: rotate(8deg) skew(1deg, 5deg);
}

#mail .details {
  background-image: url('/homepage-2019-06/mail.jpg'), var(--gradient);
}

#microblog {
  transform: rotate(-5deg) skew(-10deg, 0deg);
}

#microblog .details {
  background-image: url('/homepage-2019-06/duck.jpg'), var(--gradient);
}

#neocities {
  transform: rotate(-3deg) skew(0deg, -6deg);
}

#neocities .details {
  background-image: url('/homepage-2019-06/neocities.jpg'), var(--gradient);
}

#soundcloud {
  transform: rotate(6deg) skew(-8deg, -4deg);
}

#soundcloud .details {
  background-image: url('/homepage-2019-06/cloud.jpg'), var(--gradient);
}

.card:hover .details {
  background-color: #fcaebb;
  color: #ffcc00;
}

.card:hover .details span {
  transform: scale(1.1, 1.4);
}

/*///////////// POSTS & Next/Prev links on post pages  /// */

#posts #note, #posts #construction {
  color: #ffcc00;
  font-size: 1.5rem;
  margin-top: 3rem;
  text-shadow: -2px 1px #083d45, -1px -1px 0 #083d45, 1px -1px 0 #083d45, -1px 1px 0 #083d45, 1px 1px 0 #083d45;
}

#posts h2, #posts h3 {
  font-family: 'Abril Fatface';
}

#posts h2, #posts a, #post-page footer a {
  margin: auto;
  width: 75%;
  font-size: 2rem;
  background-color: #509da1;
  color: #fcaebb;
  background-image: linear-gradient(90deg, #00000044 0%, #00000000 100%);
  border: 2px solid #fcaebb;
  box-shadow: -6px 3px #0e6977, -2px -2px 0 #0e6977, 2px -2px 0 #0e6977, -2px 2px 0 #0e6977, 2px 2px 0 #0e6977;
  transform: skew(-8deg, -5deg);
  padding: 0.3rem 0.3rem 0.3rem 0.6rem;
}

#posts h2 {
  background-color: #ffcc00;
  color: #0e6977;
  background-image: linear-gradient(90deg, #ffffff00 0%, #ffffff44 100%);
}

@media (min-width: 1024px) {
  #posts h2 {
    font-size: 4rem;
  }
}

#posts a, #post-page footer a {
  display: block;
  font-size: 1.1rem;
  position: relative;
  transition: transform 0.4s, color 0.4s, background-color 0.4s;
  text-shadow: -1px -1px 0 #083d45, 1px -1px 0 #083d45, -1px 1px 0 #083d45, 1px 1px 0 #083d45;
  z-index: 100;
}

#posts a .date, #post-page footer a .date {
  display: inline-block;
  position: absolute;
  font-size: 50%;
}

#posts a .title, #post-page footer a .title {
  margin-top: 0.5rem;
}

#posts a:hover, #post-page footer a:hover {
  background-color: #fcaebb;
  color: #ffcc00;
  transform: skew(0deg, 0deg) scale(1.2, 1.6) !important;
  z-index: 120;
}

@media (min-width: 1024px) {
  #posts a, #post-page footer a {
    font-size: 2.4rem;
  }
}

/*/////////////////////////////////////////// INDIVIDUAL POSTS //////////////////////////////////////////////// */

pre, code, kbd, samp {
  font-family: 'Nova Mono';
}

#post-page header a span {
  font-size: 2rem;
  display: inline-block;
  color: #0e6977;
  margin-right: 0.75rem;
  text-shadow: -2px 1px #083d45, -1px -1px 0 #083d45, 1px -1px 0 #083d45, -1px 1px 0 #083d45, 1px 1px 0 #083d45;
}

@media (min-width: 1024px) {
  #post-page header a span {
    font-size: 4rem;
    margin-right: 1.5rem;
  }
}

#post-page header a svg {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  margin-top: 0.5rem;
  -webkit-filter: drop-shadow( -6px 3px #0e6977 ) drop-shadow( -2px -2px 0 #0e6977 ) drop-shadow( 2px -2px 0 #0e6977) drop-shadow( -2px 2px 0 #0e6977 ) drop-shadow( 2px 2px 0 #0e6977);
          filter: drop-shadow( -6px 3px #0e6977 ) drop-shadow( -2px -2px 0 #0e6977 ) drop-shadow( 2px -2px 0 #0e6977) drop-shadow( -2px 2px 0 #0e6977 ) drop-shadow( 2px 2px 0 #0e6977);
}

@media (min-width: 1024px) {
  #post-page header a svg {
    width: 5rem;
    height: 5rem;
    margin-top: 1rem;
  }
}

#post-page header h1 {
  text-align: center;
  font-family: 'Abril Fatface';
  font-size: 1.6rem;
  color: #fcaebb;
  text-shadow: -6px 3px #0e6977, -1px -1px 0 #0e6977, 1px -1px 0 #0e6977, -1px 1px 0 #0e6977, 1px 1px 0 #0e6977;
}

@media (min-width: 1024px) {
  #post-page header h1 {
    font-size: 3.8rem;
  }
}

#post-page main article {
  font-family: "Nova", sans-serif;
  font-size: 1rem;
  margin-bottom: 1rem;
  background-color: #083d45dd;
  color: #c1f0f2;
  box-shadow: -12px 12px #fcaebb, -4px -4px 0 #ffcc00, 4px -4px 0 #ffcc00, -4px 4px 0 #ffcc00, 4px 4px 0 #ffcc00;
  padding: 2.5rem 1.5rem;
  border: solid 3px #c47683;
  border-radius: .5rem;
  text-shadow: -1px 1px #00000088;
}

@media (min-width: 1024px) {
  #post-page main article {
    font-size: 1.15rem;
  }
}

#post-page main article strong {
  background-color: #c4768366;
  color: #e4f5f6;
}

#post-page main p {
  margin-bottom: 1rem;
}

#post-page main a:link, #post-page main a:visited {
  border-bottom: 2px solid #ffcc00;
  transition: color 0.2s, background-color 0.2s;
}

#post-page main a:focus, #post-page main a:hover, #post-page main a:active {
  background-color: #ffcc00;
  color: #222222;
}

#post-page main article ul, #post-page main article ol {
  margin-bottom: 1rem;
  counter-reset: post-list;
}

#post-page main article ol li {
  counter-increment: post-list;
}

#post-page main article ul li:before, #post-page main article ol li:before {
  margin-left: -1.3rem;
  color: #ffcc00;
  display: inline-block;
  width: 1.3rem;
  text-align: right;
}

#post-page main article ul li:before {
  content: "⧱";
}

#post-page main article ol li:before {
  content: counter(post-list) ".";
}

#post-page main article blockquote {
  font-family: "Nova Oval";
  color: #9ce2e5;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 0.3rem solid #9ce2e5;
}

#post-page main article hr {
  margin-bottom: 4rem;
}

#post-page main article hr:before {
  content: "⁂";
  font-size: 140%;
  color: #c1f0f2;
  display: block;
  text-align: center;
}

#post-page main article h2, #post-page main article h3, #post-page main article h4 {
  /* FIXME: breaks if the title is large. */
  font-family: 'Francois One', 'Verdana', sans-serif;
  font-size: 3rem;
  transform: scale(1, 1.4);
  margin: 7rem 0 2.6rem 0;
}

#post-page main article pre {
  background-color: #00000066;
  margin: 0.5rem 0.5rem 2rem;
  padding: 0.2rem;
  overflow-x: auto;
  font-size: 80%;
}

#post-page main article kbd {
  background-color: #ffffff33;
  border: 0.1rem solid #0e6977;
  padding: 0 0.3rem;
}

#post-page main article code {
  background-color: #00000033;
  border: 0.1rem solid #c1f0f2;
  padding: 0 0.2rem;
}

#post-page main article pre code {
  background-color: #00000000;
  border: none;
}

/*/////////////////////////////////////////// FOOTER /////////////////////////////////////////////////////////// */

#post-page footer {
  padding-bottom: 5rem;
}

#post-page footer a {
  width: 40%;
}

#post-page footer a.previous {
  transform: skew(15deg, 9deg);
}

#post-page footer a.next {
  transform: skew(-15deg, -9deg);
}

#post-page footer a.next .date {
  right: 0;
  padding-right: 0.3rem;
}