body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  transition: background-color 0.3s ease;
  background-color: #060606;
  color: rgb(229, 229, 229);
}

body.dark-mode {
  background-color: #ffffff;
  color: #323232;

}
#timer {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 17vw;
        transition: font-size  0.6s ease; 
        
        &:after {
          position: absolute;
          content: '';
          top:140px;
          left: 0;
          right: 0;
          z-index: -1;
          height: 10%;
          width: 60%;
          margin: 0 auto;
          filter: blur(75px);
          transform: scale(1.3);
          background: linear-gradient(90deg, #ffbf0f, #0ff7ff, #7e0fff);
          background-size: 200% 200%;
          animation: animateGlow 10s ease infinite;
          
          @keyframes animateGlow {
            0%  {
              background-position: 0% 50%
            }
            
            50% {
              background-position: 100% 50%
            }
            
            100% {
              background-position: 0% 50%
            }
          }
        }
}

#timer :hover{
  animation: smallerFontAnimation 0.5s ease;
}


#icon {
        font-size: 5em;
      }

 #theme-toggle {
  mix-blend-mode: difference;
  color: #bbbbbb;
  font-family: 'Space Grotesk', sans-serif;
  position: absolute;
  top:  0px;
  right: 10px;
   margin-top: 20px;
   padding: 10px 15px;
   cursor: pointer;
   border: none;
   border-radius: 60px;
   background-color: #292929;
}

#reset-timer {
  mix-blend-mode: difference;
  color: #bbbbbb;
  font-family: 'Space Grotesk', sans-serif;
  position: absolute;
  top: 0px;
  left: 10px;
   margin-top: 20px;
   padding: 10px 15px;
   cursor: pointer;
   border: none;
   border-radius: 60px;
   background-color: #292929;
}


div {
  position: relative;
 
}

input {
  mix-blend-mode: difference;
  width: 50px;
  text-align: center;
  margin: 0 5px;
  background: #1e1e1e;
  border: #ffffff;
  color: #bbbbbb;
  padding: 10px;
  border-radius: 25px;

}

.timer.bigger-font {
  animation: biggerFontAnimation 0.5s ease;
}

.timer.smaller-font {
  animation: smallerFontAnimation 0.5s ease;
}

@keyframes biggerFontAnimation {
  from {
    font-size: 280px;
  }
  to {
    font-size: 300px; /* Adjust the desired bigger font size */
  }
}

@keyframes smallerFontAnimation {
  from {
    font-size: 280px;
  }
  to {
    font-size: 150px; /* Adjust the desired smaller font size */
  }
}


#footer-text{
  width: 95%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  height: 20px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  color: #7a7a7a;
}

.section1{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container{
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 97vh;
  transition: background-color 0.3s ease;
}

.icon-group{
  background-color:var(--text-col);
  padding:10px 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 25px;
  border-radius: 15px;

  & a{
      text-decoration: none;
      color: var(--BG-col);
      transition: .5s;

      &:hover{
          scale: 150%;
          transition: .5s;
      }
  }

}

.section2{
  position: relative;
}

.section3{
  position: absolute;
  bottom:-25px;
  left: 32%;
}