@font-face {
    font-family: 'MyCustomFont';
    src: url('../fonts/Clash_Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal; 
    
  }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }



    .container {
      height:auto;
      position: relative;
    }
    #contentw{
      width: 100%;
      height: fit-content;
    }
#Stats3{
  text-align: center;
font-size: 2.5rem;
/* visibility: hidden; */
}
#Stats3 p{
  /* visibility: hidden; */
  padding: 10px;
  transition: all 0.5s ease-in-out;
}


    .sticky-section {
      position: sticky;
      top: 0;
      height: 100vh;
      background-size: cover;
      background-position: center;
    }
    #panel{
      /* background-color: rgb(127, 247, 247); */
    }

    #part1 {
      
      /* background-color: rgb(127, 247, 247); */
      background: linear-gradient(to bottom, rgba(127, 247, 247, 0), rgb(127, 247, 247));


      
    }
    #cover{
      /* margin-bottom: -9px; */
    }

    #part2 {
      background-color: rgba(0, 0, 0, 0);
    }

    #part3 {
      /* background-color: red; */
      backdrop-filter: blur(8px);
    }
    .waves{
      position: absolute;
    
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      
    }

body {
  height: 100%;
  overflow-x: hidden;
  font-family: 'MyCustomFont', sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* background-color: rgba(127, 247, 247, 0.572),; */
  padding: 0;
}
#part8{
  background-color: #ffffff00;
  /* font-family: ; */
  
}
#Wellcome{
  font-size: 2.4rem;
  color: rgb(0, 183, 255);
}

.page-wrapper {
  position: relative;
  height: 100%;
  /* transform: scale(); */
}
#part5{
  height: 1850px;
}
.animation{
  height: 1800px;
}

.parallax-container {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

.parallax-item {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%,0);
width: 130%;
  height: 60vh;


  will-change: transform;
  white-space: nowrap;
}
    
    .waves::-webkit-scrollbar {
      display: none; 
    }

    body {
      scrollbar-width: none; 
      /* visibility: visible; */
    }

    body::-webkit-scrollbar {
      display: none; 
    }

    .content {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      height: 100vh;
      z-index: 2;
      padding: 50px;
      text-align: center;
      overflow: hidden;
    }

    .content2 {
      position: relative;
      width: 100%;
      height: 100vh;
      z-index: 2;
      padding: 50px;
      text-align: center;
      overflow: hidden;
    }

  .image-container {
  display:inline-block;
  perspective:none;
  width: min-content;
  padding: 1px;
}

.image {
  width: 460px;
  height: 330px;
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.image img {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  backface-visibility: hidden;
}
.info p{
  font-size: 20px;
  font-weight: 600;
  text-align: center;

  /* color: #ffffff; */
}

#Stats{
  font-size: 1.2rem;

}
.sun{
  position: absolute;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(circle, rgb(243, 243, 220) 0%, rgba(255,255,0,0) 70%);
  border-radius: 100%;
  z-index: -1;
 

}

    #Black {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index: 2;

      /* Use a mask to punch a hole through this black layer */
      mask: radial-gradient(circle 150px at var(--x, 50%) var(--y, 50%), transparent 0%, black 100%);
      -webkit-mask: radial-gradient(circle 150px at var(--x, 50%) var(--y, 50%), transparent 0%, black 100%);
      pointer-events: none;
    }

.image .info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 112%;
  color: #ffffff;
  backdrop-filter:blur(8px);
  /* filter: opacity(0.8); */
  
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
p{
  padding: 10px;
  text-align: center;
}

.image:hover {
  
  transform: rotateY(180deg);

}

.image-container {
  position: absolute;
  animation: float 5s ease-in-out infinite;
}

.image-container:nth-child(1) {
  top: 20%;
  left: 5%;
}



.image-container:nth-child(3) {
  top: 60%;
  left: 12%;
}
.image-container:nth-child(2) {
  top: 30%;
  left: 40%;
}
.image-container:nth-child(4) {
  top: 50%;
  left: 70%;
}

.image-container:hover {
  animation-play-state: paused;

}
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}
.Stats2{

}

.container2 { 
  margin: 0 auto;
    z-index: 100;
    font-size: 1.1rem;
    display: grid;
    width:90%;
    height: 100%;
    grid-template-columns: 1.2fr 0.8fr 0.9fr 1.1fr;
    grid-template-rows: 1fr 1fr 0.7fr 1.2fr 1.1fr;
    gap: 10px;
    overflow: hidden;
    grid-auto-flow: row;
    grid-template-areas:
      "Circle1 AboutMe AboutMe ThingICan"
      "Circle2 AboutMe AboutMe ThingICan"
      "Stats Me Me ThingICan"
      "Stats Me Me Stats2"
      "Stats Me Me Stats3";
}

.AboutMe { grid-area: AboutMe; 
  
  
}

.Me { grid-area: Me; 
      }

.Stats { grid-area: Stats;
         }

.ThingICan { grid-area: ThingICan; 
             }

.Stats2 { grid-area: Stats2; 
         }

.Stats3 { grid-area: Stats3; 
          }

.Circle2 { grid-area: Circle2; 
           }

.Circle1 { grid-area: Circle1;
            }
.AboutPanels:not(#Me){
  background-color: #9cfaf4e3;
  box-shadow: 0 0 10px #32c8be;
  color: #ffffff;
  padding: 10px;
  
  border-radius: 20px;
  width: 100%;
  height: 100%;
}
.web_imgs{
  height: 200px
}
#Me img{
  width: 80%;
  height: 100%;
  border-radius: 200%;
  z-index: 4;
  filter: grayscale(1);

}
#Me img:hover{
  filter: grayscale(0);
}

.Ac{
  background-color: greenyellow;
  /* width: 10px; */
  
  border-radius: 6px;
  height: 20px;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 20px;
    background: #ddd;
    border-radius: 4px;
    outline: none;
}

#BarForDrawing{
  width: 70px;

}
#BarForSoccer{
  width: 150px;
}
#BarForGaming{
  width: 120px;
}
#BarForCodind{
  width: 130px;
}
#BarForAtlaticks{
  width: 90px;
}
B#arForMarathons{
  width: 120px;
}
#BarForMusic{
  width: 110px;
}
#BarForReading{
  width: 100px;
}
#BarForDesign{
  width: 140px;
}

#BarForMarathons{
  width: 110px;
}

#BarForCooking{
  width: 100px;
}
#BarForChess{
  width: 80px;
}
/* .total{
  position: absolute;
  width: 100px;
  height: 20px;
  background: #ddd;
} */

#values span{
  margin: 3px;
  display: flex;
  justify-content: space-between;
}
.value{
  display: flex;
  flex-direction: row;
}
#values{
  font-size: larger;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.cards{
   display: none;
    padding: 20px;
    /* background-color: lightblue; */
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    width: 100%;
    height: 100%;
}
.container2{

}

.cards.active {
  display: block;
}

#card4{
 /* background-color: aquamarine; */
}
#card2{
 /* background-color: red; */
}

#card3{
 /* background-color: blue; */
}

#card1{
 /* background-color: orange; */
}
  .stat-card {
    display: none;
    padding: 20px;
  
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 10px;
  }

  .stat-card.active {
    display: block;
  }