/* ------------------------------------ DECLARATIONS ------------------------------------*/

:root {
  color-scheme: dark;

  --width-regular: 700px;
  --width-wider: 900px;

  --margin-blk-regular: 15rem;

  --clr-background: rgb(91, 80, 69);
  --clr-highlight: rgb(232, 214, 198);
  --clr-dark: rgb(31, 31, 31);

  --clr-font-light: rgb(243, 246, 244);
  --clr-font-light-brown: rgb(212, 198, 180);
  --clr-font-dark: rgb(83, 78, 72);

  --clr-white: rgba(255, 255, 255, 1);
  --clr-white-low-alpha: rgba(255, 255, 255, 0.8);

  --clr-glass: rgba(0, 0, 0, 0.25);

  --ff-poppins: "Poppins", sans-serif;
  --ff-fira-code: "Fira Code", monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;

  --fs-200: 0.775rem;
  --fs-400: 0.9375rem;
  --fs-500: 1.15rem;
  --fs-600: 1.425rem;
  --fs-900: 1.8rem;
}

/* ------------------------------------ CSS RESET ------------------------------------*/

* {
  margin: 0;
  padding: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  background-image: url(images/background.png);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  overflow-x: hidden;
  text-shadow: 1px 1px 5px var(--clr-font-dark);
}

body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

/* ------------------------------------ HEADER ------------------------------------*/

header {
  box-shadow: 0 -15px 35px -20px var(--clr-highlight);
  -webkit-box-shadow: 0 -15px 35px -20px var(--clr-highlight);
  -moz-box-shadow: 0 -15px 35px -20px var(--clr-highlight);
}

.wrapper {
  height: 100px;
  display: flex;
  justify-content: space-between;
  margin-inline: 30px;
}

.logo-box {
  height: fit-content;
  width: 100px;
}

.icons-box {
  height: max-content;
  display: flex;
  justify-items: end;
  align-self: center;
}

.icon-button {
  width: 40px;
  height: 40px;
  margin-inline: 5px;
  border: 2px solid;
  border-color: var(--clr-font-light);
  background-color: transparent;
  border-radius: 50%;
}

.icon-button:hover {
  filter: brightness(1.2);
  box-shadow: 1px 1px 5px var(--clr-highlight);
  -webkit-box-shadow: 1px 1px 5px var(--clr-highlight);
  -moz-box-shadow: 1px 1px 5px var(--clr-highlight);
}

.icon-button img {
  scale: 0.8;
  cursor: pointer;
}

/* ------------------------------------ MAIN INTRODUCTION ------------------------------------*/

main {
  color: var(--clr-font-light);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: var(--fs-400);
}

.introduction-container {
  position: relative;
  width: var(--width-regular);
  margin-block-start: 15rem;
  margin-block-end: var(--margin-blk-regular);
  margin-inline: auto;
}

.introduction-container > *:not(.glassmorphism-overlay) {
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 2;
}

.my-photo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.my-photo-box img {
  --img-size: 200px;
  height: var(--img-size);
  width: var(--img-size);
  border: 2px solid var(--clr-font-light);
  border-radius: 50%;
  padding: 0.25rem;
}

.my-photo-box h1 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-900);
  width: 100px;
  letter-spacing: 2px;
}

.skills-container {
  margin-block: 2rem;
  font-family: var(--ff-fira-code);
  font-weight: var(--fw-light);
  letter-spacing: 0.1125rem;
  text-align: center;
}

.skills-container span::after {
  content: "•";
  margin-inline: 8px;
}

.skills-container span:nth-child(1)::after,
.skills-container span:nth-child(4)::after {
  color: red;
}
.skills-container span:nth-child(2)::after,
.skills-container span:nth-child(8)::after {
  color: yellow;
}
.skills-container span:nth-child(3)::after,
.skills-container span:nth-child(7)::after {
  color: orangered;
}
.skills-container span:nth-child(5)::after {
  color: greenyellow;
}
.skills-container span:nth-child(6)::after {
  color: aqua;
}
.skills-container span:nth-child(9)::after {
  content: "";
}

/* ------------------------------------ MAIN EDUCATION ------------------------------------*/

#education {
  padding-top: 2rem;
}

.education-container {
  width: var(--width-regular);
  margin-block: var(--margin-blk-regular);
  margin-inline: auto;
  text-align: center;
}

.education-container h2 {
  font-size: var(--fs-600);
}

.education-container h3 {
  font-size: var(--fs-500);
}

.education-container > div {
  margin-block: 3rem;
}

