* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  cursor: auto
}

html {
  scroll-behavior: smooth
}

:root {
  --color-primary: #111;
  --color-secondary: #eee;
  --color-accent: #38d171;
  --font-primary: "Kanit", sans-serif
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: var( --color-primary );
  color: var( --color-secondary );
  font-family: var( --font-primary )
}

/* TO TOP BUTTON */

.to-top {
  opacity: 0;
  position: fixed;
  z-index: 100;
  right: 1rem;
  bottom: 1rem;
  border-radius: 50%;
  transition: .2s;

  &:hover {
    scale: .8;
  }

  a {
    display: block;
    img {
      display: block;
      width: 50px;
      height: 50px;
      cursor: pointer;
    }
  }
}

/* CURSOR */

.cursor {
  display: none;
  position: fixed; /* Required for setting inset values */
  z-index: 100;
  height: 22px;
  width: 22px;
  border-radius: 32px;
  background-color: var( --color-accent );
  transform: translate( -50%, -50% ); /* Centers circle to cursor location */
  transform-origin: top left;
  opacity: .6;
  transition: scale .2s;
  pointer-events: none
}

/* CONTAINER */

.container {
  width: min( 90vw, 1200px );
  min-height: 100dvh;
  padding: 6rem 2rem
}

.box {
  width: clamp( 300px, 100%, 600px );
  padding: 2rem;
  border-radius: 1rem;
  background: var( --color-accent );
  box-shadow: 0 3px 20px 2px #222;

  p {
    color: var( --color-primary );
    font-size: clamp( .8rem, 1.4vw, 1.4rem );
    text-align: justify
  }
}

/* HERO */

.accent {
  color: var( --color-accent )
}

.hero {
  display: flex;
  justify-content: center;
  align-items: center;

  .hero__text {
    flex: 1;
    flex-grow: 1.6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-right: 4rem
  }
}

.heading {
  font-size: clamp( 2rem, 6vw, 5rem );
  animation: 5s infinite heading;
}

.paragraph {
  font-size: clamp( .4rem, 1.6vw, 1.6rem )
}

.image {
  flex: 1.5;

  .image__img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var( --color-accent );
    /* background: #1a1a1a; */
    animation: 3s infinite img;
  }
}

/* MENU */

.menu {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  transition: .4s;

  .menu__icon {
    display: none;
    position: fixed;
    z-index: 2;
    top: 2rem;
    right: 2rem;
    flex-direction: column;
    justify-content: center;
    gap: min( 1.4vw, 8px );
    align-items: center;
    cursor: pointer;

    &:hover .menu__icon__bar {
      translate: -10px;
      background-color: var( --color-accent )
    }

    &:hover .menu__icon__bar:nth-child( 2 ) {
      translate: 10px
    }

    .menu__icon__bar {
      width: min( 8vw, 44px );
      height: min( .8vw, 4px );
      transition: .3s;
      background: var( --color-secondary );
      cursor: pointer
    }
  }

  .menu__icon--closed {
    transition: .2s;

    .menu__icon__bar:first-child {
      transform: translateX( -30% ) rotateZ( -45deg ) translateY( 400% )
    }

    .menu__icon__bar:nth-child( 2 ) {
      opacity: 0
    }

    .menu__icon__bar:last-child {
      transform: translateX( -30% ) rotateZ( 45deg ) translateY( -400% )
    }

    &:hover {
      rotate: 90deg
    }

    &:hover .menu__icon__bar {
      translate: 0
    }
  }

  .menu__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1rem;
    background: var( --color-primary );

    ul {
      display: flex;
      justify-content: center;
      gap: 2rem;
      list-style: none;

      a {
        position: relative;
        display: block;
        padding: .4rem .6rem;
        font-size: clamp( .8rem, 1.2vw, 1.2rem );
        text-decoration: none;
        color: var( --color-secondary );
        transition: .2s;
        cursor: pointer;

        &::before {
          content: "";
          opacity: 0;
          position: absolute;
          z-index: 1;
          top: 50%;
          left: -10%;
          transform: translateY( -50% );
          display: block;
          width: 1vw;
          height: 1vw;
          border-radius: 50%;
          background: var( --color-accent );
          transition: .3s
        }

        &:hover {
          color: var( --color-accent )
        }

        &:hover::before {
          opacity: 1
        }
      }
    }
  }
}

#start {
  display: grid;
  place-items: center
}

#about_me {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;

  h2 {
    font-size: 2rem;
    margin-bottom: 2vw;
    text-align: center
  }

  p {
    margin-top: 1rem;
    flex: 1;
    font-size: clamp( .8rem, 2vw, 1.4rem );
    text-indent: 4vw
  }

  .decorator-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    /* width: 500px; */

    .decorator {
      width: clamp( 40px, 8vw, 80px );
      height: clamp( 40px, 8vw, 80px );
      border-radius: 50%;
      background: var( --color-accent );

      &:nth-child(odd) {
        transform: scale(1.2);
        align-self: end
      }
    }
  }

  .column {
    /* display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6vw */
  }
}

