:root {
  --angle: 45deg;
  --color1: #00f5ff;  
  --color2: #4d4dff;  
  --color3: #ae52d4;  
  --color4: #ff87ca;
  --body-bg: #FDFDFD;
  --body-text-color: #000;
  --section-box-shadow: #282828;
  --bg-increment: #191919;
  --color-code: #6A6A6A;
  --nav-bg: #CBCBCBB0
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none
}
body{
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--body-bg);
  color: var(--body-text-color);
}
.container{
  width: max(95%,100.dvw);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow-x: hidden
}
.tab-container{
display: flex;
justify-content: center;
margin: auto;
margin-top: 1rem;
background: #008EFF;
width: auto;
}
.tab-container button{
  background: #008EFF;
  color: #fff;
  border: 1px solid #008EFF;
  transition: all 0.4s linear;
  padding: 0.66rem 1.2rem;
  font-size: 0.9rem
}
.content-rgb,.content-hexa,.content-hsla{
  background: #DFDFDF17;
  margin: 0.9rem;
  padding: 0.9rem;
  display: none;
  flex-direction: column;
  justify-content: center;
  backdrop-filter: blur(5);
 gap: 1.3rem;
 border-radius: 1rem;
 animation: fade-show 0.9s;
 transition: all 1s linear;
 box-shadow: 0px 0px 10px var(--section-box-shadow);
}
.increment,.decrement{
   border: none;
   font-size: 1.5rem;
   border-radius: 50%;
   padding: 0.3rem;
   background: var(--bg-increment);
   font-weight: 500;
   color: var(--body-bg);
   width: 15%;
   height: 15%;
   transition: color 0.4s ease
 }
 .red,.blue,.green,.alpha,.hue,.saturation,.lightness{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.4rem
 }
.content-rgb h1,.content-hexa h1,.content-hsla h1 {
  text-align: center;
  color: #0077FF;
  border-bottom: 3px double;
  padding-bottom: 0.4rem;
}
input[type="range"]{
  width: 80%;
  appearance: none;
  background: linear-gradient(90deg,#FF0000,#FF4F00,#FFBC00,#FFEF00,#08FF00,#00FFE9,#00A2FF,#0051FF,#2200FF,#9700FF,#F800FF,#FF00B2);
  height: 0.5rem;
  border-radius: 0.7rem;
}
.color-preview{
  width: 100%;
  border: 1px solid var(--body-text-color);
  aspect-ratio: 15/4;
  border-radius: 0.3rem
}
.copy{
 position: relative;
 background: rgba(128, 128, 128, 0);
 border: none;
 width: 1.1em;
 height: 1.1em;
 margin-right: 0.5rem;
 margin-bottom: 0.5rem;
}
.copy-svg{
  width: 2.2rem;
  height: 2.2rem;
}
.copy svg{
  transition: all 0.3s linear;
}
.copied{
  position: absolute;
  display: none;
  right: 2.2rem;
  top: 72%;
  background: #949494;
  font-weight: bolder;
  transition: all 0.3s linear;
  border-radius: 0.4rem;
  padding: 0.2rem;
}
.copy:hover svg{
 stroke: none;
 fill: #0090FF
}
.copy:hover ~ .copied{
  display: block;
}
.color-code-rgb,.color-code-hexa,.color-code-hsla{
  width: 100%;
  background: var(--color-code);
  border-radius: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  box-sizing: border-box;
  color: var(--body-bg);
}
.color-rgb,.color-hexa,.color-hsla{
  font-size: 1rem;
  text-align: center;
  padding: 0.5rem;
  
}
/* Thumb styling for WebKit browsers (Chrome, Safari) */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
background-color: #EB0000; 
cursor: pointer;
 }
 /* Thumb styling for Firefox */