.period {
  color: var(--clr-font-dark);
  font-size: var(--fs-200);
}

.period::before,
.period::after {
  content: " ━━━ ";
}

.education-container-item {
  position: relative;
  scale: 0.2;
  filter: blur(5px);
  transition: 1s;
}

.education-container-item h3 {
  scale: 0.2;
  transition-delay: 200ms;
  transition: 1s;
}

.education-container-item > p {
  scale: 0.2;
  transition-delay: 400ms;
  transition: 1s;
}

.education-container-item-show,
.education-container-item-show h3,
.education-container-item-show > p {
  scale: 1;
  filter: blur(0);
}

/* ------------------------------------ MAIN PROJECTS ------------------------------------*/

#projects {
  padding-top: 2rem;
}

.projects-container {
  width: var(--width-regular);
  margin-block: var(--margin-blk-regular);
  margin-inline: auto;
  position: relative;
}

.projects-header {
  margin-block-end: 4rem;
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
}

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(5, 80px);
  grid-template-rows: repeat(3, 80px);
  gap: 0.5rem;
  justify-content: center;
}

.first-img-preview {
  height: 100%;
}

.grid-gallery a {
  cursor: pointer;
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
  box-sizing: border-box;
  grid-column: span 2;
  clip-path: path(
    "M 64 16 C 80 0 80 0 96 16 C 112 32 128 48 144 64 C 160 80 160 80 144 96 C 128 112 112 128 96 144 C 80 160 80 160 64 144 C 48 128 32 112 16 96 C 0 80 0 80 16 64 C 32 48 48 32 64 16 Z"
  );
  -webkit-clip-path: path(
    "M 64 16 C 80 0 80 0 96 16 C 112 32 128 48 144 64 C 160 80 160 80 144 96 C 128 112 112 128 96 144 C 80 160 80 160 64 144 C 48 128 32 112 16 96 C 0 80 0 80 16 64 C 32 48 48 32 64 16 Z"
  );

  &:hover {
    z-index: 2;
    clip-path: path(
      "M 144 0 C 160 0 160 0 160 16 C 160 32 160 64 160 144 C 160 160 160 160 144 160 C 128 160 96 160 16 160 C 0 160 0 160 0 144 C 0 128 0 96 0 16 C 0 0 0 0 16 0 C 32 0 48 0 64 0 Z"
    );
    -webkit-clip-path: path(
      "M 144 0 C 160 0 160 0 160 16 C 160 32 160 64 160 144 C 160 160 160 160 144 160 C 128 160 96 160 16 160 C 0 160 0 160 0 144 C 0 128 0 96 0 16 C 0 0 0 0 16 0 C 32 0 48 0 64 0 Z"
    );

    .first-img-preview {
      display: none;
    }

    .second-img-preview {
      height: 100%;
      object-fit: cover;
    }
  }

  &:nth-child(3) {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
  }
}

a.project-link {
  opacity: 0;
}

a.project-link:nth-child(1) {
  transform: translateX(-200px);
  &:hover {
    transition-delay: transform 300ms;
  }
}

a.project-link:nth-child(2) {
  transform: translateY(-200px);
  &:hover {
    transition-delay: transform 500ms;
  }
}

a.project-link:nth-child(3) {
  transform: translateY(200px);
  &:hover {
    transition-delay: transform 700ms;
  }
}

a.project-link:nth-child(4) {
  transform: translateX(200px);
  &:hover {
    transition-delay: transform 900ms;
  }
}

a.project-link-show,
a.project-link-show:nth-child(1),
a.project-link-show:nth-child(2),
a.project-link-show:nth-child(3),
a.project-link-show:nth-child(4) {
  opacity: 1;
  transform: translateX(0px);
  transition: transform 1s, clip-path 200ms, opacity 1s;
}

.link-hidden {
  pointer-events: none;
}

/* ------------------------------------ PROJECT CARDS ------------------------------------*/

