@font-face {
  font-family: "DepartureMono";
  src: url("../fonts/DepartureMono-Regular.woff2");
}

@font-face {
  font-family: "Raleway";
  src: url("../fonts/Raleway-SemiBold.woff2");
}

body {
  font-family: "DepartureMono", sans-serif;

  margin-left: 50px;
  margin-right: 50px;
}

body.pixel {
  font-family: "DepartureMono", sans-serif;
}

body.basic {
  font-family: "Raleway", sans-serif;
}
li {
  margin-bottom: 0.5rem;
}

.nes-avatar.is-large {
  width: 100px;
  height: 100px;
}
.tools {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.title-info {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.info {
  display: flex;
  flex-direction: column;
}
.about {
  margin-top: 10px;
}
.jobs {
  margin-top: 10px;
}
.stack {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 15px;
}
.job-card {
  display: flex;
  gap: 1rem;
  margin-top: 20px !important;
}
.job-card-part {
  display: flex;
  flex-direction: column;
}
.job-card-part:first-child {
  flex: 1;
}

.job-card-part:last-child {
  flex: 2;
}
.job-title {
  font-size: 24px;
}
.subjob-title {
  font-size: 18px;
  margin-bottom: 5px;
}
.subjob-date {
  font-size: 16px;
}
.links {
  display: flex;
  gap: 10px;
  align-items: center;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 80px;
}
.meta {
  display: flex;
  gap: 15px;
}
.language {
  margin-right: 10px;
}

.is-php { --bg: #7a86b8; }
.is-go, .is-go-full { --bg: #79d4fd; --text: #00403a; }
.is-mysql { --bg: #00758f; }
.is-postgresql { --bg: #336791; }
.is-redis { --bg: #dc382c; }
.is-rabbitmq { --bg: #ff6601; }
.is-js { --bg: #f8df18; --text: #000; }
.is-vue { --bg: #42b883; }
.is-compositon-api { --bg: #35495e; }
.is-tailwind { --bg: #37bdf8; --text: #0f162a; }
.is-docker { --bg: #2bb3db; }
.is-debian { --bg: #a80930; }
.is-fedora { --bg: #2b477a; }
.is-swagger { --bg: #85ea2d; --text: #173547; }
.is-ci-cd { --bg: #9fa722; }
.is-vite { --bg: #b43ffe; --text: #fff900; }
.is-websocket { --bg: #6326e4; }
.is-sse { --bg: #41576d; }
.is-grpc { --bg: #244c5a; }
.is-rego { --bg: #566366; }
.is-grafana { --bg: #f16c26; }
.is-rust { --bg: #f54a00; }
.is-python { --bg: #316c9c; --text: #ffe05c; }
.is-react-native { --bg: #62dafb; --text: #282c33; }
.is-keycloak { --bg: #4d4d4d; }
.is-bee { --bg: #ffe6a4; --text: #282c33; }

.stack .nes-badge > span.is-primary {
  background-color: var(--bg, #212529) !important;
  color: var(--text, white) !important;
  --shadow-color: var(--bg, #212529);
}

.stack .nes-badge:not(.is-splited) > span.is-primary {
  box-shadow: 0 0.5em var(--shadow-color), 0 -0.5em var(--shadow-color), 0.5em 0 var(--shadow-color), -0.5em 0 var(--shadow-color) !important;
}

.stack .nes-badge.is-splited > span.is-primary:first-child {
  box-shadow: 0 0.5em var(--shadow-color), 0 -0.5em var(--shadow-color), 0 0 var(--shadow-color), -0.5em 0 var(--shadow-color) !important;
}

.stack .nes-badge.is-splited > span.is-primary:last-child {
  box-shadow: 0 0.5em var(--shadow-color), 0 -0.5em var(--shadow-color), 0.5em 0 var(--shadow-color), 0 0 var(--shadow-color) !important;
}

.pixel-corners {
  clip-path: polygon(
    0px calc(100% - 6px),
    6px calc(100% - 6px),
    6px 100%,
    calc(100% - 6px) 100%,
    calc(100% - 6px) calc(100% - 6px),
    100% calc(100% - 6px),
    100% 6px,
    calc(100% - 6px) 6px,
    calc(100% - 6px) 0px,
    6px 0px,
    6px 6px,
    0px 6px
  );
}

@media (max-width: 767px) {
  body {
    margin-left: 10px;
    margin-right: 10px;
  }

  .job-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 20px !important;
  }

  .title-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .photo {
    margin-top: 0px !important;
  }

  .info {
    text-align: center;
  }

  .info-badges {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .photo {
    margin-top: 20px;
  }

  .nes-avatar.is-large {
    width: 80px;
    height: 80px;
  }

  .about {
    margin-top: 20px;
  }

  .stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 25px;
  }

  .footer {
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 10px;
  }

  .links {
    margin-bottom: 20px;
  }

  .meta-weight {
    text-align: center;
  }
}