* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --body-bg-col: rgb(255, 255, 255);
  --text-col: rgb(0, 0, 0);
  --shadow: rgb(211, 211, 211);
  --gray: rgb(128, 128, 128);
  --palestine: rgb(206, 17, 38);
  --wrong: rgb(204, 0, 0);
  --warning: rgb(255, 183, 0);
  --success: rgb(0, 128, 0);
  --cv-col: #636363;

  --invert: 0;

  --layer0: -1;
  --layer1: 1;
  --layer2: 2;
  --layer3: 3;
  --top-layer: 9;

  --transition: 0.25s;

  font-size: 10px;
  color: var(--text-col);
  font-family: Arial, Helvetica, sans-serif;

  transition: var(--transition);
}

::selection {
  background-color: var(--text-col);
  color: var(--body-bg-col);
}

::-moz-selection {
  background-color: var(--text-col);
  color: var(--body-bg-col);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 12rem;

  width: 100%;
  overflow-x: hidden;

  &:has(.toggle-theme:checked) {
    --body-bg-col: rgb(0, 0, 0);
    --text-col: rgb(255, 250, 240);
    --shadow: rgb(128, 128, 128);
    --gray: rgb(211, 211, 211);

    --cv-col: #00ffd0;

    --invert: 1;
  }
}

body {
  background-color: var(--body-bg-col);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
}

header {
  position: fixed;
  top: 0;
  width: 100%;

  z-index: var(--top-layer);

  .header-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: absolute;
    left: 0;
    height: 10rem;
    background-color: transparent;
    font-size: 1.5rem;
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);

    .palestine {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: var(--layer0);

      &::before,
      &::after {
        content: "";
        position: absolute;
        border: 5rem solid;
        border-color: var(--palestine) transparent transparent;
        left: 50%;
        transform: translateX(-50%);
        filter: drop-shadow(0 0 0.5rem var(--shadow));
      }
    }

    .logo {
      z-index: var(--top-layer);

      a {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;

        img {
          width: 5rem;
          border-radius: 1rem;
        }
      }
    }

    nav {
      position: absolute;
      left: 0;
      width: 100%;
      top: 11rem;
      transition: var(--transition);
      transform: translateX(100%);
      z-index: var(--layer1);

      ul {
        list-style-type: none;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        li {
          position: relative;
          margin-left: var(--ml);

          a {
            position: relative;
            text-decoration: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            overflow-x: hidden;
            display: flex;
            align-items: center;
            padding: 1.5rem 0.75rem;
            width: 50%;
            background-color: var(--text-col);
            color: var(--body-bg-col);
            border-radius: 0.75rem 0 0 0.75rem;

            &::before,
            &::after {
              content: attr(data-nav);
              position: absolute;
              font-size: 1.5rem;

              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            &::before {
              clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
            }

            &::after {
              clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
            }

            span {
              /* display: inline; */
              position: absolute;
              width: 100%;
              height: 0.2rem;
              background-color: var(--body-bg-col);
              left: -100%;
              transition: var(--transition);
            }

            &:active {
              background-color: var(--text-col);
              color: var(--body-bg-col);
            }

            &:hover {
              font-weight: 900;
              letter-spacing: 0.125rem;
              font-style: italic;
              text-transform: uppercase;

              &::before {
                top: -0.1rem;
                font-size: 1rem;
              }

              &::after {
                bottom: -0.1rem;
                font-size: 1rem;
              }

              span {
                left: 100%;
              }
            }
          }

          &.active {
            a {
              background-color: var(--text-col);
              color: var(--body-bg-col);
              font-weight: 900;
              letter-spacing: 0.125rem;
              font-style: italic;
              text-transform: uppercase;

              &::before {
                top: -0.1rem;
                font-size: 1rem;
              }

              &::after {
                bottom: -0.1rem;
                font-size: 1rem;
              }

              span {
                left: 100%;
              }
            }
          }
        }
      }
    }

    .menu {
      border: 0.25rem solid var(--text-col);
      border-radius: 1rem;
      width: 5rem;
      height: 5rem;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      .burger {
        width: 3rem;
        height: 3rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        &::before,
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0.5rem;
          background-color: var(--text-col);
          transition: var(--transition);
          display: block;
          transform-origin: right;
        }

        &::before {
          top: 0;
        }

        &::after {
          bottom: 0;
        }

        span {
          position: absolute;
          width: 100%;
          height: 0.5rem;
          background-color: var(--text-col);
          transition: var(--transition);
          display: block;
          transform-origin: right;
        }
      }

      .toggle-menu {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
      }

      &:has(:checked) {
        .burger span {
          opacity: 0;
          transform: translateX(5rem);
        }

        .burger:before {
          background-color: var(--wrong);
          transform: rotate(-45deg) translate(-0.4rem, -0.125rem);
        }

        .burger:after {
          background-color: var(--wrong);
          transform: rotate(45deg) translate(-0.4rem, 0.125rem);
        }
      }
    }

    .options {
      position: absolute;
      left: 0;
      transform: translateX(100%);
      transition: var(--transition);
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      z-index: var(--layer0);

      .lang,
      .theme {
        text-align: center;
        border: none;
        outline: none;
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;
        width: 6rem;
        background-color: var(--gray);
        box-shadow: 0 0 0.5rem var(--shadow) inset;
        height: 3rem;
        font-size: 2rem;
      }

      .lang {
        appearance: none;
        cursor: pointer;
      }

      .theme {
        position: relative;
        transition: var(--transition);

        display: flex;
        align-items: center;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          transform: translate(0.25rem, 0.25rem);
          width: 2.5rem;
          height: 2.5rem;
          -webkit-border-radius: 0.5rem;
          -moz-border-radius: 0.5rem;
          border-radius: 0.5rem;
          background-color: rgb(0, 0, 0);
          transition: var(--transition);
          background-image: url(../assets/header/sun.svg);
          -webkit-background-size: 100%;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }

        .toggle-theme {
          position: absolute;
          inset: 0;
          opacity: 0;
          cursor: pointer;
        }

        &:has(:checked)::before {
          transform: translate(3.25rem, 0.25rem);
          background-image: url(../assets/header/moon.svg);
        }
      }
    }

    @supports (animation-timeline: scroll()) {
      .scroll {
        position: absolute;
        left: 0;
        bottom: -1rem;
        height: 1rem;
        width: 100%;
        background-color: var(--text-col);

        animation: scrolling linear;
        animation-timeline: scroll();
      }
    }
    &:has(.toggle-menu:checked) {
      nav {
        transform: translateX(50%);
      }

      .options {
        transform: translateX(0);
      }
    }
  }
}

