@charset "UTF-8";
:root {
  --color-background--default: #ffffff;
  --color-background--dark: #000000;
  --color-background--light: #f1f1f1;
  --color-background--primary: #ff0000;
  --color-background--secondary: #ff7070;

  --color-text--default: #374151;
  --color-text--dark: #000000;
  --color-text--light: #ffffff;
  --color-text--primary: #ff0000;
  --color-text--link: #ff7070;

  --color-border--default: #7c7c7c;
  --color-border--dark: #000000;
  --color-border--light: #f1f1f1;
  --color-border--primary: #ff0000;
  --color-border--tertiary: #b4b4b4;

  --gap: 12px;
  --gap--small: 10px;
  --gap--medium: 15px;
  --gap--large: 20px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 1.6;
}

:where(p, span, i, a) {
  color: var(--color-text--default);
}

a {
  position: relative;
  color: var(--color-text--link);
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

a:visited {
  color: #ff7070;
}

a:not(.navbar--section-page-logo)::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: calc(20px / 2 - 2px);
  left: 0;
  background-color: var(--color-text--primary);
  visibility: hidden;
  transform: scaleX(0);
  transition: visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
}

a:hover {
  color: var(--color-text--primary);
  /* text-decoration: line-through; */

  &:not(.navbar--section-page-logo)::before {
    visibility: visible;
    transform: scaleX(1);
  }
}

a img {
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  padding-top: calc(138.84px + 1px);
  border-right: 1px solid var(--color-border--default);
}

.tooltip--section-page {
  max-width: 350px;
  height: auto;
  padding: 4px 8px;
  border: 1px solid var(--color-background--dark);
  background-color: var(--color-background--light);
  overflow: hidden;
  transition: opacity 0.3s ease;
  z-index: 5;

  & > p.tooltip--section-page-content {
    font-size: 14px !important;
    text-align: center;
  }
}

nav.navbar--section-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px 16px var(--gap--medium);
  background-color: var(--color-background--default);
  border-right: 1px solid var(--color-border--default);
  z-index: 1;
}

/* Hide the main navigation label */
nav.navbar--section-page h2.navbar--section-page-title.sr-only {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

nav.navbar--section-page
  a.navbar--section-page-logo
  img.navbar--section-page-logo-img {
  padding: 12px;
  width: 150px;
  height: auto;
  background-color: var(--color-background--default);
  border-radius: 8px;
}

nav.navbar--section-page div.navbar--section-page-content {
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: 100%;
  padding: 0 calc(32px * 3) 0 32px;
  background-color: var(--color-background--default);
  border: 1px solid var(--color-border--tertiary);
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
}

nav.navbar--section-page
  div.navbar--section-page-toggle:has(
    .navbar--section-page-toggle-checkbox:checked
  )
  ~ div.navbar--section-page-content {
  opacity: 1;
  transform: translateX(0);
}

nav.navbar--section-page
  div.navbar--section-page-content
  ul.navbar--section-page-list {
  height: inherit;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--gap--medium);
  list-style: none;

  & li {
    display: flex;
    align-items: center;
    text-transform: uppercase;
  }
}

nav.navbar--section-page
  div.navbar--section-page-toggle
  input[type="checkbox"] {
  visibility: hidden;
  display: none;
}
nav.navbar--section-page div.navbar--section-page-toggle {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 2;
}
nav.navbar--section-page
  div.navbar--section-page-toggle
  .navbar--section-page-toggle-checkbox {
  width: 50px;
  height: 50px;
  position: absolute;
  opacity: 0;
}
nav.navbar--section-page div.navbar--section-page-toggle .label svg {
  vertical-align: middle;
}
nav.navbar--section-page
  div.navbar--section-page-toggle
  .navbar--section-page-toggle-svg-path1 {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: 0.5s all;
}
nav.navbar--section-page
  div.navbar--section-page-toggle
  .navbar--section-page-toggle-checkbox:checked
  + label
  svg
  g
  path {
  stroke-dashoffset: 0;
}

