@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 35deg;
  inherits: false;
}
@keyframes gradient-rotation {
  0% { --gradient-angle: 35deg; }
  100% { --gradient-angle: 394deg; }
}

body {
  padding-left: 0.2em;
  padding-right: 0.2em;
}

img {
  max-width: 100%;
}

.highlight-box h1 {
  font-family: "Permanent Marker", sans-serif, emoji, "Twemoji Mozilla", "Segoe UI Emoji", "Apple Color Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #707568;
}
@media (prefers-color-scheme: light) {
  .highlight-box h1 {
    color: revert;
  }
}

.slanted {
  transform: rotate(-2deg);
  display: inline-block;
}

#badge {
  vertical-align: middle;
  border-radius: 14px;
  box-shadow: 0 0 0.3em #070909;
}
@media (prefers-color-scheme: light) {
  #badge {
    filter: hue-rotate(160deg) saturate(3) brightness(1.2);
    padding: 3px;
    background: linear-gradient(var(--gradient-angle), #4d6a4c, #51644d, #575a47, #8f8a80, #8b7f6c);
    box-shadow: none;
    animation: gradient-rotation 3s linear infinite;
    transition: box-shadow 0.1s cubic-bezier(0.37, 0, 0.63, 1), scale 0.1s cubic-bezier(0.37, 0, 0.63, 1);
  }
  #badge:hover {
    box-shadow: 0 0 0.1em #070909;
    scale: 1.125;
  }
}

body {
  font-family: sans-serif, emoji, "Twemoji Mozilla", "Segoe UI Emoji", "Apple Color Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  color: #818383;
  background-color: #161614;
  background-image: radial-gradient(50% 60px at 40px 0, #152020, transparent), radial-gradient(70% 35% at 100% 64%, #261b14, #161614);
  background-attachment: fixed;
}
@media (prefers-color-scheme: light) {
  body {
    color: #312c52;
    background-color: #DEE8F3;
    background-image: unset;
  }
}
p {
  line-height: 1.3em;
}
.flag {
  font-family: sans-serif, emoji, "Twemoji Mozilla", "Apple Color Emoji", "Noto Color Emoji"; 
}

.button {
  position: relative;
  color: #a1a3a1;
  font-size: large;
  font-weight: 300;
  background: linear-gradient(#564b68, #2c3650 5%, #191f29 25%, #191f29 75%, #15253e 90%, #2c3650);
  border-radius: 0.5em;
  padding: 0.2em 0.4em;
  margin: 0.1em 0.2em;
  text-decoration: none;
  white-space: nowrap;
  line-height: 200%;
}
.button:hover {
  background: linear-gradient(#7b5baf, #314068 5%, #212936 20%, #151b26 80%, #12233e 93%, #364876);
}
.button:active {
  background: linear-gradient(#232228, #0a0912 3%, #0e1014 7%, #040d20 40%, #1c1b20 93%, #2f2e3a 97%, #11081a);
}
@media (prefers-color-scheme: light) {
  .button {
    z-index: 1;
    color: #312c52;
    text-shadow: #ddf 0 0 0.2em;
  }
  .button {
    background: linear-gradient(#ddf 40%, #baf 60%);
  }
  .button:hover {
    background: linear-gradient(#ddf 35%, #cde 50%, #baf 65%);
  }
  .button:active {
    background: linear-gradient(#ccf 45%, #ddf 55%);
  }
  .button:before {
    z-index: -1;
    content: "";
    position: absolute;
    background: linear-gradient(var(--gradient-angle), #79688b, #8a53a6, #706c8b, #5da3e4);
    inset: -2px;
    border-radius: 0.6em;
  }
  .button.promo:before {
    animation: gradient-rotation 12s linear infinite;
  }
  .button:hover:before {
    background: linear-gradient(var(--gradient-angle), #a55dcf, #8a53a6, #706c8b, #5da3e4, #5db3f5);
    animation: gradient-rotation 1.75s linear infinite;
  }
}

.highlight-box {
  display: inline-block;
  padding: 0.25em 1.5em 0.75em 1.5em;
  margin: 1em;
  background: linear-gradient(#292330, #0a0c16 1%, #051224 6%, #101520 10%, #080e10 60%, #090e14 70%, #0f1418 100%);
  border-radius: 3em;
  box-shadow: inset 0 0 0.5em #050808;
}
@media (prefers-color-scheme: light) {
  .highlight-box {
    background: linear-gradient(#ddf, #98f, #99d);
    box-shadow: inset 0 0 0.2em #98f;
  }
}

ul {
  list-style-type: none;
  margin-top: -0.5em;
  padding-inline-start: 0em;
}

li {
  margin-bottom: 0.4em;
}
li:last-child {
  margin-bottom: 0;
}

a {
  color: #a5b192;
  text-decoration: none;
}
@media (prefers-color-scheme: light) {
  a {
    color: rgba(20 60 200);
  }
}
a:hover {
  color: #babfad;
}
@media (prefers-color-scheme: light) {
  a:hover {
    color: rgba(40 120 255);
  }
}
a:active {
  color: #a1a3a1;
}
@media (prefers-color-scheme: light) {
  a:active {
    color: rgba(35 100 200);
  }
}

hr {
  border: solid 0.05em;
  border-color: rgba(255 255 255 / 0.2);
  border-bottom: none;
  padding: 0.1em;
}
@media (prefers-color-scheme: light) {
  hr {
    border-color: rgba(0 0 0 / 0.2);
  }
}

:not(hr.footer-hr) {
  border-left: none;
  border-right: none;
}

.footer {
  margin: 0 0.2em;
  font-size: small;
}
.footer .timestamp {
  text-align: right;
}
.footer ul {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.footer li {
  display: inline-block;
}

.two-item-grid {
  display: grid;
  grid-template-columns: minmax(auto, 12em) auto;
  align-items: end;
}

.github-emblem {
  color: #ffffff;
  background: #24292f;
}
.github-emblem:hover:after {
  content: " GitHub";
}
.gitlab-emblem {
  color: #ea5128;
  background: #292961;
}
.gitlab-emblem:hover:after {
  content: " GitLab";
}