@font-face {
  font-family: "playfair_displaybold";
  src: url("../fonts/playfairdisplay-bold-webfont.woff2") format("woff2"), url("../fonts/playfairdisplay-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "poppinsextralight";
  src: url("../fonts/poppins-extralight-webfont.woff2") format("woff2"), url("../fonts/poppins-extralight-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "poppinslight";
  src: url("../fonts/poppins-light-webfont.woff2") format("woff2"), url("../fonts/poppins-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "poppinsmedium";
  src: url("../fonts/poppins-medium-webfont.woff2") format("woff2"), url("../fonts/poppins-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "poppinsregular";
  src: url("../fonts/poppins-regular-webfont.woff2") format("woff2"), url("../fonts/poppins-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "loraregular";
  src: url("../fonts/lora-regular-webfont.woff2") format("woff2"), url("../fonts/lora-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "latolight";
  src: url("../fonts/lato-light-webfont.woff2") format("woff2"), url("../fonts/lato-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "latomedium";
  src: url("../fonts/lato-medium-webfont.woff2") format("woff2"), url("../fonts/lato-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "proza_librelight";
  src: url("../fonts/prozalibre-light-webfont.woff2") format("woff2"), url("../fonts/prozalibre-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "proza_libremedium";
  src: url("../fonts/prozalibre-medium-webfont.woff2") format("woff2"), url("../fonts/prozalibre-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ralewaylight";
  src: url("../fonts/raleway-light-webfont.woff2") format("woff2"), url("../fonts/raleway-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ralewaymedium";
  src: url("../fonts/raleway-medium-webfont.woff2") format("woff2"), url("../fonts/raleway-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "source_sans_prolight";
  src: url("../fonts/sourcesanspro-light-webfont.woff2") format("woff2"), url("../fonts/sourcesanspro-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

:root {
  --nav-bg: #1d1d1d;
  --nav-bg-2: rgba(0, 0, 0, 0.95);
  --main-bg: #000;
  --main-color: #fff;
  --nav-link-color: #d22;
  --nav-link-hover: #fffc;
  --mode-bg: url(../svg/002-sun.svg);
  --links-color: #00b1ff;
  --gray: #777;
  --card-bg: rgba(0, 0, 0, 0.6);
}

:root [data-btn="mode"] {
  background-image: url(../svg/002-sun.svg);
}

:root.light {
  --card-bg: rgba(225, 225, 225, 0.6);
  --nav-bg: #e1e1e1;
  --nav-bg-2: rgba(255, 255, 255, 0.95);
  --main-bg: #fff;
  --main-color: #000;
  --nav-link-hover: #000c;
  --mode-bg: url(../svg/001-moon.svg);
}

:root.light [data-btn="mode"] {
  background-image: url(../svg/001-moon.svg);
}

html {
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

*:focus {
  outline: 0.2rem solid red;
  border: none;
  border-radius: 0;
  color: #fff;
}

* {
  -webkit-transition: background 0.3s linear, color 0.3s linear;
  transition: background 0.3s linear, color 0.3s linear;
}

::-moz-selection {
  background-color: var(--main-color);
  color: var(--main-bg);
}

::selection {
  background-color: var(--main-color);
  color: var(--main-bg);
}

body {
  line-height: 1.5;
  font-size: 1.6rem;
  color: var(--main-color);
  background-color: var(--main-bg);
  font-family: "latolight", "ralewaylight", "loraregular", "proza_librelight",
 "source_sans_prolight", sans-serif;
  font-weight: normal;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "playfair_displaybold", serif;
  font-weight: normal;
  font-style: normal;
}

a,
button,
mark {
  font-family: "poppinsregular";
  font-weight: normal;
  font-style: normal;
}

.updating {
  font-family: "poppinsextralight";
  font-weight: normal;
  font-style: normal;
}

p {
  font-size: 2rem;
}

main {
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

main section {
  margin-bottom: 13rem;
  scroll-snap-align: start;
  scroll-margin: 8.1rem;
}

main section:last-child {
  margin-bottom: 0;
}

main section:first-child {
  padding-top: 8rem;
}

main section > p,
main section header p {
  padding: 0.7rem 1.5rem;
  padding-left: 0;
  font-size: 2rem;
  margin-top: 1.7rem;
  margin-bottom: 1.7rem;
}

h2 {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  padding: 1rem 2rem;
  padding-left: 0;
  font-size: clamp(3rem, 8vw, 4rem);
  position: relative;
  color: var(--links-color);
}

h2::after {
  content: "";
  position: absolute;
  display: block;
  top: 90%;
  left: 2rem;
  left: 0;
  width: 50%;
  height: 0.2rem;
  background-color: red;
}

h3 {
  font-size: 2.5rem;
}

a {
  text-decoration: none;
}

a:link, a:visited {
  color: var(--links-color);
}

a:hover {
  color: var(--nav-link-color);
}

ul {
  list-style: none;
}

svg,
img {
  max-width: 100%;
}

.navbar {
  position: fixed;
  z-index: 100;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  -webkit-transition: background 0.3s linear;
  transition: background 0.3s linear;
}

.navbar figure {
  width: clamp(3.5rem, 7vw, 4rem);
  height: clamp(3.5rem, 7vw, 4rem);
}

.navbar .logo {
  z-index: 200;
}

.navbar .width {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.navbar .menu-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
}

.navbar .menu-list li a {
  border-radius: 0.7rem;
  padding: 0.4rem 0.8rem;
  color: var(--nav-link-color);
  font-size: 2rem;
  margin-left: 1.8rem;
  -webkit-transition: background 0.5s linear, color 0.3s linear;
  transition: background 0.5s linear, color 0.3s linear;
}

.navbar .menu-list li a.active-link {
  background-color: var(--nav-link-hover);
}

.navbar .menu-list li a:hover {
  background-color: var(--nav-link-hover);
}

.navbar .menu-list li a:active {
  color: var(--main-color);
  background-color: transparent;
}

.navbar button {
  width: 2.7rem;
  height: 2.7rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.navbar button[data-btn="mode"] {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 2.7rem;
          flex: 0 0 2.7rem;
  margin-left: 4.5rem;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.navbar button[data-btn="toggle"] {
  display: none;
}

.navbar button.close-btn {
  position: absolute;
  right: 3rem;
  top: 2.5rem;
}

@media (max-width: 800px) {
  .navbar .logo {
    margin-right: auto;
  }
  .navbar button[data-btn="toggle"] {
    display: block;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
  }
  .navbar button.menu-btn {
    z-index: 190;
    margin-left: auto;
  }
  .navbar button.opaq {
    opacity: 0;
  }
  .navbar button.hide {
    display: none;
  }
  .navbar button[data-btn="mode"] {
    z-index: 190;
  }
  .navbar .menu-list {
    position: fixed;
    top: 0;
    left: 0;
    left: -100%;
    height: 100vh;
    width: 100%;
    max-width: 40rem;
    background-color: var(--nav-bg);
    display: block;
    padding: 4rem 0;
    text-align: center;
    -webkit-transition: left 0.4s linear;
    transition: left 0.4s linear;
  }
  .navbar .menu-list.active {
    left: 0;
  }
  .navbar .menu-list li {
    margin-top: 4.5rem;
  }
  .navbar .menu-list li a {
    font-weight: 500;
  }
}

@media (max-width: 432px) {
  .navbar button.close-btn {
    top: 7rem;
    left: 2.6rem;
    width: 3.5rem;
    height: 3.5rem;
  }
  .navbar .menu-list li:first-of-type {
    margin-top: 7rem;
  }
}

.header {
  position: relative;
  min-height: 100vh;
  padding-bottom: 6rem;
}

.heading {
  padding-top: 17rem;
  font-size: 2em;
}

.heading header {
  max-width: 52rem;
}

.heading header > *:not(:last-child) {
  margin-bottom: 1.5rem;
}

.heading__link {
  margin-top: 3rem;
}

.heading__link > a:first-child {
  margin-right: 1.5rem;
  margin-bottom: 3rem;
}

.heading__link > a:last-child {
  background-color: transparent;
  color: var(--main-color);
  border: 0.2rem solid var(--links-color);
  font-weight: bold;
}

.heading__link > a:last-child:hover {
  color: var(--main-color);
  border: 0.2rem solid;
}

@media (min-width: 800px) {
  .heading {
    background-image: url(../svg/001-programming.svg);
    background-repeat: no-repeat;
    background-position: right bottom 40%;
    background-size: 40% 50%;
  }
}

.bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -99;
  overflow: hidden;
  -webkit-transition: opacity 0.6s linear;
  transition: opacity 0.6s linear;
  background-color: var(--main-bg);
}

.bg__video-content {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.contact {
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
  border: 0.2rem inset var(--links-color);
  border-left: transparent;
  border-right: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(57%, var(--nav-bg)), color-stop(45%, transparent));
  background-image: linear-gradient(180deg, var(--nav-bg) 57%, transparent 45%);
}

.contact p {
  font-size: 4.5rem;
  padding: 0;
  margin: 0;
}

.contact__question {
  font-size: 2.2rem;
  font-weight: normal;
  padding-bottom: 6.5rem;
}

.contact__link {
  word-break: break-all;
  margin-top: 3rem;
  margin-top: 5rem;
}

.contact__link li {
  text-align: center;
  margin-bottom: 4rem;
}

.contact__link li:last-child {
  margin-bottom: 2.5rem;
}

.contact__link li a span {
  display: inline-block;
  margin-right: 1.2rem;
}

.contact__link li a figure {
  display: inline-block;
  width: 2rem;
  height: 2rem;
}

@media (max-width: 467px) {
  .contact {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, var(--nav-bg)), color-stop(50%, transparent));
    background-image: linear-gradient(180deg, var(--nav-bg) 60%, transparent 50%);
  }
}

@media (min-width: 821px) {
  .contact {
    background-image: linear-gradient(100deg, var(--nav-bg) calc(100% - 45vw), transparent 20.5%);
  }
  .contact__question {
    padding-bottom: 0;
  }
}

@supports (display: flex) {
  .contact__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: flex;
    -ms-flex-flow: column wrap;
        flex-flow: column wrap;
    align-items: center;
    justify-content: center;
  }
  .contact__link li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0rem;
  }
  .contact__link li a figure {
    width: auto;
    height: auto;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 2rem;
            flex: 0 0 2rem;
  }
  @media (min-width: 821px) {
    .contact .width {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }
    .contact__link {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      max-width: 43rem;
      margin-top: 0;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column wrap;
              flex-flow: column wrap;
      margin-left: auto;
    }
    .contact__link li, .contact__link a, .contact__link span {
      font-size: clamp(1.5rem, 2vw, 1.7rem);
    }
  }
}

.btn {
  display: inline-block;
  padding: 0.9rem 1.9rem;
  border-radius: 0.7rem;
  background-color: var(--main-color);
  font-size: 2rem;
  position: relative;
  border: 0.2rem solid var(--main-color);
}

.btn:focus {
  outline: none;
  text-decoration: underline;
}

.btn:focus, .btn:hover {
  color: var(--main-color);
  background-color: transparent;
}

.btn:focus:after, .btn:hover:after {
  width: 100%;
  height: 100%;
}

.btn:after {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  width: 0%;
  height: 100%;
  height: 0%;
  background-color: var(--links-color);
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  -webkit-transition: width 0.3s linear, height 0.3s linear;
  transition: width 0.3s linear, height 0.3s linear;
  z-index: -1;
  border-radius: 0.7rem;
}

.card {
  min-width: 29rem;
  max-width: 35rem;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 4.5rem;
  min-height: 20rem;
  overflow: hidden;
  padding: 1rem;
  -webkit-box-shadow: 0 0rem 0.5rem 0.1rem var(--links-color);
          box-shadow: 0 0rem 0.5rem 0.1rem var(--links-color);
  -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
}

.card:hover {
  -webkit-box-shadow: 0 0rem 0.2rem 0.1rem var(--links-color);
          box-shadow: 0 0rem 0.2rem 0.1rem var(--links-color);
}

.card__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
}

.card__img-cont {
  display: block;
  width: 100%;
  height: 100%;
}

.card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--nav-bg);
  opacity: 0;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  text-align: center;
}

.card__overlay:hover {
  opacity: 1;
}

.card__overlay:hover > * {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.card__overlay > * {
  -webkit-transform: translateY(3rem);
          transform: translateY(3rem);
  -webkit-transition: -webkit-transform 0.4s ease-out;
  transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;
  transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
  margin-top: 0.6em;
}

.card__link a {
  display: inline-block;
  width: 2rem;
  margin-right: 1rem;
}

.card__focus .card__overlay {
  opacity: 1;
}

.card__focus .card__overlay > * {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

@supports (display: flex) {
  .project__lists {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 2.5rem 3rem;
  }
  .card {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 29rem;
            flex: 1 1 29rem;
  }
  .card__overlay {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1rem;
  }
  .card__overlay > * {
    margin-top: 0;
  }
  .card__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1.5rem;
  }
  .card__link a {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 2rem;
            flex: 0 0 2rem;
  }
}

.project__lists {
  margin-top: 4rem;
  margin-bottom: 3rem;
}

.project__link {
  margin-left: auto;
  margin-right: auto;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.skills {
  margin-top: 3rem;
}

footer {
  background-color: var(--nav-bg);
  text-align: center;
  font-size: 2.2rem;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  padding-top: 2.9rem;
  padding-bottom: 2.5rem;
}

.footer__social-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 3rem;
}

.footer__social-links > * {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 3.4rem;
          flex: 1 1 3.4rem;
  max-width: 4rem;
}

.footer__social-links > *:not(:last-child) {
  margin-right: 2rem;
}

@media (min-width: 801px) {
  footer > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-flow: row-reverse wrap;
            flex-flow: row-reverse wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 3rem;
  }
  .footer__social-links {
    margin-bottom: 0;
    margin-left: auto;
  }
  .footer__social-links > * {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 2.3rem;
            flex: 1 1 2.3rem;
    max-width: 2.5rem;
  }
  .footer__social-links > *:last-child {
    margin-right: 6.5rem;
  }
}

@-webkit-keyframes upAndDown {
  0% {
    -webkit-transform: translateY(-100%) scale(0.7);
            transform: translateY(-100%) scale(0.7);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(50%) scale(1.2);
            transform: translateY(50%) scale(1.2);
    opacity: 0.3;
  }
  100% {
    -webkit-transform: translateY(-100%) scale(0.7);
            transform: translateY(-100%) scale(0.7);
    opacity: 1;
  }
}

@keyframes upAndDown {
  0% {
    -webkit-transform: translateY(-100%) scale(0.7);
            transform: translateY(-100%) scale(0.7);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(50%) scale(1.2);
            transform: translateY(50%) scale(1.2);
    opacity: 0.3;
  }
  100% {
    -webkit-transform: translateY(-100%) scale(0.7);
            transform: translateY(-100%) scale(0.7);
    opacity: 1;
  }
}

[data-type="allProjects"] main {
  margin-top: 3rem;
  margin-bottom: 6rem;
}

[data-type="allProjects"] h1 {
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
}

@supports (display: flex) {
  .all__projects {
    gap: 0rem 3rem;
  }
}

.all__projects {
  margin-top: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.all__projects-arrows {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.all__projects-arrows > figure {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 1rem;
          flex: 1 1 1rem;
  max-width: 3rem;
  margin-right: auto;
  margin-left: auto;
  -webkit-animation-name: upAndDown;
          animation-name: upAndDown;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-direction: normal;
          animation-direction: normal;
}

.all__projects-arrows > figure:nth-child(2) {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}

.all__projects-list {
  margin: 5rem auto;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 26rem;
          flex: 1 0 26rem;
  max-width: 30rem;
  max-width: 35rem;
  background-color: var(--nav-bg);
  -webkit-box-shadow: 0rem 0rem 0.2rem var(--main-color), 0rem 0rem 0.25rem var(--main-color), 0rem 0rem 0.3rem var(--main-color);
          box-shadow: 0rem 0rem 0.2rem var(--main-color), 0rem 0rem 0.25rem var(--main-color), 0rem 0rem 0.3rem var(--main-color);
  padding-bottom: 2.2rem;
  -webkit-transition: all 0.8s linear;
  transition: all 0.8s linear;
}

.all__projects-list > a figure {
  width: 100%;
  height: 25rem;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.all__projects-list[data-all-project-source="personal"] [data-link="github"] {
  color: red !important;
  color: var(--links-color) !important;
  cursor: not-allowed;
}

.all__projects-list:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
  padding-bottom: 2.2rem;
  -webkit-box-shadow: 0rem 0rem 0.1rem var(--links-color), 0rem 0rem 0.15rem var(--links-color), 0rem 0rem 0.2rem var(--links-color);
          box-shadow: 0rem 0rem 0.1rem var(--links-color), 0rem 0rem 0.15rem var(--links-color), 0rem 0rem 0.2rem var(--links-color);
}

.all__projects-list-sub {
  padding-top: 2rem;
  padding-left: 2rem;
}

.all__projects-list-sub h3 {
  font-size: 2.5rem;
  color: var(--links-color);
}

.all__projects-list-sub div {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.all__projects-list-sub div > a {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 3rem;
          flex: 0 1 3rem;
  color: red;
  padding: 0.3rem 0.2rem;
}

.all__projects-list-sub div > a:hover {
  color: var(--links-color);
}

.all__projects-list-sub div > a:first-child {
  margin-right: 2rem;
}

.all__projects-list-sub mark {
  background-color: var(--links-color);
  padding: 0.7rem 1rem;
  border-radius: 0.7rem;
  font-size: 1.7rem;
}

.all__projects-list-sub mark.updating {
  background-color: var(--nav-link-color);
  margin-left: auto;
  margin-right: auto;
  color: var(--main-color);
  font-size: 1.9rem;
  font-style: italic;
}

.header {
  min-height: -webkit-max-content;
  min-height: -moz-max-content;
  min-height: max-content;
  padding-bottom: 8rem;
}

.width {
  width: 100%;
  max-width: 110rem;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5rem;
  padding-left: 2.5rem;
}

.special {
  background-color: var(--links-color);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.special-size {
  font-size: clamp(3rem, 14vw, 6rem);
}

.nav-bg {
  background-color: var(--nav-bg-2);
}

.font-small {
  font-size: 1.5rem;
}

.small-para {
  font-weight: bold;
  text-align: left;
  padding: 0.7rem 1.5rem;
  font-size: 2rem;
  margin-top: 2rem;
}

.margin-small {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.margin-big {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

li[data-project-source="personal"] a:first-child:-webkit-any-link {
  color: red !important;
  cursor: not-allowed;
}

li[data-project-source="personal"] a:first-child:-moz-any-link {
  color: red !important;
  cursor: not-allowed;
}

li[data-project-source="personal"] a:first-child:any-link {
  color: red !important;
  cursor: not-allowed;
}

.flipped {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.resume {
  position: fixed;
  right: 2rem;
  bottom: 1rem;
  z-index: 800;
  z-index: 590;
  width: 6rem;
  height: 6rem;
}

.resume a {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: var(--main-color);
  padding: 0.9rem 1.4rem 0.8rem;
  border-radius: 50%;
  background-image: url(../svg/file-regular.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 2rem;
  background-position: center;
}

.resume a:hover {
  background-color: var(--nav-bg);
}

.arrow {
  background-image: url(../svg/angle-right-solid.svg);
  background-size: 1rem;
  background-position: left center;
  background-repeat: no-repeat;
  margin-bottom: 2rem;
  padding: 0.5rem 2rem;
}