div.banner-introduction {
  position: relative;
  background-color: #ddf4ff;
  padding: 1rem 2rem;
  text-align: start;
  border-width: 1px 0 1px 0;
  border-style: solid;
  border-color: #54aeff66;
  box-shadow: 0px -6px 14px -6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

main.main--section-page {
  position: relative;
  background-color: var(--color-background--default);
  padding: calc(var(--gap--large) * 2) 32px;
  border-bottom: 1px solid var(--color-border--default);
  overflow: hidden;
  z-index: 2;

  @media screen and (max-width: 768px) {
    padding: calc(var(--gap--large) * 2) 16px;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;

    --size: 75px;
    --line: var(--color-background--light);
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        calc(var(--size) * 0.36) 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
        calc(var(--size) * 0.32) / var(--size) var(--size);
    mask: linear-gradient(
      -20deg,
      transparent 50%,
      var(--color-background--default)
    );
    transform-style: flat;
    background-attachment: fixed;

    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: var(--color-border--default);
    z-index: -1;
    transition: background-color 2.5s ease, width 3s ease, height 3s ease,
      border-width 3s ease;
  }

  &.rendered-page::after {
    width: 100%;
    height: 100%;
    background-color: #fffefe;
    border-width: 0px;
  }
}

main.main--section-page section.section--page:not(:last-child) {
  margin-bottom: var(--gap--large);
}

main.main--section-page
  section.section--page
  div.section--page-content
  :where(h1, h2, h3, h4, h5, h6).section--page-title {
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: var(--gap--small);
}

main.main--section-page
  section.section--page.title
  div.section--page-content
  :where(h1, h2, h3, h4, h5, h6).section--page-title {
  font-size: 38px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: var(--gap--large);
  text-shadow: 4px 5px 0 var(--color-background--light);

  &::after {
    content: "";
    display: block;
    width: 100px;
    height: 2px;
    background-color: var(--color-border--primary);
    margin-top: var(--gap--small);
  }
}

main.main--section-page
  section.section--page
  div.section--page-content
  :where(div, p, form).section--page-description {
  line-height: 1.5;
}

main.main--section-page section.section--page.section--page-hero {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--gap--large);
  margin-bottom: calc(var(--gap--large) * 2);

  @media (max-width: 768px) {
    flex-wrap: wrap;
  }

  & > img.section--page-photo-profile {
    position: relative;
    max-width: 300px;
    height: auto;
    border: 1px solid var(--color-border--tertiary);
    box-shadow: 8px 12px 0 0 var(--color-background--light);

    @media (max-width: 768px) {
      max-width: unset;
      width: 100%;
    }
  }
}

main.main--section-page
  section.section--page
  div.section--page-description
  :where(ul, ol).section--page-description-list {
  margin-left: calc(var(--gap--large) * 2);
  color: var(--color-text--default);
}

/* main.main--section-page
  section.section--page-about
  div.section--page-description
  p:not(:first-child) {
  text-indent: 1rem;
} */

main.main--section-page
  section.section--page
  div.section--page-description
  :where(ul, ol).section--page-description-list
  li.section--page-description-list-item {
  padding-left: 8px;
}

main.main--section-page
  section.section--page.section--page-education
  div.section--page-description
  ol.section--page-description-list
  li.section--page-description-list-item,
h4 {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

main.main--section-page
  section.section--page.section--page-skills
  div.section--page-skills-bar {
  position: relative;
  margin-top: var(--gap--small);
  display: flex;
  flex-direction: column;
  gap: var(--gap--medium);
  background-color: var(--color-background--default);
  border: 1px solid var(--color-border--tertiary);
  padding: var(--gap--medium);
  box-shadow: 8px 12px 0 0 var(--color-background--light);
}

main.main--section-page
  section.section--page.section--page-skills
  div.section--page-skills-bar
  div.section--page-skills-bar-item {
  display: flex;
  flex-direction: column;
  gap: var(--gap--small);
}

main.main--section-page
  section.section--page.section--page-skills
  div.section--page-skills-bar
  div.section--page-skills-bar-item
  div.section--page-skills-bar-item-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap--small);
}