#my_projects {
  width: 100%;
  padding: 6rem 0;

  h2 {
    font-size: 2rem;
    text-align: center
  }

  .project {
    display: flex;
    flex-wrap: wrap;
    gap: 4vw;
    margin: 0 10vw;
    margin-top: max( 4vw, 2rem );
    padding: 2rem max( 4vw, 2rem );

    h3 {
      margin-bottom: max( 1vw, 1rem );
      font-size: clamp( 2rem, 6vw, 4rem )
    }

    header {
      flex: 1;
      .img__container {
        width: 100%;
        img {
          width: 100%;
          border-radius: 2vw
        }
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1.2;
      min-width: 400px;

      .description {
        font-size: clamp( 1rem, 1.6vw, 1.4rem );
      }

      .technologies {
        display: flex;
        gap: 1vw;
        margin: clamp( 1.2rem, 4vw, 2.8rem ) 0;
        .technology {
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: clamp( 40px, 4vw, 60px )
          }
          p {
            font-size: clamp( .6rem, 1.2vw, .8rem )
          }
        }
      }

      .links {
        a {
          display: block;
          font-size: clamp( .8rem, 1.4vw, 1rem );
          margin-bottom: max(.6vw, 1rem);
          padding: .4vw 1vw;
          color: var( --color-secondary );
          text-decoration: none;
          cursor: pointer;
          transition: .2s;
          border-left: 0 solid var( --color-accent );

          &:hover {
            border-left-width: 20px
          }
        }
      }
    }

    /* &:nth-child(odd) {
      flex-direction: row-reverse;
      background-color: #1d1d1d;

      h3 {
        text-align: right
      }

      .content {
        .description {
          text-align: right
        }

        .technologies {
          display: flex;
          justify-content: end
        }

        .links {
          display: flex;
          flex-direction: column;
          align-items: end;
          a {
            text-align: right;
            border-left: 0;
            border-right: 0 solid var( --color-accent );

            &:hover {
              border-right-width: 20px
            }
          }
        }
      }
    } */
  }
}

#contact_me {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem
  }

  .link-group {
    display: flex;
    gap: 2rem;

    a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      color: var( --color-secondary );
      text-decoration: none;
      transition: .2s;
      cursor: pointer;

      &:hover {
        color: var( --color-accent );

        img {
          opacity: 1
        }
      }

      img {
        width: clamp(100px, 10vw, 120px);
        opacity: .6;
        pointer-events: none
      }

      &:first-child img {
        animation: 3s infinite contact_me_img_1
      }

      &:nth-child(2) img {
        animation: 3s infinite contact_me_img_2
      }

      &:last-child img {
        animation: 3s infinite contact_me_img_3
      }

      p {
        font-size: clamp(1.4rem, 2.8vw, 2rem);
        pointer-events: none
      }
    }
  }
}

/* RWD */

@media( max-width: 580px ) {

  .to-top {
    a {
      img {
        width: 30px;
        height: 30px;
      }
    }
  }

  .heading {
    font-size: 12vw
  }

  .paragraph {
    font-size: 4vw
  }

  .hero {
    flex-direction: column;

    .hero__text {
      align-items: flex-start;
      padding-right: 0;
      padding-bottom: 2rem
    }
  }

  .image {
    text-align: center;

    .image__img {
      width: 80%
    }
  }

  .menu {

    .menu__nav {
      width: 100%;
      justify-content: flex-start;

      ul {
        flex-direction: column;
      }
    }

    .menu__icon {
      display: flex
    }
  }

  #about_me {
    flex-direction: column;
    padding: 2rem;

    p {
      font-size: clamp( 1.2rem, 2vw, 1.8rem );
      text-align: center
    }

    .decorator-box {
      flex-direction: row;
      height: 80px
    }
  }

  #my_projects {
    .project {
      margin: 0 2vw;
      .content {
        min-width: 100%;

        .links {
          a {
            width: 100%
          }
        }
      }
    }
  }

  #contact_me {
    .link-group {
      flex-direction: column
    }
  }
}

/* ANIMATIONS */

@keyframes heading {
  0% { transform: translateY( -10px ) }
  10%, 90% { transform: translateY( 0 ) }
  100% { transform: translateY( -10px ) }
}

@keyframes img {
  0% { transform: rotateZ( 2deg ) }
  10%, 90% { transform: rotateZ( 0 ) }
  100% { transform: rotateZ( 2deg ) }
}

@keyframes about_me_img {
  0% { transform: scale( 1.2 ) rotateZ( 2deg ) }
  10%, 30% { transform: scale( 1 ) rotateZ( 0 ) }
  40%, 70% { transform: scale( 1.2 ) rotateZ( -2deg ) }
  100% { transform: scale( 1.2 ) rotateZ( 2deg ) }
}

@keyframes contact_me_img_1 {
  0% { transform: scale( 1 ) }
  20%, 40% { transform: scale( .9 ) }
  100% { transform: scale( 1 ) }
}

@keyframes contact_me_img_2 {
  0% { transform: scale( 1 ) }
  40%, 60% { transform: scale( .9 ) }
  100% { transform: scale( 1 ) }
}

@keyframes contact_me_img_3 {
  0% { transform: scale( 1 ) }
  60%, 80% { transform: scale( .9 ) }
  100% { transform: scale( 1 ) }
}