input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #EB0000;
cursor: pointer;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
.decrement:hover{
  color: #ff0000;
}
.increment:hover{
  color: #007d00ff;
}
.active{
  display: flex;
}
button.active-btn{
   color: #008EFF;
  background-color: #fff
}
.header{
  position: relative;
} 
.header-itm{
  display: flex;
  justify-content: space-between;
}
.navigation-item{
  width: 30%;
  height: 100vh;
  height: 100dvh;
  background: var(--nav-bg);
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  backdrop-filter: blur(5px);
  display: none;
 box-shadow: 2px 2px 5px var(--section-box-shadow);
 transition: all 0.5s ease
}
.nav-ul{
  list-style: none;
}
.nav-item{
  margin-bottom: 1rem;
}
.nav-link,.nav-btn{
  text-decoration: none;
  padding: 0.4rem 0.5rem;
  font-size: 1.1rem;
  display: flex;
  justify-content: center;
  background: var(--body-bg);
  color: var(--body-text-color);
  margin-top: 2.2rem;
  transition: all 0.4s linear;
  border: none;
  width: 100%;
}
.nav-link:hover, .nav-btn:hover{
  background: #009DFF;
  color: #031C28;
  box-shadow: 2px 0px 5px var(--section-box-shadow);
}
.nav-link:hover{
  text-decoration: underline
}
.hambergur-btn{
  background: #00000000;
  border: none;
  width: 9%;
  height: 1.6rem;
  position: relative;
  z-index: 99999;
  transition: all 0.4s ease-in;
  margin-top: 0.8rem;
  margin-left: 0.3rem;
}
.show{
  display: block;
  transition: display 0.4s linear;
}
.menu{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: all 0.4s linear
}
.menu span{
  width: 100%;
  height: 15%;
  background: var(--body-text-color);
  border-radius: 1rem;
  transition: all 0.4s linear
}
.menu.open .line1 {
  transform: rotate(45deg) translate(5px, 1px);
}
.menu.open .line2 {
  opacity: 0;
}
.menu.open .line3 {
  transform: rotate(-45deg) translate(11px,-7px);
}
.logo {
  font-family: 'Exo', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  background: linear-gradient(var(--angle), var(--color1), var(--color2), var(--color3), var(--color4));
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: BlazeText 4s ease infinite;
  transition: background 1.5s ease;
  text-decoration: none;
  margin-top: 0.2rem;
}
.cont {
 display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 2rem;
  fill: #A5A5B0;
  cursor: pointer;
  top: 0;
  left: -2rem;
}
.cont .moon {
  position: absolute;
  animation: keyframes-fill .5s;
}
.cont .sun {
  position: absolute;
  display: none;
  animation: keyframes-fill .5s;
}
/* ------ On check event ------ */
.cont input:checked ~ .moon {
  display: none;
}
.cont input:checked ~ .sun {
  display: block;
}
.cont input {
  display: none;
}
@keyframes keyframes-fill {
  0% {
    transform: rotate(-360deg) scale(0);
    opacity: 0;
  }

  75% {
    transform: rotate(25deg);
  }
}
footer{
  position: relative;
  bottom: 0;
  text-align: center;
  background: #A1A1A1;
  width: 100%;
  height: auto;
  color: #0093FCF0;
}
.social{
  width: 100%;
}
.pic{
  width: 50px;
  margin-left: 20px;
}
#copyright {
  background: #E2BEBE;
 margin-top: 15px;
 font-size: 1rem
}
.follow{
  color: #FFED00;
  padding: 5px;
  font-size: 1.1rem
}

/* setting tab styles*/
.settings{
      width: 95%;
      margin: 0 auto;
      padding: 0.5rem;
      border: 1px solid var(--body-text-color);
      border-radius: 0.5rem;
      box-shadow: 0 0 0.4rem var(--section-box-shadow);
    }
.zoom-section{
      display: flex;
      gap: 1rem
    }
#zoom,#angle,#font-size{
      appearance: none;
      height: 0.4rem;
      border-radius: 0.3rem;
      width: 100%;
      margin-top: 0.5rem;
      background: #208CFF;
      }
 #zoom::-webkit-slider-thumb,#angle::-webkit-slider-thumb,#font-size::-webkit-slider-thumb {
        appearance: none;
        width: 1rem;
        height: 1rem;
        background: red;
     transition: transform 0.4s ease-in;
     border-radius: 50%
      }