main.main--section-page
  section.section--page.section--page-skills
  div.section--page-skills-bar
  div.section--page-skills-bar-item
  :where(h1, h2, h3, h4, h5, h6).section--page-skills-bar-item-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

main.main--section-page
  section.section--page.section--page-skills
  div.section--page-skills-bar
  div.section--page-skills-bar-item
  p.section--page-skills-bar-item-value {
  font-size: 14px;
  text-align: right;
}

main.main--section-page
  section.section--page.section--page-skills
  div.section--page-skills-bar
  div.section--page-skills-bar-item
  div.section--page-skills-bar-item-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 8px;
  width: 100%;
  border: 1px solid var(--color-border--primary);

  &.animate
    :where(
      .section--page-skills-bar-item-bar-empty,
      .section--page-skills-bar-item-bar-fill
    ) {
    transition: width 3s ease, flex-basis 3s ease;
  }

  & > .section--page-skills-bar-item-bar-empty,
  & > .section--page-skills-bar-item-bar-fill {
    height: inherit;
    width: 0px;
    transition: width 3s ease, flex-basis 3s ease;
  }

  & > .section--page-skills-bar-item-bar-empty {
    background-color: #ffcac7;
  }

  & > .section--page-skills-bar-item-bar-fill {
    background-color: #ff594f;
  }
}

main.main--section-page
  section.section--page.section--page-get-in-touch
  div.section--page-description
  form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap--large);
  margin-top: var(--gap--large);
  color: var(--color-text--default);
  background-color: var(--color-background--default);
  border: 1px solid var(--color-border--tertiary);
  padding: var(--gap--medium);
  box-shadow: 8px 12px 0 0 var(--color-background--light);

  & > button[type="submit"] {
    color: var(--color-text--light);
    border: 1px solid var(--color-border--dark);
    background-color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    padding: var(--gap--small);
    width: 100px;
    transition: background-color 0.3s ease-in-out;
    cursor: pointer;
  }

  & > button[type="submit"]:hover {
    background-color: var(--color-background--dark);
  }
}

main.main--section-page
  section.section--page.section--page-get-in-touch
  div.section--page-description
  form
  div.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap--small);
}

main.main--section-page
  section.section--page.section--page-get-in-touch
  div.section--page-description
  form
  div.form-group
  label
  span.required {
  color: var(--color-text--primary);
}

main.main--section-page
  section.section--page.section--page-get-in-touch
  div.section--page-description
  form
  div.form-group
  :where(input, textarea) {
  padding: var(--gap--small);
  border: 1px solid var(--color-border--default);
  color: var(--color-text--default);
  background-color: var(--color-background--default);
  box-shadow: inset 1px 2px 6px rgba(0, 0, 0, 0.1);
}

main.main--section-page
  section.section--page.section--page-get-in-touch
  div.section--page-description
  form
  div.form-group
  :where(input, textarea):focus {
  border-color: var(--color-border--primary);
}

main.main--section-page
  section.section--page.section--page-projects
  div.section--page-description-list {
  position: relative;
  margin-top: var(--gap--large);
  margin-bottom: var(--gap--large);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--gap--small);
}

