@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500;600;700;800;900&display=swap");
/*#8C2B4F  #D95988   #F299C2    #ffd9e9   #260517     #A9B9D9*/

:root {
  --clr-dark: #260517;
  --clr-pastel-pink: #ffd9e9;
  --clr-light-pink: #f299c2;
  --clr-bg-light: rgba(245, 216, 227, 0.25);
  --clr-bg-dark: #361e274a;
}

.dark-mode {
  --clr-pastel-pink: #260517;
  --clr-dark: #ffd9e9;
  --clr-bg-dark: rgba(245, 216, 227, 0.25);
  --clr-bg-light: #361e274a;
}
.light-mode {
  transition: all 0.3s linear;
}

html {
  scroll-behavior: smooth;
}

body {
  background: -moz-linear-gradient(
    57deg,
    rgba(242, 153, 194, 1),
    rgba(115, 187, 201, 1)
  );
  background: -webkit-linear-gradient(
    57deg,
    rgba(242, 153, 194, 1),
    rgba(115, 187, 201, 1)
  );
  background: -o-linear-gradient(
    57deg,
    rgba(242, 153, 194, 1),
    rgba(115, 187, 201, 1)
  );
  background: linear-gradient(300deg, rgb(205, 71, 134), rgb(70, 183, 205));
  background-size: 100% auto;
  animation: gradient-animation 10s ease infinite;
  font-family: "Poppins", sans-serif;
  color: var(--clr-dark);
  overflow-x: visible;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 0%;
  }
}
.logo {
  width: 100%;
}
.logo-back {
  width: clamp(5vw, 35vw, 50vw);
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -58%);
  z-index: -1;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.intro {
  height: 100vh;
  flex-direction: column;
}

.header {
  flex: 0 1 30vw;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr 1fr;
  padding: 0 30px;
  background: var(--clr-bg-light);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(4.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.card {
  /* color: #fce9f1; */
  height: auto;
  background: var(--clr-bg-light);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(4.5px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 10px;
  margin: 10px;
  font-weight: 300;
}
.edu-exp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

/* Define distinct background colors for each grid item */

.education {
  justify-content: flex-start;
  grid-area: 2 / 1 / 3 / 2;
}
.experience {
  justify-content: flex-start;
  grid-area: 1 / 2 / 3 / 3;
}

.courses-certifications-contact {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.courses,
.certifications,
.contact {
  justify-content: flex-start;
  height: 85%;
}

.skills {
  grid-area: 1 / 1 / 2 / 2;
}
.other {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.other ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.other .card {
  list-style-type: none;
  width: fit-content;
  font-weight: 800;
}
.card h2 {
  font-weight: 700;
}
hr {
  border: 1px solid #73bbc9;
}
.container hr {
  border: 1.5px solid #73bbc9;
  width: 100%;
  grid-column: span 2;
}
.name {
  font-size: 4.5vw;
}
.about {
  text-align: justify;
  font-size: 2.02vw;
}
.header h1,
h2 {
  margin: 0;
  padding: 0;
  font-weight: 800;
}
.intro p {
  font-weight: 600;
  width: 300px;
  height: 30px;
  grid-column: span 2;
  padding: 0;
  padding-bottom: 6px;
  margin: 30px 0;
  text-align: center;
  cursor: pointer;
  color: #260517;
}

.intro p:hover {
  .scroll-animation {
    animation: loop-animation 2s ease infinite;
  }
}

.card p {
  font-weight: 500;
  text-align: justify;
}

.about-container {
  grid-area: 1/2/3/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20px;
}
.profile-container {
  grid-area: 1/1/3/2;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: relative;
}
.scroll-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: relative;
  padding: 0px;
  margin: 0px;
}

.scroll-container p {
  color: #9fe9f9;
  filter: drop-shadow(0 0 6px rgb(0, 0, 0));
}

svg {
  /* fix position down by 5px */
  position: relative;
  top: 5px;
}
.scroll-animation {
  animation: loop-animation 2s ease-out infinite;
}
@keyframes loop-animation {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.profile {
  float: left;
  width: 15vw;
  border-radius: 50%;
  padding: 30px 0;
}

.card > p {
  margin: 0;
  text-align: justify;
}
.card > h2 {
  margin: 0 0 10px 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0 0 0 30px;
}
li {
  padding: 0 0 5px 0;
}

ul > li > h4 {
  margin: 0;
  padding: 0;
}
li > p {
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
}

ul > li > ul {
  padding-left: 20px;
  font-size: 0.9rem;
}

a {
  color: #00c5ff;
  text-decoration: none;
}

.ring-back,
.ring-front {
  position: absolute;
  width: 10vw;
  height: 17vw;
  border-radius: 50%;
  border: 4px solid #07aaca;
  box-sizing: border-box;
  rotate: 30deg;
  animation: frame-animation 3.5s ease-in-out infinite;
}

.ring-back {
  z-index: -1;
  clip-path: inset(0 0 0 50%);
}

.ring-front {
  z-index: 2;
  clip-path: inset(0 50% 0 0);
}

/* Circular Frame */
/* .frame2 {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  border: 4px solid #07aaca;
  width: 13vw;
  height: 13vw;
  box-sizing: border-box;
} */

@keyframes frame-animation {
  0% {
    transform: rotateZ(0deg) rotateY(-45deg);
  }
  100% {
    transform: rotateZ(360deg) rotateY(45deg);
  }
}

.darkmode-btn {
  background-color: transparent;
  border: 0;
  position: fixed;
  z-index: 2;
  top: 30px;
  right: 30px;
  cursor: pointer;
  transition: all 0.3s;
}
.darkmode-btn .button-shadow {
  z-index: 2;
  position: absolute;
  filter: blur(10px);
  right: 6px;
}

.animate {
  transform: rotate(180deg);
}
.darkmode-btn img {
  width: 40px;
}

@media (min-width: 1300px) {
  .skills {
    grid-area: 1 / 1 / 2 / 2;
  }
  .education {
    grid-area: 2 / 1 / 3 / 2;
  }
  .experience {
    grid-area: 1 / 2 / 3 / 3;
    /* grid-row: auto; */
    /* padding-bottom: 28px; */
  }
}

@media (max-width: 900px) {
  /* .header {
    flex: 0 1 30vw;
    padding-right: 10px;
  } */
  /* .profile {
    width: 100px;
  } */
  /* .name {
    font-size: 2rem;
  }
  .about {
    font-size: 0.9rem;
  } */
  .ring-back,
  .ring-front {
    border-width: 2px;
    height: 80%;
  }
  /* .frame2 {
    border-width: 0.5vw;
  } */
  .edu-exp {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .skills {
    grid-area: span 1;
  }

  .education {
    grid-area: span 1;
  }
  .experience {
    grid-area: span 1;
  }
}
@media (max-width: 560px) {
  .name {
    font-size: 1.7rem;
  }
  .about {
    font-size: 0.8rem;
  }
  .about-container {
    margin-left: 10px;
  }
  .logo-back {
    width: 200px;
    transform: translate(-50%, -66%);
  }
  .courses-certifications-contact {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .profile {
    width: 18vw;
  }
  /* .frame2 {
    width:  15vw;
    height: 15vw;
  } */
  .ring-back,
  .ring-front {
    border-width: 2px;
    height: 70%;
    width: 60%;
  }
}