*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}

:root{
    --primaryColor: #FFD700;
    --themeColor: #012429;
    --headerColor: #002B31;
    --paragraphColor: #ffffff;
    --borderColor: #104a46;
    --fontColor: white;
    --projectTagColor: #ffffff1c;
    --boxColor: #0e3b38;
    --anchorColor: white;
    --secondaryColor: #002b2e;
    --btnActiveColor: #887200;
    --skillBgColor: #003135;
    --skillFontColor: #231E00;
    --educationBoxParaColor:#FFFFB5;
    --educationCircleBgColor: #0E3B38;
    --educationStrokeBgColor: #109C26;
    --educationMatricStrokeColor: #00FE29;
    --educationInterStrokeColor: #77fe00;
    --educationUniStrokeColor: #00FE29;
    --btnHoverColor: #dbb700;
    --btnTextColor: #695900;
    --headerLinkHoverColor: #FFD700;
    --inputPlaceHolderColor: #f5f5c077;
    --skillHtmlColor: #00FF11;
    --skillCssColor: #00FF11;
    --skillJavascriptColor: #00FF11;
    --skillReactColor: #00FF11;
    --skillApiColor: #00FF11;
    --skillFigmaColor: #77FF00;
    --skillGitColor: #00FF11;
    --skillNodeJsColor: #BFFF00;
    --skillMySqlColor: #77ff00;
    --skillTypescriptColor: #77FF00;
    --skillMongoColor: #D9FF00;
    --skillPythonColor: #00FF11;
    --skillEventColor: #7BFF00;
    --skillPresentationColor: #44FF00;
    --skillPromptColor: #51FF00;
    --skillProblemColor: #2BFF00;
    --skillTeamColor: #00FF11;
    --moveBtn: #0e4b4b;
   --hrColor: white;
   --downMenuColor: #0a3a3e;
    

}


i{
  transition: all 0.3s ease; 
  cursor: pointer;

}

button{
  transition: all 0.3s ease;
}

button:hover{
  background-color: var(--btnHoverColor);
  scale: 1.05;
}
i:hover {
  scale: 1.05;
}
.animate {
  animation: fadeIn 2s ease-in-out;
}
body{
    font-family: "Poppins", sans-serif;
  
    
}

::-webkit-scrollbar{
  display: none;
}
@layer base {
  h1 {
    @apply text-3xl font-bold sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl;
    color: var(--fontColor);
  }
  
  h2 {
    @apply text-2xl font-bold sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl;
    color: var(--fontColor);
  }

  h3 {
    @apply text-xl font-semibold sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl;
    color: var(--fontColor);
  }

  h4 {
    @apply text-lg font-semibold sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl;
    color: var(--fontColor);
  }

  h5 {
    @apply text-base font-medium sm:text-lg md:text-xl lg:text-2xl xl:text-3xl;
    color: var(--fontColor);
  }

  h6 {
    @apply text-sm font-medium sm:text-base md:text-lg lg:text-xl xl:text-2xl;
    color: var(--fontColor);
  }

  p {
    @apply text-base lg:text-lg;

    color: var(--paragraphColor);
  }

  a{
    @apply text-base lg:text-lg;
    color: var(--anchorColor);
  }
}

 .stroke {
  background: linear-gradient(to bottom, var(--educationStrokeBgColor) 10%, var(--educationMatricStrokeColor) 10%);

}


.interCircle{
  background: linear-gradient(to bottom, var(--educationStrokeBgColor) 30%, var(--educationInterStrokeColor) 10%);
}

.uniCircle{
  background: linear-gradient(to bottom, var(--educationStrokeBgColor) 20%, var(--educationUniStrokeColor) 10%);
}

.active {
  color: var(--headerLinkHoverColor); /* Change to your desired active color */
  text-decoration: underline; /* Optional: Add underline or other styles */
}

.glaree {
  position: relative;
  overflow: hidden;
  border: none;

}

.glare::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 60px;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.064) 50%,
    rgba(255, 255, 255, 0.466) 100%,
    rgba(255, 255, 255, 0.413) 100%
  );
  transform: rotate(35deg);
  animation: buttonAnimation 2s linear infinite;
  pointer-events: none;
}

@keyframes buttonAnimation {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}