/* Common Style Code Start */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

:root {
  --headercolor: #242424;
  --footercolor: #1d1d1d;
  --bodycolor: rgb(41, 48, 74);

  --containercolor: rgba(249, 249, 249, 0.915);
  --bordercolor: rgba(216, 216, 216, 0.848);
  --cont-containercolor: blue;
  --hero-sec-textcolor: linear-gradient(
    180deg,
    rgba(252, 110, 74, 0.948),
    rgba(249, 137, 72, 0.959)
  );

  --button-backgroundcolor: #7b0bae;
  --imagebackgroundcolor: #e1d8d9;
  --activeNav: rgb(208, 152, 12);
  --navHover: rgb(194, 194, 194);
}

html {
  font-size: 62.5%;
}

html, body{
  scroll-behavior: smooth;
}

body {
  background: var(--bodycolor);
  overflow-x: hidden;
}

@keyframes animateScaleBigSmall {
  form {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
    translate: 0 1rem;
  }
}

/* Common Style Code End */

/* Header Section Code */
header {
  height: 10dvh;
  width: 100vw;
}

.navbar {
  height: 10dvh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--headercolor);
  box-shadow: 0 0rem 5rem 0 rgba(37, 37, 37, 0.781);
  padding: 0 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  z-index: 10;
  & logo {
    display: flex;
    align-items: center;
  }
}

.logo img {
  height: 6rem;
  width: 6rem;
  @media (width <=430px) {
    height: 10rem;
    width: 10rem;
  }
}


.navbar ul {
  list-style-type: none;
  display: flex;
  gap: 1rem;
}

.navlink {
  text-decoration: none;
  font-weight: 500;
  margin: 1rem 4rem;
  border-radius: 1rem;
  color: rgb(234, 234, 234);
  font-size: 2rem;
  position: relative;
}

@media (width <= 430px){
  .navlink{
    font-size: 2.9rem;
  }
}

.navlink::after {
  content: "";
  position: absolute;
  bottom: -0.7rem;
  left: 0;
  background-color: var(--navHover);
  height: 0.4rem;
  width: 0;
  border-radius: 10%;
  transition: width ease-in 250ms;
}

.navlink:hover::after {
  width: 100%;
}

.active-navlink {
  font-weight: 700;
  color: var(--activeNav);
}

.active-navlink::after {
  content: "";
  position: absolute;
  bottom: -0.7rem;
  left: 0;
  color: var(--activeNav);
  background-color: var(--activeNav);
  height: 0.4rem;
  width: 100%;
  border-radius: 10%;
}

/* Header Section Code End */

/* Main Section Code Start */

/* Main -> Home Section */
.hero {
  height: 100dvh;
  width: 100vw;

  
  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  /* margin-top: 10vh; */
  
  @media (width <=430px){
    height: 80dvh;
    width: 100vw;
  }

  & .intro {
    height: 30rem;
    width: 35rem;

    @media (width <= 430px) {
      height: 60rem;
      width: 70rem;
    }
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;

    & .main-section-intro {
      color: rgb(228, 225, 225);
      font-size: 3rem;
      @media (width <= 430px) {
        font-size: 5rem;
      }
    }

    & h1 {
      font-size: 4rem;
      font-weight: 800;
      color: var(--hero-sec-textcolor);
      background: var(--hero-sec-textcolor);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      @media (width <= 430px) {
        font-size: 8rem;
      }
    }

    & .main-section-desc {
      font-size: 2rem;
      font-weight: 500;
      color: rgb(237, 244, 244);
      @media (width <= 430px) {
        font-size: 4rem;
        text-align: center;
        line-height: 6rem;
      }
    }
  }

  & .image {
    height: 45rem;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    animation: animateScaleBigSmall 2s ease-in-out infinite alternate;
    filter: drop-shadow(0rem 0rem 2rem rgba(239, 179, 68, 0.688));

    @media (width <= 430px) {
      height: 70rem;
      aspect-ratio: 1;
    }

    & .imageplaceholder {
      height: 40rem;
      width: 40rem;
      z-index: 3;
      @media (width <= 430px) {
        height: 70rem;
        width: 70rem;
      }

      border-radius: 50%;
      border: 0.5rem solid rgb(251, 251, 251);
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url("image.png");
      background-size: cover;
      box-shadow: 0 0 0 0.7rem rgb(13, 169, 73),
        0 1rem 4rem 1rem rgba(63, 63, 63, 0.211);
    }
  }
}

