html {
  font-family: Helvetica, Arial, sans-serif;
  scroll-behavior: smooth; }

body {
  margin: 1em;
  margin-bottom: 5em; }
  @media (prefers-color-scheme: dark) {
    body {
      background: #1F2121;
      color: #eee; } }

h1 {
  margin: 0;
  margin-bottom: 0.65em; }

p {
  line-height: 1.5; }

a {
  color: inherit;
  text-decoration: none; }

#hero {
  margin: 20vh 0 16vh;
  display: grid;
  justify-content: center;
  gap: 1em;
  text-align: center; }
  #hero img {
    width: 10em; }
  #hero span.title {
    font-size: 2em;
    font-weight: 600; }

nav {
  background: #fff;
  z-index: 69;
  top: 0;
  left: 0;
  width: 100%;
  position: fixed;
  padding: 1em 0;
  transition: box-shadow 400ms, background 400ms; }
  @media (prefers-color-scheme: dark) {
    nav {
      background: #1F2121;
      color: #eee; } }
  nav.hasShadow {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; }
    @media (prefers-color-scheme: dark) {
      nav.hasShadow {
        box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
        background: #282a2a; } }
  @media (min-width: 760px) {
    nav {
      display: flex;
      justify-content: center; }
      nav .mobile {
        display: none !important; }
      nav > div {
        display: grid;
        grid-template-columns: 10em 1fr 10em;
        align-items: center;
        width: calc(100% - 4em);
        max-width: 1000px; }
        nav > div > div {
          display: flex;
          justify-content: center; }
          nav > div > div img {
            height: 3rem;
            cursor: pointer; }
          nav > div > div a {
            padding: 1rem;
            display: block; }
          nav > div > div a:hover {
            color: darkorange; }
          nav > div > div:first-child {
            justify-content: left; }
          nav > div > div:last-child {
            justify-content: right; }
            nav > div > div:last-child a {
              padding: 1em 0.5em; } }
  @media (max-width: 760px) {
    nav .desktop {
      display: none; }
    nav > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1em;
      padding-right: 2em;
      max-width: 1000px; }
      nav > div > div img {
        height: 3rem; }
      nav > div > div.burger {
        cursor: pointer; }
      nav > div #mobileNavigation {
        position: fixed;
        top: 4em;
        right: 1em;
        z-index: 80;
        background: #fff;
        display: grid; } }
    @media (max-width: 760px) and (prefers-color-scheme: dark) {
      nav > div #mobileNavigation {
        background: #1F2121;
        color: #eee; } }
  @media (max-width: 760px) {
        nav > div #mobileNavigation a {
          margin: 1em 0.5em;
          display: flex;
          align-items: center;
          justify-content: right; }
          nav > div #mobileNavigation a span {
            margin-top: 4px;
            margin-left: 0.5em; }
        nav > div #mobileNavigation .divider {
          width: calc(100% + 2em);
          border-bottom: 1px solid #ddd;
          margin: 0.5em -1em; } }
      @media (max-width: 760px) and (prefers-color-scheme: dark) {
        nav > div #mobileNavigation .divider {
          border-color: rgba(255, 255, 255, 0.1); } }

