@font-face {
  font-family: "VCR OSD Mono";
  src: url("/static/fonts/vcr_osd_mono.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pixel Sans Serif Condensed";
  src: url("/static/fonts/pixel_condensed.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

:root {
  --f-mono: "VCR OSD Mono", monospace;
  --f-pixel: "Pixel Sans Serif Condensed", monospace;
}

/* global */

* {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

body {
  font-family: var(--f-mono);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#00bee2),
    to(#ca89d3)
  );
  background-image: linear-gradient(#00bee2, #ca89d3);
}

.doge .f-pixel {
  font-family: var(--f-pixel);
}

.doge-only {
  display: initial;
}

.plain-only {
  display: none;
}

.doge .un {
  background-position: 0 100%;
}

/* intro */

.doge .intro {
  position: relative;
}

.roller-coaster {
  position: absolute;
  top: -60px;
  right: -15px;
  width: 155px;
}

.doge .intro p span {
  background-color: white;
  color: black;
  padding: 4px 10px;
}

.doge .section-heading {
  font-family: var(--f-pixel);
  color: white;
  font-size: 12px;
}

.doge .section-heading::before,
.doge .section-heading::after {
  content: "*~$~*";
}

/* portfolio */

.doge figcaption {
  background-color: white;
  color: black;
  padding: 2px 6px;
  display: inline-block;
}

.doge .portfolio__card {
  position: relative;
}

.doge .portfolio__card:before,
.doge .portfolio__card:after {
  content: "";
  height: 8px;
  width: 100%;
  position: absolute;
  bottom: 0;
  border-bottom-width: 8px;
  border-style: solid;
  -o-border-image: url("/static/palette.png") 8 fill;
  border-image: url("/static/palette.png") 8 fill;
  z-index: 1;
}

.doge .portfolio__card:before {
  mix-blend-mode: luminosity;
  z-index: 100;
}

.doge .portfolio__card::after {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.doge .portfolio__card:hover:after {
  visibility: visible;
  opacity: 1;
}

.doge figure p {
  color: black;
}

.doge .portfolio__card .unicorn {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -75px;
  right: -100px;
  width: 150px;
  height: 150px;
  -webkit-transform: rotate(36.98deg);
  transform: rotate(36.98deg);
}

.doge .portfolio__card:hover .unicorn {
  visibility: visible;
  opacity: 1;
}

.doge .portfolio figure a {
  -webkit-transition: 0.1s;
  transition: 0.1s;
}

.doge .portfolio__axelar {
  background-color: #ff6314 !important;
  color: white !important;
}

.doge .portfolio__babylon {
  background: linear-gradient(
    89.55deg,
    #ff7908 0.39%,
    #00ece7 123.18%
  ) !important;
  color: white !important;
}

.doge .portfolio__espresso {
  background: #d0e8f4 !important;
  color: #0f88bc !important;
}

.doge .portfolio__pi2 {
  background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(#8729ff),
      to(#000000)
    ),
    radial-gradient(
      73.5% 294% at 81.5% 75%,
      rgba(147, 30, 255, 0) 0%,
      rgba(147, 30, 255, 0.7) 100%
    ) !important;
  background: linear-gradient(0deg, #8729ff, #000000),
    radial-gradient(
      73.5% 294% at 81.5% 75%,
      rgba(147, 30, 255, 0) 0%,
      rgba(147, 30, 255, 0.7) 100%
    ) !important;
  color: white !important;
}

/* footer */

.doge footer .section-heading::before,
.doge footer .section-heading::after {
  content: "@+@+@";
}

.doge .mail {
  background-color: white;
  color: black;
  padding: 2px 6px;
  font-size: 24px;
  display: inline-block;
}

.doge .mail span {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#007ac6),
    color-stop(12.54%, #7cc400),
    color-stop(27.12%, #ff7400),
    color-stop(48.36%, #2b0bc6)
  );
  background: linear-gradient(
    90deg,
    #007ac6 0%,
    #7cc400 12.54%,
    #ff7400 27.12%,
    #2b0bc6 48.36%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

@supports (color: color(display-p3 0.039 0.467 0.753)) {
  .doge .mail span {
    background-color: linear-gradient(
      90deg,
      color(display-p3 0.039 0.467 0.753) 0%,
      color(display-p3 0.549 0.761 0.188) 12.54%,
      color(display-p3 1 0.494 0.02) 27.12%,
      color(display-p3 0.153 0.051 0.745) 48.36%
    );
  }
}

.doge .socials,
.doge .socials a {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: 12px;
  font-weight: 900;
}

/* unicorns */

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.doge .unicorns {
  position: absolute;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  top: 10px;
  right: 5px;
  width: 420px;
  height: 420px;
  z-index: -1;
  -webkit-animation: rotate 10s linear infinite;
  animation: rotate 10s linear infinite;
}

.doge .unicorns img {
  position: absolute;
  width: 128px;
  height: 128px;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: center;
  transform-origin: center;
}

.unicorns img:nth-child(1) {
  -webkit-transform: translate(-50%, -50%) rotate(0deg) translate(140px);
  transform: translate(-50%, -50%) rotate(0deg) translate(140px);
}

.unicorns img:nth-child(2) {
  -webkit-transform: translate(-50%, -50%) rotate(-40deg) translate(140px);
  transform: translate(-50%, -50%) rotate(-40deg) translate(140px);
}

.unicorns img:nth-child(3) {
  -webkit-transform: translate(-50%, -50%) rotate(-80deg) translate(140px);
  transform: translate(-50%, -50%) rotate(-80deg) translate(140px);
}

.unicorns img:nth-child(4) {
  -webkit-transform: translate(-50%, -50%) rotate(-120deg) translate(140px);
  transform: translate(-50%, -50%) rotate(-120deg) translate(140px);
}

.unicorns img:nth-child(5) {
  -webkit-transform: translate(-50%, -50%) rotate(-160deg) translate(140px);
  transform: translate(-50%, -50%) rotate(-160deg) translate(140px);
}

.unicorns img:nth-child(6) {
  -webkit-transform: translate(-50%, -50%) rotate(-200deg) translate(140px);
  transform: translate(-50%, -50%) rotate(-200deg) translate(140px);
}

.unicorns img:nth-child(7) {
  -webkit-transform: translate(-50%, -50%) rotate(-240deg) translate(140px);
  transform: translate(-50%, -50%) rotate(-240deg) translate(140px);
}

.unicorns img:nth-child(8) {
  -webkit-transform: translate(-50%, -50%) rotate(-280deg) translate(140px);
  transform: translate(-50%, -50%) rotate(-280deg) translate(140px);
}

.unicorns img:nth-child(9) {
  -webkit-transform: translate(-50%, -50%) rotate(-320deg) translate(140px);
  transform: translate(-50%, -50%) rotate(-320deg) translate(140px);
}