/* Styles copied from https://perfectmotherfuckingwebsite.com with some slight modifications to allow full usage of markdown */

body {
  max-width: 750px;
  margin: 40px auto;
  padding: 0 10px;
  font-size: 18px;
  line-height: 1.5;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  color: #444;
}

h1,
h2,
h3 {
    line-height: 1.2;
}

pre {
    background-color: #2e2e2e;
    border-radius: 6px;
    padding: 20px;
}

code {
    background-color: #2e2e2e;
    border-radius: 6px;
    padding: 2px 4px;
}

blockquote {
    border-left: 4px solid #2e2e2e;
    margin-left: 10px;
    padding: 0 20px;
    color: #6a737d;
}

img {
    max-width: 100%;
    border-radius: 6px;
    transition:
        border-radius 0.3s ease,
        transform 0.3s ease;

    &:hover {
        transform: scale(1.05);
        border-radius: 0;
    }
}

.about-me {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 1em;
}

.profile-pic {
    width: 160px;
    aspect-ratio: 1;
}

.banner {
    width: 88px;
    height: 31px;
    border-radius: 0; /* overrides img border radius */
    image-rendering: pixelated;
}

.banner-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
}

.subtext {
    color: #999999;
    font-size: 0.7em;
}

a {
    text-decoration: none;
}

a img.banner {
    display: inline-block;
    vertical-align: middle;
    border: none;
}

@media (prefers-color-scheme: dark) {
    body {
        color: #c9d1d9;
        background: #0d1117;
    }
    a:link {
        color: #58a6ff;
    }
    a:visited {
        color: #8e96f0;
    }
}

@media screen and (max-width: 550px) {
  .about-me {
  flex-direction: column;
  }
}

.glow-text {
  color: #fff;
  text-shadow:
    0 0 4px #fff,
    0 0 8px #f0f,
    0 0 12px #f0f;
  animation: pulse-glow 2.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0% {
    text-shadow:
      0 0 4px #fff,
      0 0 8px #f0f,
      0 0 12px #f0f;
  }
  50% {
    text-shadow:
      0 0 6px #fff,
      0 0 12px #ff66ff,
      0 0 18px #ff66ff;
  }
  100% {
    text-shadow:
      0 0 4px #fff,
      0 0 8px #f0f,
      0 0 12px #f0f;
  }
}