main.main--section-page
  section.section--page.section--page-projects
  div.section--page-description-list
  div.section--page-description-list-item {
  position: relative;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  padding: var(--gap--small) var(--gap--small) var(--gap--small) 0;
  border: 2px solid;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;

  &:hover {
    box-shadow: unset;

    & > div.section--page-description-list-item-content {
      right: 0;
      box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.1);
    }
  }

  /* Unset pseucode ::before */
  &::before {
    content: unset;
  }

  /* Red dominanc */
  &:first-child {
    background-color: var(--color-background--secondary);
    border-color: var(--color-border--primary);

    & > div.section--page-description-list-item-content {
      border-color: var(--color-border--primary);
    }
  }

  /* Blue dominanc */
  &:nth-child(2) {
    background-color: #54aeff66;
    border-color: #54aeff;

    & > div.section--page-description-list-item-content {
      border-color: #54aeff;
    }
  }

  /* Yellow dominanc */
  &:nth-child(3) {
    background-color: #f1c40f66;
    border-color: #f1c40f;

    & > div.section--page-description-list-item-content {
      border-color: #f1c40f;
    }
  }

  /* Green dominanc */
  &:nth-child(4) {
    background-color: #2ecc7066;
    border-color: #2ecc70;

    & > div.section--page-description-list-item-content {
      border-color: #2ecc70;
    }
  }

  /* Orange dominanc */
  &:nth-child(5) {
    background-color: #e67d2267;
    border-color: #e67e22;

    & > div.section--page-description-list-item-content {
      border-color: #e67e22;
    }
  }

  /* Purple dominanc */
  &:nth-child(6) {
    background-color: #9b59b966;
    border-color: #9b59b9;

    & > div.section--page-description-list-item-content {
      border-color: #9b59b9;
    }
  }

  /* Pink dominanc */
  &:nth-child(7) {
    background-color: #ff6b6b66;
    border-color: #ff6b6b;

    & > div.section--page-description-list-item-content {
      border-color: #ff6b6b;
    }
  }

  /* maroon dominanc */
  &:nth-child(8) {
    background-color: #c0392b66;
    border-color: #c0392b;

    & > div.section--page-description-list-item-content {
      border-color: #c0392b;
    }
  }

  /* salmon dominanc */
  &:nth-child(9) {
    background-color: #e74c3c66;
    border-color: #e74c3c;

    & > div.section--page-description-list-item-content {
      border-color: #e74c3c;
    }
  }

  /* Teal dominanc */
  &:nth-child(10) {
    background-color: #1abc9c66;
    border-color: #1abc9c;

    & > div.section--page-description-list-item-content {
      border-color: #1abc9c;
    }
  }

  /* Navy dominanc */
  &:nth-child(11) {
    background-color: #34495e66;
    border-color: #34495e;

    & > div.section--page-description-list-item-content {
      border-color: #34495e;
    }
  }

  /* Black dominanc */
  &:nth-child(12) {
    background-color: #00000066;
    border-color: var(--color-border--dark);

    & > div.section--page-description-list-item-content {
      border-color: var(--color-border--dark);
    }
  }

  /* brown dominanc */
  &:nth-child(13) {
    background-color: #79554866;
    border-color: #795548;

    & > div.section--page-description-list-item-content {
      border-color: #795548;
    }
  }
}

main.main--section-page
  section.section--page.section--page-projects
  div.section--page-description-list
  div.section--page-description-list-item
  div.section--page-description-list-item-icon {
  position: absolute;
  top: 50px;
  left: -100px;
  width: 200px;
  height: 250px;
  transition: left 0.3s ease-in-out;

  & > img {
    width: auto;
    height: 100%;

    /* Drop shadow */
    filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.1));
  }
}

main.main--section-page
  section.section--page.section--page-projects
  div.section--page-description-list
  div.section--page-description-list-item
  div.section--page-description-list-item-icon:has(> img:hover) {
  left: -70px;
}

main.main--section-page
  section.section--page.section--page-projects
  div.section--page-description-list
  div.section--page-description-list-item
  div.section--page-description-list-item-content {
  position: absolute;
  top: 0;
  right: calc(-300px / 1.5);
  width: calc(300px / 1.5);
  height: inherit;
  background-color: #f1f1f1de;
  padding: var(--gap--small);
  border-left: 2px solid;
  box-shadow: unset;
  transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s ease;

  & > h6.section--page-description-list-item-content-title {
    font-size: 16px;
    font-weight: 600;
  }

  & > p.section--page-description-list-item-content-description {
    font-size: 14px;

    & > a {
      font-size: 14px;
    }
  }
}

footer.footer--section-page {
  position: relative;
  padding: var(--gap--small) var(--gap);
  background-color: var(--color-background--default);
  text-align: start;

  & > p.footer--section-page-copyright {
    color: var(--color-text--default);
    font-size: 14px;
    padding: 0 var(--gap--small) 0 var(--gap--small);
    border-radius: 4px;
  }
}