section {
  padding: 1em;
  border-radius: 0.5em;
  scroll-margin-top: 7em;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; }
  @media (prefers-color-scheme: dark) {
    section {
      box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
      background: #282a2a; } }

.page {
  width: 960px;
  max-width: calc(100vw - 20em);
  margin: auto;
  display: grid;
  gap: 2.5em; }
  @media (max-width: 960px) {
    .page {
      max-width: calc(100vw - 10em); } }
  @media (max-width: 720px) {
    .page {
      max-width: calc(100vw - 5em); } }
  @media (max-width: 400px) {
    .page {
      max-width: calc(100vw - 3em); } }

.aboutAndSkillsBox {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2.5em; }
  @media (max-width: 1200px) {
    .aboutAndSkillsBox {
      grid-template-columns: 1fr; } }

.progress-bar {
  width: 100%;
  height: 2em;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  background: #eee; }
  @media (prefers-color-scheme: dark) {
    .progress-bar {
      background: #1F2121; } }
  .progress-bar [class^="progress-"] {
    height: 100%;
    background-color: darkorange; }
    .progress-bar [class^="progress-"]::after {
      position: absolute;
      top: 1px;
      width: 3em;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000; }
  .progress-bar .progress-1 {
    width: 1%; }
    .progress-bar .progress-1::after {
      left: calc(0.5% - 1.5em);
      content: "1%"; }
  .progress-bar .progress-2 {
    width: 2%; }
    .progress-bar .progress-2::after {
      left: calc(1% - 1.5em);
      content: "2%"; }
  .progress-bar .progress-3 {
    width: 3%; }
    .progress-bar .progress-3::after {
      left: calc(1.5% - 1.5em);
      content: "3%"; }
  .progress-bar .progress-4 {
    width: 4%; }
    .progress-bar .progress-4::after {
      left: calc(2% - 1.5em);
      content: "4%"; }
  .progress-bar .progress-5 {
    width: 5%; }
    .progress-bar .progress-5::after {
      left: calc(2.5% - 1.5em);
      content: "5%"; }
  .progress-bar .progress-6 {
    width: 6%; }
    .progress-bar .progress-6::after {
      left: calc(3% - 1.5em);
      content: "6%"; }
  .progress-bar .progress-7 {
    width: 7%; }
    .progress-bar .progress-7::after {
      left: calc(3.5% - 1.5em);
      content: "7%"; }
  .progress-bar .progress-8 {
    width: 8%; }
    .progress-bar .progress-8::after {
      left: calc(4% - 1.5em);
      content: "8%"; }
  .progress-bar .progress-9 {
    width: 9%; }
    .progress-bar .progress-9::after {
      left: calc(4.5% - 1.5em);
      content: "9%"; }
  .progress-bar .progress-10 {
    width: 10%; }
    .progress-bar .progress-10::after {
      left: calc(5% - 1.5em);
      content: "10%"; }
  .progress-bar .progress-11 {
    width: 11%; }
    .progress-bar .progress-11::after {
      left: calc(5.5% - 1.5em);
      content: "11%"; }
  .progress-bar .progress-12 {
    width: 12%; }
    .progress-bar .progress-12::after {
      left: calc(6% - 1.5em);
      content: "12%"; }
  .progress-bar .progress-13 {
    width: 13%; }
    .progress-bar .progress-13::after {
      left: calc(6.5% - 1.5em);
      content: "13%"; }
  .progress-bar .progress-14 {
    width: 14%; }
    .progress-bar .progress-14::after {
      left: calc(7% - 1.5em);
      content: "14%"; }
  .progress-bar .progress-15 {
    width: 15%; }
    .progress-bar .progress-15::after {
      left: calc(7.5% - 1.5em);
      content: "15%"; }
  .progress-bar .progress-16 {
    width: 16%; }
    .progress-bar .progress-16::after {
      left: calc(8% - 1.5em);
      content: "16%"; }
  .progress-bar .progress-17 {
    width: 17%; }
    .progress-bar .progress-17::after {
      left: calc(8.5% - 1.5em);
      content: "17%"; }
  .progress-bar .progress-18 {
    width: 18%; }
    .progress-bar .progress-18::after {
      left: calc(9% - 1.5em);
      content: "18%"; }
  .progress-bar .progress-19 {
    width: 19%; }
    .progress-bar .progress-19::after {
      left: calc(9.5% - 1.5em);
      content: "19%"; }
  .progress-bar .progress-20 {
    width: 20%; }
    .progress-bar .progress-20::after {
      left: calc(10% - 1.5em);
      content: "20%"; }
  .progress-bar .progress-21 {
    width: 21%; }
    .progress-bar .progress-21::after {
      left: calc(10.5% - 1.5em);
      content: "21%"; }
  .progress-bar .progress-22 {
    width: 22%; }
    .progress-bar .progress-22::after {
      left: calc(11% - 1.5em);
      content: "22%"; }
  .progress-bar .progress-23 {
    width: 23%; }
    .progress-bar .progress-23::after {
      left: calc(11.5% - 1.5em);
      content: "23%"; }
  .progress-bar .progress-24 {
    width: 24%; }
    .progress-bar .progress-24::after {
      left: calc(12% - 1.5em);
      content: "24%"; }
  .progress-bar .progress-25 {
    width: 25%; }
    .progress-bar .progress-25::after {
      left: calc(12.5% - 1.5em);
      content: "25%"; }
  .progress-bar .progress-26 {
    width: 26%; }
    .progress-bar .progress-26::after {
      left: calc(13% - 1.5em);
      content: "26%"; }
  .progress-bar .progress-27 {
    width: 27%; }
    .progress-bar .progress-27::after {
      left: calc(13.5% - 1.5em);
      content: "27%"; }
  .progress-bar .progress-28 {
    width: 28%; }
    .progress-bar .progress-28::after {
      left: calc(14% - 1.5em);
      content: "28%"; }
  .progress-bar .progress-29 {
    width: 29%; }
    .progress-bar .progress-29::after {
      left: calc(14.5% - 1.5em);
      content: "29%"; }
  .progress-bar .progress-30 {
    width: 30%; }
    .progress-bar .progress-30::after {
      left: calc(15% - 1.5em);
      content: "30%"; }
  .progress-bar .progress-31 {
    width: 31%; }
    .progress-bar .progress-31::after {
      left: calc(15.5% - 1.5em);
      content: "31%"; }
  .progress-bar .progress-32 {
    width: 32%; }
    .progress-bar .progress-32::after {
      left: calc(16% - 1.5em);
      content: "32%"; }
  .progress-bar .progress-33 {
    width: 33%; }
    .progress-bar .progress-33::after {
      left: calc(16.5% - 1.5em);
      content: "33%"; }
  .progress-bar .progress-34 {
    width: 34%; }
    .progress-bar .progress-34::after {
      left: calc(17% - 1.5em);
      content: "34%"; }
  .progress-bar .progress-35 {
    width: 35%; }
    .progress-bar .progress-35::after {
      left: calc(17.5% - 1.5em);
      content: "35%"; }
  .progress-bar .progress-36 {
    width: 36%; }
    .progress-bar .progress-36::after {
      left: calc(18% - 1.5em);
      content: "36%"; }
  .progress-bar .progress-37 {
    width: 37%; }
    .progress-bar .progress-37::after {
      left: calc(18.5% - 1.5em);
      content: "37%"; }
  .progress-bar .progress-38 {
    width: 38%; }
    .progress-bar .progress-38::after {
      left: calc(19% - 1.5em);
      content: "38%"; }
  .progress-bar .progress-39 {
    width: 39%; }
    .progress-bar .progress-39::after {
      left: calc(19.5% - 1.5em);
      content: "39%"; }
  .progress-bar .progress-40 {
    width: 40%; }
    .progress-bar .progress-40::after {
      left: calc(20% - 1.5em);
      content: "40%"; }
  .progress-bar .progress-41 {
    width: 41%; }
    .progress-bar .progress-41::after {
      left: calc(20.5% - 1.5em);
      content: "41%"; }
  .progress-bar .progress-42 {
    width: 42%; }
    .progress-bar .progress-42::after {
      left: calc(21% - 1.5em);
      content: "42%"; }
  .progress-bar .progress-43 {
    width: 43%; }
    .progress-bar .progress-43::after {
      left: calc(21.5% - 1.5em);
      content: "43%"; }
  .progress-bar .progress-44 {
    width: 44%; }
    .progress-bar .progress-44::after {
      left: calc(22% - 1.5em);
      content: "44%"; }
  .progress-bar .progress-45 {
    width: 45%; }
    .progress-bar .progress-45::after {
      left: calc(22.5% - 1.5em);
      content: "45%"; }
  .progress-bar .progress-46 {
    width: 46%; }
    .progress-bar .progress-46::after {
      left: calc(23% - 1.5em);
      content: "46%"; }
  .progress-bar .progress-47 {
    width: 47%; }
    .progress-bar .progress-47::after {
      left: calc(23.5% - 1.5em);
      content: "47%"; }
  .progress-bar .progress-48 {
    width: 48%; }
    .progress-bar .progress-48::after {
      left: calc(24% - 1.5em);
      content: "48%"; }
  .progress-bar .progress-49 {
    width: 49%; }
    .progress-bar .progress-49::after {
      left: calc(24.5% - 1.5em);
      content: "49%"; }
  .progress-bar .progress-50 {
    width: 50%; }
    .progress-bar .progress-50::after {
      left: calc(25% - 1.5em);
      content: "50%"; }
  .progress-bar .progress-51 {
    width: 51%; }
    .progress-bar .progress-51::after {
      left: calc(25.5% - 1.5em);
      content: "51%"; }
  .progress-bar .progress-52 {
    width: 52%; }
    .progress-bar .progress-52::after {
      left: calc(26% - 1.5em);
      content: "52%"; }
  .progress-bar .progress-53 {
    width: 53%; }
    .progress-bar .progress-53::after {
      left: calc(26.5% - 1.5em);
      content: "53%"; }
  .progress-bar .progress-54 {
    width: 54%; }
    .progress-bar .progress-54::after {
      left: calc(27% - 1.5em);
      content: "54%"; }
  .progress-bar .progress-55 {
    width: 55%; }
    .progress-bar .progress-55::after {
      left: calc(27.5% - 1.5em);
      content: "55%"; }
  .progress-bar .progress-56 {
    width: 56%; }
    .progress-bar .progress-56::after {
      left: calc(28% - 1.5em);
      content: "56%"; }
  .progress-bar .progress-57 {
    width: 57%; }
    .progress-bar .progress-57::after {
      left: calc(28.5% - 1.5em);
      content: "57%"; }
  .progress-bar .progress-58 {
    width: 58%; }
    .progress-bar .progress-58::after {
      left: calc(29% - 1.5em);
      content: "58%"; }
  .progress-bar .progress-59 {
    width: 59%; }
    .progress-bar .progress-59::after {
      left: calc(29.5% - 1.5em);
      content: "59%"; }
  .progress-bar .progress-60 {
    width: 60%; }
    .progress-bar .progress-60::after {
      left: calc(30% - 1.5em);
      content: "60%"; }
  .progress-bar .progress-61 {
    width: 61%; }
    .progress-bar .progress-61::after {
      left: calc(30.5% - 1.5em);
      content: "61%"; }
  .progress-bar .progress-62 {
    width: 62%; }
    .progress-bar .progress-62::after {
      left: calc(31% - 1.5em);
      content: "62%"; }
  .progress-bar .progress-63 {
    width: 63%; }
    .progress-bar .progress-63::after {
      left: calc(31.5% - 1.5em);
      content: "63%"; }
  .progress-bar .progress-64 {
    width: 64%; }
    .progress-bar .progress-64::after {
      left: calc(32% - 1.5em);
      content: "64%"; }
  .progress-bar .progress-65 {
    width: 65%; }
    .progress-bar .progress-65::after {
      left: calc(32.5% - 1.5em);
      content: "65%"; }
  .progress-bar .progress-66 {
    width: 66%; }
    .progress-bar .progress-66::after {
      left: calc(33% - 1.5em);
      content: "66%"; }
  .progress-bar .progress-67 {
    width: 67%; }
    .progress-bar .progress-67::after {
      left: calc(33.5% - 1.5em);
      content: "67%"; }
  .progress-bar .progress-68 {
    width: 68%; }
    .progress-bar .progress-68::after {
      left: calc(34% - 1.5em);
      content: "68%"; }
  .progress-bar .progress-69 {
    width: 69%; }
    .progress-bar .progress-69::after {
      left: calc(34.5% - 1.5em);
      content: "69%"; }
  .progress-bar .progress-70 {
    width: 70%; }
    .progress-bar .progress-70::after {
      left: calc(35% - 1.5em);
      content: "70%"; }
  .progress-bar .progress-71 {
    width: 71%; }
    .progress-bar .progress-71::after {
      left: calc(35.5% - 1.5em);
      content: "71%"; }
  .progress-bar .progress-72 {
    width: 72%; }
    .progress-bar .progress-72::after {
      left: calc(36% - 1.5em);
      content: "72%"; }
  .progress-bar .progress-73 {
    width: 73%; }
    .progress-bar .progress-73::after {
      left: calc(36.5% - 1.5em);
      content: "73%"; }
  .progress-bar .progress-74 {
    width: 74%; }
    .progress-bar .progress-74::after {
      left: calc(37% - 1.5em);
      content: "74%"; }
  .progress-bar .progress-75 {
    width: 75%; }
    .progress-bar .progress-75::after {
      left: calc(37.5% - 1.5em);
      content: "75%"; }
  .progress-bar .progress-76 {
    width: 76%; }
    .progress-bar .progress-76::after {
      left: calc(38% - 1.5em);
      content: "76%"; }
  .progress-bar .progress-77 {
    width: 77%; }
    .progress-bar .progress-77::after {
      left: calc(38.5% - 1.5em);
      content: "77%"; }
  .progress-bar .progress-78 {
    width: 78%; }
    .progress-bar .progress-78::after {
      left: calc(39% - 1.5em);
      content: "78%"; }
  .progress-bar .progress-79 {
    width: 79%; }
    .progress-bar .progress-79::after {
      left: calc(39.5% - 1.5em);
      content: "79%"; }
  .progress-bar .progress-80 {
    width: 80%; }
    .progress-bar .progress-80::after {
      left: calc(40% - 1.5em);
      content: "80%"; }
  .progress-bar .progress-81 {
    width: 81%; }
    .progress-bar .progress-81::after {
      left: calc(40.5% - 1.5em);
      content: "81%"; }
  .progress-bar .progress-82 {
    width: 82%; }
    .progress-bar .progress-82::after {
      left: calc(41% - 1.5em);
      content: "82%"; }
  .progress-bar .progress-83 {
    width: 83%; }
    .progress-bar .progress-83::after {
      left: calc(41.5% - 1.5em);
      content: "83%"; }
  .progress-bar .progress-84 {
    width: 84%; }
    .progress-bar .progress-84::after {
      left: calc(42% - 1.5em);
      content: "84%"; }
  .progress-bar .progress-85 {
    width: 85%; }
    .progress-bar .progress-85::after {
      left: calc(42.5% - 1.5em);
      content: "85%"; }
  .progress-bar .progress-86 {
    width: 86%; }
    .progress-bar .progress-86::after {
      left: calc(43% - 1.5em);
      content: "86%"; }
  .progress-bar .progress-87 {
    width: 87%; }
    .progress-bar .progress-87::after {
      left: calc(43.5% - 1.5em);
      content: "87%"; }
  .progress-bar .progress-88 {
    width: 88%; }
    .progress-bar .progress-88::after {
      left: calc(44% - 1.5em);
      content: "88%"; }
  .progress-bar .progress-89 {
    width: 89%; }
    .progress-bar .progress-89::after {
      left: calc(44.5% - 1.5em);
      content: "89%"; }
  .progress-bar .progress-90 {
    width: 90%; }
    .progress-bar .progress-90::after {
      left: calc(45% - 1.5em);
      content: "90%"; }
  .progress-bar .progress-91 {
    width: 91%; }
    .progress-bar .progress-91::after {
      left: calc(45.5% - 1.5em);
      content: "91%"; }
  .progress-bar .progress-92 {
    width: 92%; }
    .progress-bar .progress-92::after {
      left: calc(46% - 1.5em);
      content: "92%"; }
  .progress-bar .progress-93 {
    width: 93%; }
    .progress-bar .progress-93::after {
      left: calc(46.5% - 1.5em);
      content: "93%"; }
  .progress-bar .progress-94 {
    width: 94%; }
    .progress-bar .progress-94::after {
      left: calc(47% - 1.5em);
      content: "94%"; }
  .progress-bar .progress-95 {
    width: 95%; }
    .progress-bar .progress-95::after {
      left: calc(47.5% - 1.5em);
      content: "95%"; }
  .progress-bar .progress-96 {
    width: 96%; }
    .progress-bar .progress-96::after {
      left: calc(48% - 1.5em);
      content: "96%"; }
  .progress-bar .progress-97 {
    width: 97%; }
    .progress-bar .progress-97::after {
      left: calc(48.5% - 1.5em);
      content: "97%"; }
  .progress-bar .progress-98 {
    width: 98%; }
    .progress-bar .progress-98::after {
      left: calc(49% - 1.5em);
      content: "98%"; }
  .progress-bar .progress-99 {
    width: 99%; }
    .progress-bar .progress-99::after {
      left: calc(49.5% - 1.5em);
      content: "99%"; }
  .progress-bar .progress-100 {
    width: 100%; }
    .progress-bar .progress-100::after {
      left: calc(50% - 1.5em);
      content: "100%"; }

.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em; }
  .projects a {
    color: unset;
    text-decoration: none; }
  @media (max-width: 800px) {
    .projects {
      grid-template-columns: 1fr; } }
  .projects .project {
    border: 1px solid #ddd;
    background: #eee;
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    padding: 0.5em; }
    @media (prefers-color-scheme: dark) {
      .projects .project {
        border-color: #404040;
        background: #1F2121; } }
    .projects .project img {
      margin: -0.5em;
      margin-right: 0.5em;
      width: 67.5px;
      height: 67.5px; }
    .projects .project .title {
      font-weight: 600; }

.stylesSection {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65em;
  align-items: center; }

.single-content .title {
  display: flex;
  justify-content: space-between; }
  @media (max-width: 640px) {
    .single-content .title {
      display: block; }
      .single-content .title > div {
        display: flex;
        justify-content: space-between; }
      .single-content .title > div > div {
        justify-content: left !important; } }
  .single-content .title > div > div {
    display: flex;
    align-items: center;
    justify-content: right;
    margin-bottom: 0.35em; }
    .single-content .title > div > div svg {
      margin-left: 0.35em; }