:root{
  /* --mainColor:#f8f8f8;
  --secondryColor: rgb(21, 21, 21); */
  --mainColor: rgb(21, 21, 21);
  --secondryColor: #f8f8f8;
  --secondryborderColor: 248,248,248;
  --mainborderColor: 21,21,21;
  --opacity:0.1;
  --opacity3:0.3;
  --opacity5:0.5;
}
.loadingover{
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: center;
  width: 100vw;
  height: 100vh;
  background-color: var(--secondryColor);
  z-index: 999999;
  box-shadow: 0 0 100px 145px var(--secondryColor);
}
.about.panel{
  min-height: 100vh !important;
  height: fit-content !important;
}
.about{
  display: flex;
  flex-direction: column;
  background-color: var(--mainColor);
  .abouttitle{
    margin-top: 30px;
    h1{
      color: var(--secondryColor);
      font-size: 18.5rem;
      text-align: center;
      font-weight: 700;
      margin-top: -40px;
      overflow: hidden;
      clip-path: polygon(0 0, 100% 0, 100% 91%, 0 91%);
      user-select: none;
      svg{
        width: 240px;
        position: relative;
        top: 12px;
        left: 0;
        margin-left: 2px;
        margin-right: -6px;
        path{
          fill: #16F4D0;
        }
      }
    }
  }
}
@media (max-width: 1400px) {
  .about{
    .abouttitle{
      margin-top: 45px;
      h1{
        font-size: 13rem;
        svg{
          width: 190px;
          margin-left: 2px;
          margin-right: 0px;
          top: 23px;
        }
      }
    }
  }
}
@media (max-width: 1000px) {
  .about{
    .abouttitle{
      h1{
        font-size: 10rem;
        svg{
          width: 150px;
          margin-left: 3px;
          margin-right: 0px;
          top: 20px;
        }
      }
    }
  }
}
@media (max-width: 800px) {
  .about{
    .abouttitle{
      margin-top: 65px;
      h1{
        font-size: 7rem;
        svg{
          width: 100px;
          margin-left: 4px;
          margin-right: 3px;
          top: 10px;
        }
      }
    }
  }
}
@media (max-width: 600px) {
  .about{
    .abouttitle{
      margin-top: 75px;
      h1{
        font-size: 4rem;
        svg{
          width: 60px;
          margin-left: 4px;
          margin-right: 3px;
          top: 4px;
        }
      }
    }
  }
}
.aboutcontent{
  display: flex;
  flex-direction: column;
  .aboutme{
    color: var(--secondryColor);
    font-size: .9rem;
    letter-spacing: 1px;
    font-weight: 400;
    line-height: 1.4;
    height: 100%;
    width: 75%;
    column-count: 2;
    column-gap: 25px;
    margin-top: 20px;
  }
  .scont{
    padding: 20px;
    border: 1px dashed rgba(var(--secondryborderColor),var(--opacity));
    margin-top: 90px;
    margin-bottom: 70px;
    .aboutskills{
      display: flex;
      flex-direction: column;
      & > span{
        color: var(--secondryColor);
        font-size: 5rem;
        margin-bottom: 30px;
        letter-spacing: 1px;
        font-weight: 500;
        width: 100%;
        padding: 15px;
        clip-path: polygon(0 0%, 100% 0%, 100% 77%, 0 77%);
      }
      .skill.st{
        border-top: 1px dashed rgba(var(--secondryborderColor),var(--opacity3));
      }
      .skill{
        color: var(--secondryColor);
        font-size: 2rem;
        letter-spacing: 1px;
        font-weight: 400;
        line-height: 1.4;
        height: 100%;
        width: 100%;
        padding: 15px;
        position: relative;
        z-index: 1;
        border-bottom: 1px dashed rgba(var(--secondryborderColor),var(--opacity3));
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .bg{
          position: absolute;
          top: 105%;
          left: 0;
          width: 100%;
          height: 105%;
          background-color: var(--secondryColor);
          z-index: -1;
        }
        .skillpop{
          color: var(--mainColor);
          user-select: none;
          padding: 20px;
          font-size: .7rem;
        }
      }
    }
  }
  .contactsection{
    padding-top: 45px;
    padding-bottom: 60px;
    position: relative;
    background-color: var(--secondryColor);
    &::before{
      content: "";
      position: absolute;
      top: 0;
      left: -200%;
      width: 1000%;
      height: 100%;
      background-color: var(--secondryColor);
      z-index: 0;
    }
    .contacttitle{
      margin-bottom: 30px;
      h1{
        color: var(--mainColor);
        letter-spacing: 1px;
        font-weight: 400;
        font-size: 5rem;
        line-height: 1.2;
        text-align: center;
        position: relative;
        z-index: 1;
        clip-path: polygon(0 0%, 100% 0%, 100% 90%, 0 90%);
      }
    }
    .contactlinks{
      position: relative;
      z-index: 1;
      ul{
        display: flex;
        justify-content: center;
        align-items: center;
        li{
          display: flex;
          justify-content: center;
          align-items: flex-start;
          height: 50px;
          margin-top: 10px;
          width: fit-content;
          .btnC{
            border: 1px dashed rgba(var(--mainborderColor), var(--opacity5));
            color: var(--mainColor);
          }
          .buttonhide{
            height: 50px;
            padding: 0 45px;
            clip-path: polygon(0 20%, 100% 20%, 100% 80%, 0 80%);
            .li{
              height:50px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: fit-content;
              font-size: 2rem;
              letter-spacing: 2px;
            }
            .licopy{
              display: flex;
              justify-content: center;
              align-items: center;
              height:50px;
              font-size: 2rem;
              letter-spacing: 2px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1400px) {
  .aboutcontent{
    .aboutme{
      width: 100%;
    }
    .scont{
      .aboutskills{
        span{
          text-align: center;
          font-size: 3.8rem;
          margin-bottom: 15px;
        }
        .skill{
          position: relative;
          justify-content: center;
          align-items: center;
          .skillpop{
            color: var(--mainColor);
            user-select: none;
            margin: 0;
            font-size: .7rem;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            opacity: 0;
          }
        }
      }
    }
  }
}
@media (max-width: 1000px) {
  .aboutcontent{
    .aboutme{
      width: 100%;
      column-count: 1;
      text-align: justify;
      line-height: 1.5;
    }
    .scont{
      .aboutskills{
        span{
          font-size: 3rem;
          margin-bottom: 15px;
        }
      }
    }
  }
}
@media (max-width: 800px) {
  .aboutcontent{
    .aboutme{
      margin-top: 30px;
    }
    .scont{
      margin-top: 60px;
      .aboutskills{
        span{
          font-size: 2.11rem;
          margin-bottom: 15px;
        }
        .skill{
          font-size: 1.5rem;
        }
      }
    }
    .contactsection{
      .contacttitle{
        h1{
          font-size: 2.2rem;
        }
      }
      .contactlinks{
        .buttonhide{
          font-weight: 600;
          .li{
            font-size: 1.4rem !important;
          }
          .licopy{
            font-size: 1.4rem !important;
          }
        }
      }
    }
  }
}
@media (max-width: 600px) {
  .aboutcontent{
    .scont{
      .aboutskills{
        span{
          clip-path: polygon(0 0%, 100% 0%, 100% 80%, 0 80%);
        }
        .skill{
          font-size: 1rem;
          .bg{
            height: 136%;
            top: 129%;
          }
          .skillpop{
            font-size: .6rem;
            padding: 0;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
    .contactsection{
      padding-top: calc(45px / 1.2);
      padding-bottom: calc(60px / 1.2);
      .contacttitle{
        margin-bottom: 20px;
      }
    }
  }
}
@media (max-width: 400px) {
  .aboutcontent{
    .aboutskills{
      & > span{
        font-size: 1.9rem !important;
      }
    }
  }
}
/* footer */
.contact{
  background-color: var(--mainColor);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100vw !important;
  position: relative;
  left: 50%;
  /* border-top: 1px dashed rgba(var(--secondryborderColor),var(--opacity)); */
  transform: translateX(-50%);
  &.panel{
    height: fit-content !important;
    min-height: 0 !important;
  }
  .linkshandle{
    display: flex;
    align-items: flex-start;
    margin-top: 30px;
    ul{
    width: 12%;
    display: flex;
    flex-direction: column;
    padding: 15px;
    &:nth-child(2),&:nth-child(3){
      margin-left: 75px;
    }
    li{
      color: var(--secondryColor);
      &:nth-child(1){
        margin-top: 0;
        padding-top: 0;
        a{
          margin-top: 0;
          padding-top: 0;
        }
      }
      a{
        display: block;
        padding: 7px 0px;
        position: relative;
        font-size: 10px;
        letter-spacing: 2px;
        &::after{
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 1px;
          background-color: var(--secondryColor);
          transition: all 0.3s ease-in-out;
        }
        &:hover{
          &::after{
            width: 20%;
          }
        }
      }
    }
  }
  }
}
@media (max-width: 1400px) {
  .contact{
    &.panel{
      height: fit-content !important;
    }
    .gameouter{
      .contactgame{
        padding: 0 10px 10px;
        height: 85%;
      }
    }
  }
}
@media (max-width: 1000px) {
  .contact{
    .linkshandle{
      ul{
        width: 17%;
      }
    }
  }
  .rights{
    font-size: 10px !important;
  }
}
@media (max-width: 800px) {
  .contact{
    .linkshandle{
      ul{
        width: 140px;
        &:nth-child(2),&:nth-child(3){
          margin-left: 0px;
        }
        &:first-child{
          width: 100px;
        }
      }
    }
  }
}
@media (max-width: 686px) {
  .contact{
    .linkshandle{
      flex-direction: column;
    }
  }
}
@media (max-width: 600px) {
  .contact {
    .gameouter{
      display: none;
    }
    .linkshandle{
      ul{
        width: 100% !important;
        padding-left: 30px;
        &.email{
          li{
            font-size: 15px !important;
          }
        }
        li{
          a{
            font-size: 13px !important;
          }
        }
      }
    }
  }
}

@media (max-width: 1000px) {
  .trail-dot{
    display: none;
  }
}