footer {
  background-color: var(--shadow);
  text-align: center;
  padding: 2.5rem 0;
  font-size: 2rem;

  .scroll-top {
    position: fixed;
    bottom: 1.5rem;
    right: -10rem;
    text-align: center;
    width: 5rem;
    height: 5rem;
    background-color: var(--warning);
    color: var(--text-col);
    border-radius: 1rem;
    transition: var(--transition);
    font-weight: 900;
    font-size: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;

    span {
      display: inline-block;
      font-weight: 900;
      transform: rotate(-90deg) translateX(0);
      -webkit-user-select: none;
      user-select: none;
      animation: jump_shake 1s linear infinite;
    }
  }

  .show-scroll-top {
    right: 1.5rem;
  }
}

@media (min-width: 768px) {
  header {
    .header-container {
      .palestine {
        &::before,
        &::after {
          left: unset;
          transform: translateX(0);
        }

        &::before {
          left: 10%;
        }

        &::after {
          right: 10%;
        }
      }

      .logo a img {
        width: 7.5rem;
        border-radius: 50%;
      }

      nav {
        transform: translateX(-50%);
        left: 50%;
        top: unset;

        ul {
          position: relative;
          width: 60%;
          flex-direction: row;
          margin: 0 auto;
          justify-content: space-between;

          li {
            margin: 0;
            width: calc(100% / 5);

            a {
              border-radius: 0.75rem;
              background-color: transparent;
              color: var(--text-col);
              width: 100%;

              span {
                background-color: var(--text-col);
              }
            }
          }
        }
      }

      .menu {
        display: none;
      }

      .options {
        position: relative;
        flex-direction: column;
        transform: translateX(0);
        z-index: var(--layer1);
        width: 7.5rem;
        align-items: center;
        justify-content: space-between;

        .lang,
        .theme {
          -webkit-border-radius: 2rem;
          -moz-border-radius: 2rem;
          border-radius: 2rem;

          &::before {
            -webkit-border-radius: 2rem;
            -moz-border-radius: 2rem;
            border-radius: 2rem;
          }
        }
      }
    }
  }
}

@keyframes scrolling {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

@keyframes jump_shake {
  0% {
    transform: rotate(-90deg) translateX(0);
  }
  25% {
    transform: rotate(-90deg) translateX(0.25rem);
  }
  35% {
    transform: rotate(-90deg) translateX(0.25rem) rotate(17deg);
  }
  45% {
    transform: rotate(-90deg) translateX(0.25rem) rotate(-17deg);
  }
  55% {
    transform: rotate(-90deg) translateX(0.25rem) rotate(17deg);
  }
  65% {
    transform: rotate(-90deg) translateX(0.25rem) rotate(-17deg);
  }
  85% {
    transform: rotate(-90deg) translateX(0) rotate(0);
  }
  100% {
    transform: rotate(-90deg) translateX(0) rotate(0);
  }
}