.color-selection{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem
}
.add-more{
  padding: 0.3rem;
  font-size: 1rem;
  background: #008EFF;
  border: none;
  color: #FDFDFD;
  transition: all 0.4s ease;
  border-radius: 0.2rem;
  width: 30%
}
.add-more:hover{
  box-shadow: 0 0 0 0.2rem #3AB7FF91;
  color: #008EFF;
  background: #FDFDFD
}
.color-add{
  gap: 1rem;
  display: flex
}
.one-color-select, .gradient-bg-select {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  opacity: 0; 
  transition: opacity 0.5s ease-in;
  height: auto;
  overflow: auto
}
#static:checked ~ .one-color-select {
  opacity: 1; 
  flex-direction: row;
}
#gradient:checked ~ .gradient-bg-select {
  opacity: 1;
  flex-direction: column;
}
#static, #gradient{
  appearance: none;
}
#static ~ label, #gradient ~ label{
  background: #FF1111;
  padding: 0.3rem;
  border-radius: 0.2rem;
  transition: all 0.5s ease-in
}
#static:checked ~ label, #gradient:checked ~ label{
  background: #fff;
  color: #FF1111
}
.head{
  display: flex;
  gap: 2rem;
  justify-content: space-between
}
.text-setting{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem
}
.color-add{
  display: flex;
  flex-direction: column;
  gap: 1rem
}
    .color-added{
      display: grid;
    gap: 1rem;
    grid-template-columns: repeat(5, 1fr);
    width: 100%
    }
    .preview{
      width: 2.5rem;
      height: 2.5rem;
      position: relative;
      border: 0.3rem solid #3D3D3D;
      border-radius: 50%
    }
    .cross{
      border: none;
      background: transparent;
      font-size: 1.3rem;
      position: absolute;
      top: -0.3rem;
      left: 1.8rem;
      color: #fff;
      transition: all 0.4s
    }
    .cross:hover{
      color: #FF0000
    }
    .error-msg{
      color: #FF0000 !important;
      width: 100%;
      height: 2.5rem;
      text-align: center;
    }
    .radial-type{
      flex-direction: column;
      gap: 0.4rem;
      display: flex
    }
    .angle-div{
      display: none
    }
    h1,h2,h3{
      text-align: center
    }
.reset{
  background: transparent;
  border: none;
} 
.reset svg{
  stroke: var(--body-text-color)
}
/* tab toggling styles*/
.tabContent{
  display: none;
  transition: all 0.5s;
}
.tabContent.active{
  display: block;
}
.nav-btn.active{
background: #009DFF;
  color: #031C28;
  box-shadow: 2px 0px 5px var(--section-box-shadow);  
}
/* dark mode color */
body.dark-mode{
  --body-bg: #020202;
  --body-text-color: #fff;
  --section-box-shadow: #E9E9E9;
  --bg-increment: #F1F1F1;
  --color-code: #D9D9D9;
  --nav-bg: #474747A1
}
/* Cool blaze animation */
@keyframes BlazeText {
  0% { 
    --angle: 0deg;--color1: #00f5ff;--color2: #4d4dff;--color3: #ae52d4;--color4: #ff87ca;}
  50% {
    --angle: 180deg;--color1: #ae52d4;--color2: #00f5ff;--color3: #ff87ca;--color4: #4d4dff;}
  100% {
    --angle: 360deg;--color1: #ff87ca;--color2: #ae52d4;--color3: #4d4dff;--color4: #00f5ff;
  }
}
@keyframes fade-show{
  0%{
  opacity: 0.1;
  }
  50%{
    opacity: 0.8;
  }
  100%{
   opacity: 1;
  }
}
@media screen and (min-width:950px) {
  .increment,.decrement{
    width: 90px;
    height: 90px;
    font-size: 2rem
  }
  .copied{
    top: 45%
  }
  .hambergur-btn{ 
    width: 4%;
  }
  .logo{
    margin-right: 35rem;
    font-size: 2.7rem;
  }
  .div-more{
    width: 20%;
    height: 5vh;
    height: 5dvh;
  }
}