@font-face {
  font-family: 'FiraCodeNF';
  src: url('/static/FiraCodeNerdFontPropo-Regular.ttf');
  font-weight: normal;
}
@font-face {
  font-family: 'FiraCodeNF';
  src: url('/static/FiraCodeNerdFontPropo-Bold.ttf');
  font-weight: bold;
}
.mocha {
  --text: #cdd6f4;
  --subtext0: #a6adc8;
  --accent: #eba0ac;
  --accent-background: rgba(235, 160, 172, 0.1);
  --accent-hover: #e78b9a;
  --yellow: #f9e2af;
  --green: #a6e3a1;
  --green-background: rgba(166, 227, 161, 0.1);
  --surface0: #313244;
  --surface0-background: rgba(49, 50, 68, 0.1);
  --surface1: #45475a;
  --surface1-background: rgba(69, 71, 90, 0.1);
  --surface2: #585b70;
  --surface2-background: rgba(88, 91, 112, 0.1);
  --red: #f38ba8;
  --base: #1e1e2e;
  --mantle: #181825;
  --crust: #11111b;
}
.macchiato {
  --text: #cad3f5;
  --subtext0: #a5adcb;
  --accent: #ee99a0;
  --accent-background: rgba(238, 153, 160, 0.1);
  --accent-hover: #ea838c;
  --yellow: #eed49f;
  --green: #a6da95;
  --green-background: rgba(166, 218, 149, 0.1);
  --surface0: #363a4f;
  --surface0-background: rgba(54, 58, 79, 0.1);
  --surface1: #494d64;
  --surface1-background: rgba(73, 77, 100, 0.1);
  --surface2: #5b6078;
  --surface2-background: rgba(91, 96, 120, 0.1);
  --red: #ed8796;
  --base: #24273a;
  --mantle: #1e2030;
  --crust: #181926;
}
.frappe {
  --text: #c6d0f5;
  --subtext0: #a5adce;
  --accent: #ea999c;
  --accent-background: rgba(234, 153, 156, 0.1);
  --accent-hover: #e68487;
  --yellow: #e5c890;
  --green: #a6d189;
  --green-background: rgba(166, 209, 137, 0.1);
  --surface0: #414559;
  --surface0-background: rgba(65, 69, 89, 0.1);
  --surface1: #51576d;
  --surface1-background: rgba(81, 87, 109, 0.1);
  --surface2: #626880;
  --surface2-background: rgba(98, 104, 128, 0.1);
  --red: #e78284;
  --base: #303446;
  --mantle: #292c3c;
  --crust: #232634;
}
.latte {
  --text: #4c4f69;
  --subtext0: #6c6f85;
  --accent: #e64553;
  --accent-background: rgba(230, 69, 83, 0.1);
  --accent-hover: #e32f3e;
  --yellow: #df8e1d;
  --green: #40a02b;
  --green-background: rgba(64, 160, 43, 0.1);
  --surface0: #ccd0da;
  --surface0-background: rgba(204, 208, 218, 0.1);
  --surface1: #bcc0cc;
  --surface1-background: rgba(188, 192, 204, 0.1);
  --surface2: #acb0be;
  --surface2-background: rgba(172, 176, 190, 0.1);
  --red: #d20f39;
  --base: #eff1f5;
  --mantle: #e6e9ef;
  --crust: #dce0e8;
}
* {
  padding: 0;
  margin: 0;
  font-family: 'FiraCodeNF', sans-serif;
  user-select: none;
}
body {
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  color: var(--text);
  background: var(--base);
}
.icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 22px;
  color: var(--accent);
  padding: 6px;
  background: var(--mantle);
  margin: 3px;
  text-decoration: none !important;
  border-radius: 10px;
  border: 1px solid var(--surface0);
}
.icon-link svg {
  width: 100%;
  height: 100%;
}
.icon-link.clickable {
  cursor: pointer;
  transition: 0.2s;
}
.icon-link.clickable:hover {
  border: 1px solid var(--accent);
}
.icon-link.clickable:active {
  scale: 0.95;
}
select {
  color: var(--text);
  padding: 8px;
  background: var(--mantle);
  margin: 3px;
  border-radius: 10px;
  border: 1px solid var(--surface0);
}
select.theme {
  width: 50%;
  box-sizing: border-box;
}
.theme-switcher select {
  margin: 6px 0 0 0;
  width: 100%;
}
main {
  padding: 24px;
  border-radius: 10px;
  width: 65%;
}
main .socials {
  display: flex;
}
main .socials .icon-link {
  margin: 0 6px 0 0;
}
main .profile {
  display: flex;
  align-items: center;
}
main .profile img.avatar {
  border: 1px solid var(--surface0);
  border-radius: 50%;
  margin-right: 16px;
  width: 100px;
  height: 100px;
}
main section .section-title {
  display: flex;
  font-weight: bold;
  font-size: 1em;
  color: var(--accent);
  align-items: center;
  margin-top: 16px;
  min-width: 350px;
}
main section .section-title .icon {
  position: relative;
  width: 16px;
  height: 16px;
  text-align: center;
  margin-right: 0px;
}
main section .section-title hr {
  border: none;
  border-top: 1px solid var(--surface0);
  height: 1px;
  flex: 1;
  margin-left: 6px;
}
main section .languages {
  display: flex;
  flex-direction: column;
}
main section .languages .language {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 42px;
}
main section .languages .language .learning {
  color: var(--green);
  background-color: var(--green-background);
  font-size: 0.75em;
  padding: 2px 10px;
  border-radius: 10px;
  margin-left: 8px;
  border: 1px solid var(--green);
}
main section .languages .language .time {
  margin: 0 6px;
  opacity: 0;
  color: var(--subtext0);
}
main section .languages .language:hover .time {
  opacity: 0.5;
}
main section .languages .language p {
  display: flex;
  align-items: center;
}
main section .languages .language p .icon {
  color: var(--accent);
  position: relative;
  top: -1px;
  font-size: 1.25em;
  width: 18px;
  margin-right: 4px;
}
main section .languages .language .icon-link {
  width: 18px;
  height: 18px;
}
main section .projects {
  display: grid;
  margin-top: 6px;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 6px;
  grid-row-gap: 0;
}
main section .projects .project {
  padding: 16px 20px;
  border: 1px solid var(--surface0);
  background-color: var(--mantle);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  font-size: 0.95em;
  justify-content: space-between;
  transition: 0.2s;
  animation: 0.5s repo-in;
}
main section .projects .project .title {
  display: flex;
  align-items: center;
  color: var(--accent);
}
main section .projects .project .title .icon {
  position: relative;
  top: -2px;
  width: 1em;
  height: 1em;
  color: var(--text);
  margin-right: 4px;
}
main section .projects .project .title .name {
  font-weight: bold;
}
main section .projects .project .title .separator {
  margin: 0 4px;
}
main section .projects .project .description {
  margin: 6px 0;
  color: var(--subtext0);
}
main section .projects .project .icon-link {
  border: none;
  background: none;
  padding: 0;
  width: 18px;
  height: 18px;
  margin-right: 8px;
}
main section .projects .project .badges {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
main section .projects .project .badges img {
  height: 18px;
}
main section .projects .project hr {
  border: none;
  border-right: 1px solid var(--surface0);
  margin-right: 6px;
}
main section .projects .project .full-name:hover {
  text-decoration: underline;
  color: var(--accent-hover);
  cursor: pointer;
}
@media only screen and (max-width: 900px) {
  main {
    width: 100%;
    padding: 12px 24px;
  }
  .projects {
    display: flex !important;
    flex-direction: column !important;
  }
  .projects .project {
    margin-bottom: 0 !important;
  }
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
footer {
  color: var(--subtext0);
  padding: 12px 0;
  text-align: center;
}
footer select {
  max-width: 250px;
}
@keyframes repo-in {
  0% {
    translate: 0 -10%;
    opacity: 0;
  }
  100% {
    translate: 0 0;
    opacity: 1;
  }
}
@keyframes loading {
  0% {
    background-color: var(--surface0-background);
  }
  50% {
    background-color: var(--surface2-background);
  }
  100% {
    background-color: var(--surface0-background);
  }
}
.sponsors {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6px;
}
.sponsors .sponsor {
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  margin: 3px;
  transition: 0.2s;
  cursor: pointer;
  background-color: var(--accent-background);
}
.sponsors .sponsor:hover {
  border-color: var(--accent-hover);
}
.sponsors .sponsor.loading {
  border-color: var(--surface0);
  animation: loading 1.5s infinite;
}
.sponsors .sponsor.add {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--surface0);
  border: 1px dashed var(--surface0);
  background-color: transparent;
}
.sponsors .sponsor.add:hover {
  border-color: var(--surface1);
  color: var(--red);
  font-size: 1.15em;
}
.comment {
  font-style: italic;
  color: var(--subtext0);
}