.card {
  display: none;
  position: absolute;
  width: 500px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: -150px;
  padding-block: 3rem;
  color: var(--clr-font-light);
  background-color: var(--clr-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1rem;
  box-shadow: inset 0px 1px 1px var(--clr-white);
  -webkit-box-shadow: inset 0px 1px 1px var(--clr-white);
  -moz-box-shadow: inset 0px 1px 1px var(--clr-white);
  z-index: 3;
}

.card > img {
  margin-inline: auto;
  margin-block-end: 2.5rem;
  border-radius: 0.5rem;
}

.card > *:not(img, .card-dot) {
  text-align: justify;
  padding-inline: 5rem;
}

.card-title {
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
}

.card-description {
  font-size: var(--fs-400);
  font-weight: var(--fw-light);
  margin-block: 1.5rem;
}

.card-description ul {
  padding-left: 2rem;
}

.card-repository-link {
  font-size: var(--fs-400);
  font-weight: var(--fw-regular);
}

.card-repository-link a {
  position: relative;
  text-decoration: none;
  color: var(--clr-font-light-brown);
  z-index: 5;
}

.card-repository-link a:hover {
  text-shadow: 0.5px 0.5px 1px var(--clr-highlight);
}

.card-dot {
  --clr-glass-red: rgb(236, 106, 94);
  --clr-glass-yellow: rgb(244, 191, 78);
  --clr-glass-green: rgb(97, 198, 85);
  --dot-size: 12px;
  --dot-gap: 10px;

  position: absolute;
  width: var(--dot-size);
  height: var(--dot-size);
  padding-inline: 0;
  transform: translateX(var(--dot-size))
    translateY(calc(-3rem + var(--dot-gap)));
  border-radius: 50%;
  box-shadow: inset 0.2px 0.2px 0.2px var(--clr-white-low-alpha),
    0.4px 0.4px 0.4px var(--clr-dark);
  -webkit-box-shadow: inset 0.2px 0.2px 0.2px var(--clr-white-low-alpha),
    0.4px 0.4px 0.4px var(--clr-dark);
  -moz-box-shadow: inset 0.2px 0.2px 0.2px var(--clr-white-low-alpha),
    0.4px 0.4px 0.4px var(--clr-dark);
  z-index: 5;

  &:nth-child(1) {
    background-color: var(--clr-glass-red);
  }
  &:nth-child(2) {
    background-color: var(--clr-glass-yellow);
    margin-left: calc(var(--dot-gap) * 2);
  }
  &:nth-child(3) {
    background-color: var(--clr-glass-green);
    margin-left: calc(var(--dot-gap) * 4);
  }
}

.card-dot:hover {
  /* add hover effect */
}

.card-background-1,
.card-background-2,
.card-background-3,
.card-background-4 {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.card-front {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.card-visible {
  display: block;
}

/* ------------------------------------ MAIN CONTACT ------------------------------------*/

.contact-container {
  position: relative;
  margin-block-start: var(--margin-blk-regular);
  width: var(--width-regular);
  height: 10rem;
  margin-inline: auto;
  padding-inline: 5rem;
  padding-block-start: 2rem;
  padding-block-end: 5rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 5px 5px 35px var(--clr-white-low-alpha);
  color: var(--clr-font-dark);
  text-shadow: none;
}

.contact-container .blur-overlay {
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  transform: translateX(-5rem) translateY(-2rem);
  background-image: url("images/contact-background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  filter: hue-rotate(178deg) brightness(90%) opacity(80%);
  border-radius: 1rem;
}

.contact-container > *:not(.blur-overlay) {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

.contact-container h2 {
  margin-block-end: 1rem;
  font-weight: var(--fw-bold);
  font-size: var(--fs-500);
}

.contact-container p {
  margin-block-end: 1rem;
  font-weight: var(--fw-light);
  font-size: var(--fs-400);
}

.contact-container div {
  margin-block-end: 1rem;
  font-weight: var(--fw-light);
  font-size: var(--fs-200);
}

.button-apple-3d {
  position: relative;
  height: 50px;
  padding: 0;
  border: none;
  outline: none;
  background-color: var(--clr-white-low-alpha);
  border-radius: 1rem;
  transition: 0.13s ease-in-out;
  cursor: pointer;
}

.button-apple-3d:active .button-overlay,
.button-apple-3d:focus .button-overlay {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

.button-apple-3d:active .button-text,
.button-apple-3d:focus .button-text {
  transform: translate3d(0px, -5px, 0px);
  -webkit-transform: translate3d(0px, -5px, 0px);
  -moz-transform: translate3d(0px, -5px, 0px);
}

.button-overlay {
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
  height: 100%;
  box-shadow: inset 0px -8px 0px var(--clr-background),
    0px -8px 0px var(--clr-white-low-alpha);
  -webkit-box-shadow: inset 0px -8px 0px var(--clr-background),
    0px -8px 0px var(--clr-white-low-alpha);
  -moz-box-shadow: inset 0px -8px 0px var(--clr-background),
    0px -8px 0px var(--clr-white-low-alpha);
  border-radius: 1rem;
  transition: 0.13s ease-in-out;
}

.button-text {
  transform: translate3d(0px, -13px, 0px);
  -webkit-transform: translate3d(0px, -13px, 0px);
  -moz-transform: translate3d(0px, -13px, 0px);
  margin: 0;
  padding-top: 1rem;
  text-align: center;
  font-size: var(--fs-400);
  background-color: var(--clr-dark);
  color: transparent;
  text-shadow: 2px 2px 3px var(--clr-white);
  background-clip: text;
  transition: 0.13s ease-in-out;
}

.button-apple-3d.copied::after {
  content: "E-mail copied!";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-inline: 1rem;
  padding-block: 0.25rem;
  border-radius: 0.5rem;
  background-color: var(--clr-highlight);
  color: var(--clr-dark);
  text-wrap: nowrap;
  margin-top: 0.8rem;
}

.button-apple-3d.copied::before {
  content: "";
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 1.2rem;
  height: 1.2rem;
  border-top-left-radius: 0.2rem;
  background-color: var(--clr-highlight);
}

/* ------------------------------------ FOOTER ------------------------------------*/

footer {
  color: var(--clr-font-light);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-regular);
  font-size: var(--fs-400);

  background-color: var(--clr-background);
  margin-block-start: 10rem;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding-inline: 5rem;
  padding-block: 2rem;
  color: var(--clr-font-light-brown);
}

.link-flexbox {
  display: flex;
  align-items: center;
  width: min-content;
}

.link-flexbox > * {
  width: max-content;
  margin-inline-end: 2rem;
  color: var(--clr-font-light);
  text-decoration: none;
  text-shadow: 2px 2px 5px var(--clr-footer);
}

.link-flexbox > *:hover {
  text-shadow: 2px 2px 5px var(--clr-highlight);
}

.link-flexbox > *:nth-child(3) {
  margin-inline-end: 0;
}

/* ------------------------------------ GLASSMORPHISM ------------------------------------*/

.glassmorphism-overlay {
  --clr-glass-red: rgb(236, 106, 94);
  --clr-glass-yellow: rgb(244, 191, 78);
  --clr-glass-green: rgb(97, 198, 85);

  position: absolute;
  width: var(--width-wider);
  height: calc(var(--width-wider) / 2);
  transform: translateX(
      calc(((var(--width-wider) - var(--width-regular)) / 2) * -1)
    )
    translateY(calc(((var(--width-wider) - var(--width-regular)) / 4) * -1));
  background-color: var(--clr-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1rem;
  box-shadow: inset 0px 1px 1px var(--clr-white);
  -webkit-box-shadow: inset 0px 1px 1px var(--clr-white);
  -moz-box-shadow: inset 0px 1px 1px var(--clr-white);
}

/* ------------------------------------ RESPONSIVE ------------------------------------*/

@media screen and (max-width: 1000px) {
  :root {
    --width-regular: 500px;
    --width-wider: calc(var(--width-regular) + ((var(--width-regular)) / 5));
  }

  /* ------------------------------------ GLASSMORPHISM ------------------------------------*/

  .glassmorphism-overlay {
    --height-diff: 100px;
    height: calc(var(--width-wider) / 2 + var(--height-diff));
    transform: translateX(calc(var(--height-diff) / 2 * -1))
      translateY(calc(var(--height-diff) / 2 * -1));
  }

  @media screen and (max-width: 850px) {
    /* ------------------------------------ MAIN CONTACT ------------------------------------*/

    .contact-container {
      padding-block-end: 7rem;
    }

    /* ------------------------------------ FOOTER ------------------------------------*/

    .footer-container {
      display: grid;
      grid-row: 3;
      justify-content: center;
      text-align: center;
    }

    .footer-container > *:nth-child(1) {
      grid-row-start: 3;
    }
    .footer-container > *:nth-child(2) {
      grid-row-start: 2;
    }

    .footer-container > * {
      margin-block: 1rem;
    }

    .link-flexbox {
      margin: 0 auto;
    }

    @media screen and (max-width: 850px) {
      :root {
        --width-regular: 300px;
        --width-wider: calc(
          var(--width-regular) + ((var(--width-regular)) / 3)
        );
      }

      /* ------------------------------------ GLASSMORPHISM ------------------------------------*/

      .glassmorphism-overlay {
        height: calc(var(--width-wider));
        transform: translateX(calc(var(--height-diff) / 2 * -1))
          translateY(calc(var(--height-diff) / 2 * -1));
      }
    }
  }
}