/* Main -> Home section End */

/* Main -> Notes section Start */
.my-notes-class {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  .container {
    min-height: 50rem;
    width: 70rem;
    margin-top: 15vh;
    animation: animateScaleBigSmall 2s ease-in-out infinite alternate;
    @media (width <= 430px) {
      min-height: 120rem;
      width: 80rem;
    }
    background-color: var(--containercolor);
    box-shadow: 0 0.5rem 2rem 0 rgba(28, 26, 26, 0.412);
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    @media (width <= 430px) {
      gap: 8rem;
      padding: 2rem;
    }

    & .notes-label {
      display: flex;
      justify-content: center;
      font-size: 4rem;
      font-weight: 600;
      margin-top: 2rem;
      color: rgb(46, 45, 45);
      border-bottom: 2px solid rgb(83, 81, 81);

      @media (width <= 430px) {
        font-size: 7rem;
        padding: 3rem 0;
      }
    }
  }

  .semesters-note {
    min-height: 36rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: start;
    flex-wrap: wrap;
    gap: 2rem;

    &:last-child {
      margin-bottom: 3rem;
    }

    & a {
      height: 5rem;
      width: 30rem;
      font-size: 2.5rem;
      @media (width <= 430px) {
        font-size: 4rem;
        height: 8rem;
        width: 60rem;
      }
      font-weight: 500;
      background-color: rgb(67, 199, 251);
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      box-shadow: 0 0.5rem 0.5rem 0 rgba(53, 53, 53, 0.588);
    }

    & a:hover {
      color: white;
      background-color: black;
      transition: all 0.3s ease-in-out;
    }

    & a:active {
      color: white;
      background-color: rgb(56, 55, 55);
      transition: all 0.3s linear;
    }
  }
}

/* Main -> Notes Section End */

/* Main -> About Me Section Start */
.aboutme {
  height: 100vh;
  width: 100vw;

  display: flex;
  justify-content: center;
  align-items: center;
  animation: animateScaleBigSmall 2s ease-in-out infinite alternate;


  & .about-me-container {
    min-height: 50rem;
    width: 80rem;
    margin-top: 10vh;
    background-color: var(--containercolor);
    box-shadow: 0 0.5rem 1rem 0 rgba(28, 26, 26, 0.332);
    border-radius: 2rem;
    padding: 0 5rem;
    display: flex;
    text-align: justify;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & h2 {
      display: block;
      text-align: center;
      justify-content: center;
      align-items: center;
      margin-bottom: 2.5rem;
      margin-top: 2rem;
      font-size: 3rem;
      font-weight: 800;
      width: 100%;
      border-bottom: 2px solid rgb(83, 81, 81);

      @media (width <= 430px) {
        font-size: 5rem;
        margin-bottom: 5rem;
      }
      color: rgb(46, 45, 45);
    }

    & p {
      font-size: 1.9rem;
      padding: 0.5rem 0;
      line-height: 2.5rem;

      @media (width <= 430px) {
        font-size: 2.8rem;
        line-height: 5rem;
      }

      & .highlighter {
        font-size: 2.5rem;
        display: block;
        margin-bottom: 1rem;
        font-weight: 400;
        @media (width <= 430px) {
          font-size: 4rem;
        }
      }
    }

    & .about-me-thanks {
      display: flex;
      font-weight: 500;

      justify-content: right;
      margin-top: 2rem;
      margin-bottom: 2rem;
      font-size: 2rem;

      @media (width <= 430px) {
        font-size: 3rem;
      }
    }
  }
}
/* Main -> About Me Section End */

