@keyframes nav-animation-open {
  0% {
    opacity: 0;
    transform: translateX(100%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes nav-animation-close {
  0% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0;
    transform: translateX(100%); } }

@keyframes borderAnimationBefore {
  0% {
    opacity: 0;
    width: 0;
    height: 0;
    border-top-color: #ffa200;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent; }
  50% {
    width: 100%;
    height: 0;
    border-top-color: #ffa200;
    border-right-color: #ffa200;
    border-bottom-color: transparent;
    border-left-color: transparent; }
  100% {
    opacity: 1;
    width: 100%;
    height: 100%;
    border-top-color: #ffa200;
    border-right-color: #ffa200;
    border-bottom-color: transparent;
    border-left-color: transparent; } }

@keyframes borderAnimationAfter {
  0% {
    opacity: 0;
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #ffa200; }
  50% {
    width: 0;
    height: 100%;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #ffa200;
    border-left-color: #ffa200; }
  100% {
    opacity: 1;
    width: 100%;
    height: 100%;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #ffa200;
    border-left-color: #ffa200; } }

@keyframes fadeInAnimation {
  0% {
    opacity: 0; }
  50% {
    opacity: 0.5; }
  100% {
    opacity: 1; } }

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(3rem); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-2rem); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes enterFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-30rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes enterFromRight {
  0% {
    opacity: 0;
    transform: translateX(30rem); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

.fade-up-animation {
  animation: fadeUp 2s backwards; }

.fade-down-animation {
  animation: fadeDown 2s backwards; }

.fade-in-animation {
  animation: fadeInAnimaiton 2s ease-in; }

.enter-from-right-animation {
  animation: enterFromRight 1.5s backwards linear; }

.enter-from-left-animation {
  animation: enterFromLeft 1.5s 1s backwards linear; }

.enter-from-left-animation-fast {
  animation: enterFromLeft 1.5s backwards linear; }

.title-left-animation {
  animation: enterFromLeft 1.5s backwards linear; }
  @media (min-width: 70.625em) {
    .title-left-animation {
      animation: fadeUp 2s backwards; } }

.title-right-animation {
  animation: enterFromRight 1.5s backwards linear; }
  @media (min-width: 70.625em) {
    .title-right-animation {
      animation: fadeUp 2s backwards; } }

.proj-img-left-animation {
  animation: none; }
  @media (min-width: 56.25em) {
    .proj-img-left-animation {
      animation: enterFromLeft 1.5s backwards linear; } }

.proj-img-right-animation {
  animation: none; }
  @media (min-width: 56.25em) {
    .proj-img-right-animation {
      animation: enterFromRight 1.5s backwards linear; } }

.proj-info-right-animation {
  animation: fadeUp 2s backwards; }
  @media (min-width: 56.25em) {
    .proj-info-right-animation {
      animation: enterFromRight 1.5s backwards linear; } }

.proj-info-left-animation {
  animation: fadeUp 2s backwards; }
  @media (min-width: 56.25em) {
    .proj-info-left-animation {
      animation: enterFromLeft 1.5s backwards linear; } }

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

html {
  font-size: 62.5%;
  scroll-behavior: smooth; }
  @media (min-width: 76em) {
    html {
      font-size: 68.75%; } }

body {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #151515;
  scroll-behavior: smooth; }

main {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 2px;
  scroll-behavior: smooth; }

section.hero {
  transform-style: preserve-3d;
  position: relative;
  height: 100vh;
  display: flex; }

.blur {
  filter: blur(0.5rem);
  transition: filter 0.5s linear; }

body {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6; }

.navbar {
  font-family: 'Roboto Mono', sans-serif;
  font-weight: 400;
  font-size: 2rem; }
  @media (min-width: 56.25em) {
    .navbar {
      font-size: 1.4rem;
      line-height: 1.4; } }

.heading-primary {
  font-size: 6.2rem;
  line-height: 1;
  color: #FFDA99; }
  @media (min-width: 76em) {
    .heading-primary {
      font-size: 7.4rem; } }

.heading-secondary {
  font-size: 3.6rem;
  line-height: 1;
  color: #FFF0D5; }

.heading-tertiary {
  font-size: 3rem;
  line-height: 1.2;
  color: #FFF0D5; }

.heading-quaternary {
  font-size: 1.8rem;
  line-height: 1;
  color: #FFF0D5; }

.paragraph-robo {
  font-family: "Roboto Mono", sans-serif;
  color: #ffa200; }

.paragraph-default {
  color: #FFF0D5; }

.list {
  list-style: none; }

.item {
  text-decoration: none;
  color: #FFF0D5; }

.margin-sides {
  margin: 0 2.4rem; }
  @media (min-width: 28.125em) {
    .margin-sides {
      margin: 0 3.2rem; } }
  @media (min-width: 37.5em) {
    .margin-sides {
      margin: 0 6.4rem; } }

.margin-bottom {
  margin-bottom: 9.6rem; }
  @media (min-width: 37.5em) {
    .margin-bottom {
      margin-bottom: 12.8rem; } }
  @media (min-width: 70.625em) {
    .margin-bottom {
      margin-bottom: 15rem; } }
  @media (min-width: 135em) {
    .margin-bottom {
      margin-bottom: 20rem; } }

.inline-list {
  display: flex;
  justify-content: center; }
  .inline-list-item {
    color: #FFDA99; }
  .inline-list-item:not(:last-child) {
    margin-right: 1.2rem; }
  @media (min-width: 56.25em) {
    .inline-list-end {
      justify-content: flex-end; } }
  @media (min-width: 56.25em) {
    .inline-list-start {
      justify-content: flex-start; } }

.btn:link,
.btn:visited {
  text-decoration: none;
  color: #FFF0D5; }

.btn:hover,
.btn:active {
  text-decoration: none;
  color: #ffa200;
  background-color: rgba(255, 240, 213, 0.1); }

.btn-sm {
  border-radius: 1rem;
  border: 3px solid #ffa200;
  padding: 0.5rem 2rem; }

.btn-lg {
  border-radius: 1rem;
  border: 3px solid #ffa200;
  padding: 0.8rem 2.4rem;
  font-size: 2rem; }

.card {
  background-color: #FFDA99;
  border-radius: 1rem;
  width: 100%;
  height: 20rem;
  overflow: hidden;
  transition: all 0.2s ease-in;
  cursor: pointer; }
  @media (min-width: 37.5em) {
    .card {
      height: 25rem; } }
  @media (min-width: 48em) {
    .card {
      width: 45%;
      height: 20rem; } }
  @media (min-width: 70.625em) {
    .card {
      width: 30%; } }
  @media (min-width: 76em) {
    .card {
      width: 29%; } }
  .card:hover {
    transform: translateY(-1rem); }
  .card-img {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-out; }

.proj-card {
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
  transition: all 0.2s ease-in; }
  .proj-card:hover {
    transform: translateY(-1rem); }
  @media (min-width: 56.25em) {
    .proj-card {
      width: 60%;
      border-radius: 1rem; } }
  @media (min-width: 108.5em) {
    .proj-card {
      width: 55%; } }
  .proj-card:hover {
    cursor: pointer; }
  @media (min-width: 56.25em) {
    .proj-card-right {
      position: absolute;
      right: 0;
      z-index: 0; } }
  @media (min-width: 90.625em) {
    .proj-card-right {
      position: relative; } }
  .proj-card-right:hover {
    cursor: pointer; }
  .proj-card-img {
    border-radius: 1rem;
    background-size: cover;
    background-position: center;
    width: 100%; }

.proj-desc-card {
  display: none; }
  @media (min-width: 56.25em) {
    .proj-desc-card {
      display: block;
      background-color: #292929;
      border-radius: 1rem;
      color: #FFF0D5;
      padding: 1rem 2rem;
      text-align: justify;
      margin: 1rem 0;
      box-shadow: rgba(41, 41, 41, 0.3) 0rem 0.8rem 2.4rem; } }
  @media (min-width: 64em) {
    .proj-desc-card {
      padding: 1.5rem 2.5rem; } }

.skills__box-icon.feather {
  width: 6rem;
  height: 6rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none; }

.footer-icon.feather {
  width: 3rem;
  height: 3rem;
  stroke: #FFF0D5;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none; }

.footer__links-item:hover .footer-icon.feather {
  stroke: #ffa200; }

.name-image {
  height: 100%;
  width: 100%;
  position: absolute; }
  .name-image::after {
    content: '';
    background: url("../images/russ-multiple.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 30%;
    height: 100%;
    width: 100%;
    opacity: 1;
    z-index: 4; }
    @media (min-width: 56.25em) {
      .name-image::after {
        opacity: 0.8; } }
    @media (min-width: 64em) {
      .name-image::after {
        left: 55%; } }
    @media (min-width: 70.625em) {
      .name-image::after {
        width: 150%;
        height: 120%;
        left: 78%;
        top: 40%; } }
    @media (min-width: 76em) {
      .name-image::after {
        left: 82%; } }
    @media (min-width: 83.75em) {
      .name-image::after {
        left: 90%; } }
    @media (min-width: 98.625em) {
      .name-image::after {
        left: 97%; } }
    @media (min-width: 108.5em) {
      .name-image::after {
        left: 100%; } }
    @media (min-width: 118.125em) {
      .name-image::after {
        left: 103%; } }
    @media (min-width: 143.75em) {
      .name-image::after {
        left: 100%; } }

.parallax::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(1.5);
  background-size: 100%;
  z-index: -1; }

.section-titleBox {
  font-family: "Roboto Mono", sans-serif;
  line-height: 1;
  margin-bottom: 3.2rem; }

.section-title {
  display: flex;
  column-gap: 1.5rem; }
  @media (min-width: 37.5em) {
    .section-title {
      margin-bottom: 4.8rem; } }
  .section-title-num {
    font-weight: 400;
    color: #ffa200; }
  .section-title-name {
    font-weight: 700; }

.title-left {
  margin-left: 1.6rem; }
  @media (min-width: 37.5em) {
    .title-left {
      margin-left: 4.8rem; } }
  @media (min-width: 56.25em) {
    .title-left {
      margin-left: 12.8rem; } }
  @media (min-width: 70.625em) {
    .title-left {
      margin-left: 0;
      justify-content: center; } }
  .title-left::after {
    content: "";
    width: 80rem;
    height: 0.2rem;
    background: #ffa200;
    justify-self: flex-end;
    align-self: center;
    margin-left: 1.2rem; }
    @media (min-width: 70.625em) {
      .title-left::after {
        display: none; } }

.title-right {
  margin-right: 1.6rem;
  justify-content: flex-end; }
  @media (min-width: 37.5em) {
    .title-right {
      margin-right: 4.8rem; } }
  @media (min-width: 56.25em) {
    .title-right {
      margin-right: 12.8rem; } }
  @media (min-width: 70.625em) {
    .title-right {
      margin-right: 0;
      justify-content: center; } }
  .title-right::before {
    content: "";
    width: 80rem;
    height: 0.2rem;
    background: #ffa200;
    justify-self: flex-start;
    align-self: center;
    margin-right: 1.2rem; }
    @media (min-width: 70.625em) {
      .title-right::before {
        display: none; } }

.title-center {
  justify-content: center; }
  .title-center::before {
    content: "";
    width: 50rem;
    height: 0.2rem;
    background: #ffa200;
    justify-self: flex-start;
    align-self: center;
    margin-right: 1.2rem; }
    @media (min-width: 70.625em) {
      .title-center::before {
        display: none; } }
  .title-center::after {
    content: "";
    width: 50rem;
    height: 0.2rem;
    background: #ffa200;
    justify-self: flex-end;
    align-self: center;
    margin-left: 1.2rem; }
    @media (min-width: 70.625em) {
      .title-center::after {
        display: none; } }

.skills__logos {
  padding: 0 8rem; }
  @media (min-width: 143.75em) {
    .skills__logos {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 80vh; } }

.skills__logo {
  position: absolute;
  width: 7rem;
  height: 7rem;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.3;
  z-index: -1;
  transition: all 0.3s ease-in; }
  .skills__logo:hover {
    opacity: 1;
    transform: rotate(360deg); }

.logo-ai {
  top: 5%;
  left: 7%;
  transform: rotate(45deg);
  background-image: url(../images/skill-logos/ai.png); }
  @media (min-width: 56.25em) {
    .logo-ai {
      top: 10%;
      left: 7%; } }

.logo-blender {
  top: 30%;
  right: 10%;
  background-image: url(../images/skill-logos/blender.png); }
  @media (min-width: 56.25em) {
    .logo-blender {
      top: 15%;
      left: 30%; } }

.logo-bs {
  top: 20%;
  left: 5%;
  transform: rotate(95deg);
  background-image: url(../images/skill-logos/bs.png); }
  @media (min-width: 56.25em) {
    .logo-bs {
      top: 60%;
      left: 30%; } }

.logo-css {
  top: 50%;
  transform: rotate(70deg);
  background-image: url(../images/skill-logos/css.png); }
  @media (min-width: 56.25em) {
    .logo-css {
      top: 90%;
      left: 30%; } }

.logo-figma {
  top: 40%;
  right: 5%;
  transform: rotate(70deg);
  background-image: url(../images/skill-logos/figma.png); }
  @media (min-width: 56.25em) {
    .logo-figma {
      top: 30%;
      right: 10%; } }

.logo-gh {
  top: 65%;
  right: 0;
  transform: rotate(180deg);
  background-image: url(../images/skill-logos/gh.png); }
  @media (min-width: 56.25em) {
    .logo-gh {
      top: 10%;
      right: 30%; } }

.logo-html {
  top: 82%;
  left: 8%;
  transform: rotate(40deg);
  background-image: url(../images/skill-logos/html.png); }
  @media (min-width: 56.25em) {
    .logo-html {
      top: 96%;
      left: 60%; } }

.logo-js {
  top: 90%;
  right: 2%;
  transform: rotate(-70deg);
  background-image: url(../images/skill-logos/js.png); }

.logo-node {
  top: 95%;
  left: 8%;
  transform: rotate(-120deg);
  background-image: url(../images/skill-logos/node.png); }

.logo-ps {
  top: 8%;
  right: 2%;
  transform: rotate(60deg);
  background-image: url(../images/skill-logos/ps.png); }

.logo-sass {
  top: 58%;
  left: 8%;
  transform: rotate(45deg);
  background-image: url(../images/skill-logos/sass.png); }
  @media (min-width: 56.25em) {
    .logo-sass {
      top: 65%;
      left: 60%; } }

.logo-vs {
  top: 33%;
  left: 8%;
  transform: rotate(55deg);
  background-image: url(../images/skill-logos/vs.png); }
  @media (min-width: 56.25em) {
    .logo-vs {
      left: 2%; } }

.logo-vue {
  top: 55%;
  right: 2%;
  transform: rotate(55deg);
  background-image: url(../images/skill-logos/vue.png); }

.logo-xd {
  top: 68%;
  left: 2%;
  background-image: url(../images/skill-logos/xd.png); }

.wrapper {
  z-index: 5; }
  @media (min-width: 76em) {
    .wrapper {
      position: absolute;
      padding: 0 2.4rem; } }
  @media (min-width: 83.75em) {
    .wrapper {
      padding: 0 4.8rem; } }
  @media (min-width: 90.625em) {
    .wrapper {
      padding: 0 6.4rem; } }
  @media (min-width: 98.625em) {
    .wrapper {
      padding: 0 8rem; } }
  @media (min-width: 118.125em) {
    .wrapper {
      padding: 0 12.8rem; } }

.footer {
  width: 100%;
  height: auto;
  text-align: center;
  margin-top: 15rem; }
  .footer__links-list {
    display: flex;
    justify-content: center;
    margin: 5rem 0 10rem 0;
    list-style: none; }
  .footer__links-item {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: 3px solid #FFF0D5;
    padding: 0.7rem; }
    .footer__links-item:hover {
      background-color: #FFF0D5; }
  .footer__links-item:not(:last-child) {
    margin-right: 1.2rem; }
  .footer__copyright {
    padding: 2rem 0; }

.navbar {
  width: 100%;
  position: absolute;
  z-index: 2; }
  .navbar__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem; }
    @media (min-width: 37.5em) {
      .navbar__content {
        padding: 2.4rem 3.2rem; } }
    @media (min-width: 143.75em) {
      .navbar__content {
        padding: 2.4rem 4.8rem; } }
  .navbar__logo {
    height: 100%; }
    @media (min-width: 56.25em) {
      .navbar__logo {
        display: flex; } }
    .navbar__logo-img {
      height: 3.2rem;
      width: 3.2rem; }
  .navbar__nav {
    display: flex;
    align-items: center;
    background-color: #151515;
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: -3rem 0 5rem 1rem rgba(21, 21, 21, 0.5); }
    @media (min-width: 56.25em) {
      .navbar__nav {
        background-color: transparent;
        position: relative;
        text-align: left;
        align-items: center;
        flex-direction: row;
        height: auto;
        width: auto;
        box-shadow: none; } }
  @media (min-width: 56.25em) {
    .navbar__list {
      display: flex;
      justify-content: center;
      align-items: center; } }
  .navbar__item {
    list-style: none;
    margin-bottom: 2.4rem;
    animation: fadeDown 0.8s 0s linear backwards; }
    @media (min-width: 56.25em) {
      .navbar__item {
        margin-bottom: 0;
        margin-right: 1.6rem; } }
    @media (min-width: 76em) {
      .navbar__item {
        margin-right: 2.4rem; } }
    .navbar__item-link {
      text-decoration: none;
      color: #FFF0D5; }
      .navbar__item-link:hover {
        color: #ffa200; }
    .navbar__item-number {
      color: #ffa200;
      display: block;
      line-height: 1;
      font-size: 1.8rem; }
      @media (min-width: 56.25em) {
        .navbar__item-number {
          font-size: 1.4rem;
          display: inline-block; } }
  .navbar__resume-btn {
    margin-top: 3.2rem;
    animation: fadeDown 0.8s 0s linear backwards; }
    @media (min-width: 56.25em) {
      .navbar__resume-btn {
        margin-top: 0; } }
  .navbar__mobile-btn {
    background-color: transparent;
    border: none;
    outline: none; }
    @media (min-width: 56.25em) {
      .navbar__mobile-btn {
        display: none;
        visibility: none; } }
  .navbar__mobile-icon {
    color: #ffa200;
    height: 4rem;
    width: 4rem; }
    .navbar__mobile-icon[name="close-outline"] {
      display: none; }

.navBg {
  background-color: #292929;
  box-shadow: 0 0.5rem 1.5rem rgba(21, 21, 21, 0.5);
  transition: all 0.5s ease-in; }

.nav-open .navbar__nav {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  animation: nav-animation-open 0.5s linear; }

.nav-close .navbar__nav {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  animation: nav-animation-close 0.5s linear;
  transition: all 0.5s linear; }
  @media (min-width: 56.25em) {
    .nav-close .navbar__nav {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      animation: none;
      transition: none; } }

.nav-open .navbar__mobile-icon[name="close-outline"] {
  display: block; }

.nav-open .navbar__mobile-icon[name="menu-outline"] {
  display: none; }

.hero {
  position: relative; }
  .hero::after {
    content: "";
    background-image: linear-gradient(rgba(41, 41, 41, 0.5), #151515), url("../images/sand.png");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 150%; }
    @media (min-width: 118.125em) {
      .hero::after {
        height: 180%; } }
  .hero__box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 70%;
    width: 90%;
    z-index: -1; }
    @media (min-width: 48em) {
      .hero__box {
        height: 60%; } }
    @media (min-width: 56.25em) {
      .hero__box {
        width: 80%; } }
    @media (min-width: 64em) {
      .hero__box {
        width: 75%; } }
    @media (min-width: 70.625em) {
      .hero__box {
        width: 70%;
        height: 55%; } }
    @media (min-width: 76em) {
      .hero__box {
        width: 65%; } }
    @media (min-width: 83.75em) {
      .hero__box {
        width: 60%; } }
    @media (min-width: 90.625em) {
      .hero__box {
        width: 55%; } }
    @media (min-width: 98.625em) {
      .hero__box {
        width: 50%; } }
    @media (min-width: 108.5em) {
      .hero__box {
        width: 48%; } }
    @media (min-width: 118.125em) {
      .hero__box {
        width: 45%;
        height: 40%; } }
    @media (min-width: 125.625em) {
      .hero__box {
        width: 42%; } }
    @media (min-width: 135em) {
      .hero__box {
        width: 40%;
        height: 50%; } }
  .hero__box-animated {
    visibility: hidden;
    position: relative;
    height: 100%;
    z-index: -1; }
    @media (min-width: 37.5em) {
      .hero__box-animated {
        visibility: visible; } }
    .hero__box-animated::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 1rem;
      border: 3px solid transparent;
      background-color: transparent; }
    .hero__box-animated::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 1rem;
      border: 3px solid transparent;
      background-color: transparent; }
  .hero__box-animated.in::after {
    animation: borderAnimationBefore 1.5s 1.6s forwards linear; }
  .hero__box-animated.in::before {
    animation: borderAnimationAfter 1.5s 1.6s forwards linear; }
  .hero__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 2.4rem 1.2rem;
    visibility: visible;
    display: flex;
    z-index: 4; }
    @media (min-width: 28.125em) {
      .hero__content {
        padding: 0 3.2rem; } }
    @media (min-width: 48em) {
      .hero__content {
        padding: 0 4.8rem; } }
    @media (min-width: 143.75em) {
      .hero__content {
        padding: 0 6.4rem; } }
    .hero__content-text {
      z-index: 5; }
    .hero__content-img {
      z-index: 4; }
    .hero__content-hello {
      animation: fadeUp 1s 0.5s linear backwards;
      margin-bottom: 0.4rem; }
    .hero__content-name {
      margin-left: -0.5rem;
      margin-bottom: 0.8rem;
      animation: fadeUp 1s 0.7s linear backwards; }
    .hero__content-sub {
      margin-bottom: 1.2rem;
      animation: fadeUp 1s 0.9s linear backwards; }
    .hero__content-desc {
      animation: fadeUp 1s 1.1s linear backwards;
      padding-right: 2.4rem; }
      @media (min-width: 143.75em) {
        .hero__content-desc {
          padding-right: 6.4rem; } }
  @media (min-width: 37.5em) {
    .hero__img-transparent-bw {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      left: 85%;
      background-image: url("../images/main-pic-transparent-bw.png");
      background-size: cover;
      width: 50%;
      height: 60rem; } }
  @media (min-width: 48em) {
    .hero__img-transparent-bw {
      width: 40%;
      height: 55rem;
      left: 90%;
      top: 45%; } }
  @media (min-width: 76em) {
    .hero__img-transparent-bw {
      left: 95%;
      top: 48%;
      height: 45rem;
      width: 35%; } }
  @media (min-width: 108.5em) {
    .hero__img-transparent-bw {
      height: 43rem;
      width: 32%; } }
  @media (min-width: 135em) {
    .hero__img-transparent-bw {
      height: 46rem;
      width: 30%; } }
  @media (min-width: 37.5em) {
    .hero__img-transparent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      left: 85%;
      background-image: url("../images/main-pic-transparent.png");
      background-size: cover;
      width: 50%;
      height: 60rem;
      animation: fadeInAnimation 1s 1s linear backwards; } }
  @media (min-width: 48em) {
    .hero__img-transparent {
      width: 40%;
      height: 55rem;
      left: 90%;
      top: 45%; } }
  @media (min-width: 76em) {
    .hero__img-transparent {
      left: 95%;
      top: 48%;
      height: 45rem;
      width: 35%; } }
  @media (min-width: 108.5em) {
    .hero__img-transparent {
      height: 43rem;
      width: 32%; } }
  @media (min-width: 135em) {
    .hero__img-transparent {
      height: 46rem;
      width: 30%; } }

.about {
  position: relative;
  width: 100%;
  flex-direction: column;
  z-index: 5; }
  @media (min-width: 56.25em) {
    .about {
      display: flex;
      flex-direction: row; } }
  @media (min-width: 98.625em) {
    .about {
      width: 90%;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      margin-bottom: 9.6rem; } }
  @media (min-width: 125.625em) {
    .about {
      width: 80%; } }
  @media (min-width: 143.75em) {
    .about {
      width: 70%; } }
  @media (min-width: 56.25em) {
    .about-title {
      margin-left: 4.8rem;
      margin-bottom: 3.2rem; } }
  @media (min-width: 70.625em) {
    .about-title {
      margin-bottom: 2.4rem;
      margin-left: 0;
      justify-content: flex-start; } }
  .about__img {
    background-image: url("../images/creative.png");
    background-size: cover;
    width: 100%;
    height: 60rem;
    margin-bottom: 3.2rem; }
    @media (min-width: 28.125em) {
      .about__img {
        height: 65rem; } }
    @media (min-width: 37.5em) {
      .about__img {
        height: 75rem;
        margin: 3.2rem;
        margin-top: 0; } }
    @media (min-width: 48em) {
      .about__img {
        width: 80%;
        margin: 8rem;
        margin-top: 0; } }
    @media (min-width: 56.25em) {
      .about__img {
        width: 55%;
        height: 100vh;
        margin: 0; } }
    @media (min-width: 83.75em) {
      .about__img {
        width: 50%;
        margin-left: 3.2rem; } }
    @media (min-width: 98.625em) {
      .about__img {
        width: 45%; } }
    @media (min-width: 143.75em) {
      .about__img {
        margin-left: 0; } }
  @media (min-width: 56.25em) {
    .about__wrapper {
      width: 45%; } }
  .about__content {
    height: 100%; }
    @media (min-width: 56.25em) {
      .about__content {
        margin: 0;
        margin-right: 2.4rem; } }
    .about__content-desc {
      text-align: justify; }
      .about__content-desc--1, .about__content-desc--2 {
        margin-bottom: 2.4rem; }
      .about__content-desc--2 {
        text-indent: 4.8rem; }
    .about__content-diagonals::after {
      content: "";
      background: url("../images/diagonals.png");
      background-size: cover;
      display: block;
      width: 50%;
      height: 2%;
      position: absolute;
      right: 0;
      margin-right: 2.4rem; }
      @media (min-width: 28.125em) {
        .about__content-diagonals::after {
          margin-right: 3.2rem; } }
      @media (min-width: 37.5em) {
        .about__content-diagonals::after {
          margin-right: 6.4rem; } }
      @media (min-width: 56.25em) {
        .about__content-diagonals::after {
          width: 30%;
          margin-right: 2.4rem;
          top: 60%; } }
      @media (min-width: 64em) {
        .about__content-diagonals::after {
          top: 53%; } }
      @media (min-width: 70.625em) {
        .about__content-diagonals::after {
          width: 20%;
          height: 3%;
          top: 49%; } }
      @media (min-width: 76em) {
        .about__content-diagonals::after {
          top: 56%; } }
      @media (min-width: 83.75em) {
        .about__content-diagonals::after {
          top: 56%;
          margin-right: 4.8rem; } }
      @media (min-width: 90.625em) {
        .about__content-diagonals::after {
          top: 52%; } }
      @media (min-width: 98.625em) {
        .about__content-diagonals::after {
          top: 55%;
          margin-right: 6.4rem; } }
      @media (min-width: 118.125em) {
        .about__content-diagonals::after {
          top: 53%;
          margin-right: 7.2rem; } }
      @media (min-width: 125.625em) {
        .about__content-diagonals::after {
          top: 54%; } }
      @media (min-width: 143.75em) {
        .about__content-diagonals::after {
          top: 52%;
          margin-right: 9.8rem; } }
    .about__content-achievements {
      margin-top: 6.4rem;
      text-align: right; }
      @media (min-width: 56.25em) {
        .about__content-achievements {
          margin-top: 2.4rem; } }
      .about__content-achievements-title {
        font-weight: 700;
        margin-bottom: 1rem; }
    .about__content-educ {
      margin-bottom: 2.4rem; }

.skills {
  width: 100%;
  flex-direction: column;
  position: relative;
  z-index: 6; }
  @media (min-width: 56.25em) {
    .skills {
      flex-direction: row; } }
  @media (min-width: 56.25em) {
    .skills__content {
      width: 90%;
      margin: 0 auto; } }
  @media (min-width: 98.625em) {
    .skills__content {
      width: 80%; } }
  @media (min-width: 118.125em) {
    .skills__content {
      width: 70%; } }
  @media (min-width: 135em) {
    .skills__content {
      width: 60%;
      height: 100%; } }
  .skills__content-box {
    border: 3px solid #ffa200;
    border-radius: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    text-align: center; }
    @media (min-width: 56.25em) {
      .skills__content-box {
        grid-template-columns: repeat(3, 1fr); } }
  .skills__box {
    padding: 3.2rem 4.8rem; }
    @media (min-width: 56.25em) {
      .skills__box {
        padding: 3.2rem 1.2rem; } }
    @media (min-width: 108.5em) {
      .skills__box {
        padding: 3.2rem; } }
    @media (min-width: 143.75em) {
      .skills__box {
        padding: 3.2rem 4.8rem; } }
    .skills__box-frontend-wrapper {
      border-top: 3px solid #ffa200;
      border-bottom: 3px solid #ffa200; }
      @media (min-width: 56.25em) {
        .skills__box-frontend-wrapper {
          border-top: none;
          border-bottom: none;
          border-left: 3px solid #ffa200;
          border-right: 3px solid #ffa200; } }
    .skills__box-title {
      margin-bottom: 0.8rem; }
    .skills__box-icon, .skills__box-r1, .skills__box-r2 {
      margin-bottom: 2.4rem; }

.home-projects {
  flex-direction: column;
  margin-bottom: 8rem;
  text-align: center; }
  @media (min-width: 37.5em) {
    .home-projects {
      margin-bottom: 12.8rem; } }
  .home-projects__content {
    margin-bottom: 15rem; }
  .home-projects__top-proj {
    display: grid;
    grid-template-rows: repeat(3, 45rem);
    row-gap: 4.8rem;
    justify-items: center;
    margin-bottom: 8rem; }
    @media (min-width: 56.25em) {
      .home-projects__top-proj {
        grid-template-rows: repeat(3, 1fr);
        margin-bottom: 10rem;
        row-gap: 9.6rem; } }
    @media (min-width: 90.625em) {
      .home-projects__top-proj {
        padding: 0 2.4rem;
        grid-template-rows: repeat(3, 35rem);
        row-gap: 12.8rem; } }
    @media (min-width: 108.5em) {
      .home-projects__top-proj {
        padding: 0 9.6rem;
        grid-template-rows: repeat(3, 40rem); } }
    @media (min-width: 125.625em) {
      .home-projects__top-proj {
        padding: 0 20rem; } }
    @media (min-width: 143.75em) {
      .home-projects__top-proj {
        padding: 0 30rem;
        grid-template-rows: repeat(3, 45rem); } }
    .home-projects__top-proj-content {
      background-color: #292929;
      border-radius: 1rem;
      display: flex;
      flex-direction: column; }
      @media (min-width: 56.25em) {
        .home-projects__top-proj-content {
          background-color: transparent;
          position: relative;
          width: 100%;
          flex-direction: row;
          align-content: center; } }
      .home-projects__top-proj-content-reverse {
        flex-direction: column-reverse;
        justify-content: flex-end; }
        @media (min-width: 56.25em) {
          .home-projects__top-proj-content-reverse {
            flex-direction: row;
            align-content: center; } }
    .home-projects__top-proj-info-left {
      padding: 1rem 2rem; }
      @media (min-width: 56.25em) {
        .home-projects__top-proj-info-left {
          padding: 0;
          position: absolute;
          width: 50%;
          left: 0;
          align-self: center;
          z-index: 1; } }
    .home-projects__top-proj-info-right {
      padding: 1rem 2rem; }
      @media (min-width: 56.25em) {
        .home-projects__top-proj-info-right {
          padding: 0;
          position: absolute;
          width: 50%;
          align-self: center;
          right: 0; } }
    .home-projects__top-proj-title-right {
      color: #FFDA99;
      margin-bottom: 1rem; }
      @media (min-width: 56.25em) {
        .home-projects__top-proj-title-right {
          text-align: right;
          margin-bottom: 0; } }
    .home-projects__top-proj-title-left {
      color: #FFDA99;
      margin-bottom: 1rem; }
      @media (min-width: 56.25em) {
        .home-projects__top-proj-title-left {
          text-align: left;
          margin-bottom: 0; } }
    .home-projects__top-proj-desc {
      color: #FFF0D5;
      text-align: justify;
      margin-bottom: 3.2rem; }
      @media (min-width: 56.25em) {
        .home-projects__top-proj-desc {
          display: none; } }
  .home-projects__more-title {
    color: #FFF0D5;
    margin-bottom: 3.2rem; }
  .home-projects__card-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2.4rem; }
    @media (min-width: 28.125em) {
      .home-projects__card-box {
        row-gap: 3.2rem; } }
    @media (min-width: 37.5em) {
      .home-projects__card-box {
        row-gap: 4.8rem; } }
    @media (min-width: 48em) {
      .home-projects__card-box {
        gap: 4.8rem; } }
    @media (min-width: 108.5em) {
      .home-projects__card-box {
        width: 80%;
        margin: 0 auto; } }
    @media (min-width: 118.125em) {
      .home-projects__card-box {
        width: 70%; } }
    @media (min-width: 135em) {
      .home-projects__card-box {
        width: 60%; } }

.contact {
  flex-direction: column; }
  .contact__content {
    text-align: center; }
    .contact__content-desc {
      padding: 0 2.4rem; }
      @media (min-width: 64em) {
        .contact__content-desc {
          padding: 0 12.8rem; } }
      @media (min-width: 70.625em) {
        .contact__content-desc {
          width: 60%;
          padding: 0;
          margin: 0 auto; } }
      @media (min-width: 108.5em) {
        .contact__content-desc {
          width: 45%; } }
      @media (min-width: 135em) {
        .contact__content-desc {
          width: 35%; } }
  .contact-btn {
    margin: 3.2rem 0; }

.not-found {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  position: relative; }
  .not-found__content {
    background: linear-gradient(#151515, rgba(255, 255, 255, 0.8));
    width: 100%;
    height: 100vh; }
  .not-found__img {
    overflow: hidden; }
  .not-found__img::after {
    content: '';
    width: 120vw;
    height: 100%;
    background-image: url("../images/sand1.png");
    background-size: cover;
    background-position: right 25% bottom 50%;
    position: absolute;
    bottom: -32%; }
  .not-found__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 6;
    width: 100vw; }
    .not-found__text h1 {
      text-transform: uppercase;
      font-size: 12rem;
      font-weight: 700;
      margin-bottom: 2.4rem; }
    .not-found__text h3 {
      font-weight: 400;
      margin-bottom: 6.4rem; }
    .not-found__text a {
      font-size: 2.4rem; }

.not-found-overlay {
  overflow: hidden; }
  .not-found-overlay::after {
    position: absolute;
    content: "";
    background-image: linear-gradient(rgba(41, 41, 41, 0.5), rgba(21, 21, 21, 0.7));
    width: 100vw;
    height: 100vh;
    z-index: 5; }