/* Main -> Contact Me Section Start */
.my-contact-me {
  height: 100vh;
  width: 100vw;

  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10vh;

  & .form {
    height: 50rem;
    width: 50rem;
    
    margin-top: 15vh;
    animation: animateScaleBigSmall 2s ease-in-out infinite alternate;
    @media (width <= 430px) {
      height: 100rem;
      width: 80rem;
    }

    background-color: var(--containercolor);
    box-shadow: 0 0.5rem 1rem 0 rgba(28, 26, 26, 0.332);
    border-radius: 2rem;
    padding: 2rem 5rem;
    display: flex;
    flex-direction: column;
    font-size: 2rem;

    & .contact-me {
      height: 1rem;
      width: 40rem;
      font-size: 3rem;
      font-weight: 700;
      color: rgb(46, 45, 45);
      display: block;
      text-align: center;
      margin-bottom: 4rem;
      @media (width <= 430px) {
        font-size: 6rem;
        height: 8rem;
        width: 70rem;
        margin: 4rem 0;
      }
    }

    & label {
      font-size: 2rem;
      @media (width <= 430px) {
        font-size: 4rem;
        height: 4rem;
        width: 70rem;
      }
    }

    & #name,
    #email {
      font-size: 1.5rem;
      height: 7rem;
      width: 40rem;
      padding: 1rem 1.5rem;
      border: 0.1rem solid rgb(106, 103, 103);
      border-radius: 0.5rem;
      margin-bottom: 1rem;

      @media (width <= 430px) {
        font-size: 3rem;
        height: 10rem;
        width: 70rem;
        padding-left: 2rem;
        margin: 1rem 0 5rem 0;
      }
    }

    & #message-me {
      font-size: 1.5rem;
      width: 40rem;
      height: 30rem;
      padding: 1rem 2rem;
      border: 0.1rem solid rgb(96, 94, 94);
      border-radius: 0.5rem;
      margin-bottom: 3rem;

      @media (width <= 430px) {
        font-size: 4rem;
        height: 30rem;
        width: 70rem;
        padding: 2rem;
        margin: 1rem 0 5rem 0;
      }
    }

    & .buttons button {
      height: 4rem;
      width: 13rem;
      border-radius: 0.5rem;
      border: none;
      background-color: hsl(214, 82%, 47%);
      color: rgb(239, 235, 235);
      font-size: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;

      @media (width <= 430px) {
        font-size: 4rem;
        height: 8rem;
        width: 24rem;
        padding: 2rem;
        margin: 1rem 0 5rem 0;
        border-radius: 1rem;
      }

      &:hover {
        background-color: rgb(0, 89, 206);
        color: rgb(242, 239, 239);
        scale: 1.06;
        transition: scale ease 200ms;
      }

      &:active {
        background-color: rgb(100, 153, 223);
        color: rgb(242, 239, 239);
        scale: 0.99;
        transition: scale ease 200ms;
      }
    }

    & .buttons {
      display: flex;
      justify-content: end;
      gap: 2rem;
    }
  }
}

/* Main -> Contact Me Section End */

/* Main Section Code End */

/* Footer Section Code Start */

footer {
  height: 10vh;
  width: 100%;
  background-color: var(--footercolor);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  & .copyright {
    font-size: 1.5rem;
    color: white;

    @media (width<=430px) {
      font-size: 3rem;
    }
  }

  & .social-media ul {
    display: flex;
    list-style-type: none;
    gap: 2rem;
    margin-top: 0.5rem;
    font-size: 2.5rem;

    @media (width<=430px) {
      font-size: 5rem;
      gap: 3rem;
    }

    & a {
      color: white;

      &:hover {
        color: rgb(106, 229, 245);
      }
      &:active {
        color: rgb(176, 177, 176);
      }
    }
  }
}

/* Footer Section Code End */

/* Media Queries Section */

@media (width<=1050px) {
  html {
    font-size: 50%;
  }
}

@media (width<=430px) {
  html {
    font-size: 26%;
  }
  .hero {
    flex-direction: column;

    & .intro {
      align-items: center;
    }
  }
}

/* Media Queries Section End */




/* latest css code... for improvement start */
.about-me-container .my-project-heading{
  font-size: 1.8rem;
  font-weight: 600;
  color: rgb(46, 45, 45);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.about-me-container ul{
  list-style-type: square;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 0.4rem;
  padding-left: 2rem;
  margin-left: 2rem;

  & li {
    font-size: 1.5rem;

    & span {
      font-weight: 400;
      color: rgb(46, 45, 45);
    }

    & a {
      color: rgb(50, 50, 50);
      margin-left: 1rem;
      font-size: 1.9rem;

      &:hover {
          color: rgb(14, 12, 12);
      }
      &:active {
        color: rgb(127, 127, 127);
      }
    }
  }
}


/* latest css code... for improvement end */