/* Bounce animation*/
.pulse-seq {
  transition: opacity 0.5s ease;
  opacity: 1;
}

.bounce-active {
  animation: bounce 1s infinite;
  opacity: 1;
}

.bounce-inactive {
  opacity: 1;
  animation: none;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

/* Style for the typewriter effect */
#typewriter {
            font-size: 2rem;
            font-weight: 500;
            color: #000;
        }

.dark #typewriter {
            font-size: 2rem;
            font-weight: 500;
            color: white;
            
            /* gray-200 */
        }

.dark .highlight {
            font-size: 2.5rem;
            color: #f59e0b;
            /* amber-400 */
            font-weight: 700;
        }

.highlight {
            font-size: 2.5rem;
            color: #b45309;
            /* amber-400 */
            font-weight: 700;
        }


/* Style for the projects */
.dark .project-image {
                        width: 100%;
                        height: 200px;
                        object-fit: contain;
                        margin-bottom: 1rem;
                        background-color: #1f2937;
                        padding: 0.5rem;
                        border-radius: 0.5rem;
                        
                    }

 .project-image {
                        width: 100%;
                        height: 200px;
                        object-fit: contain;
                        margin-bottom: 1rem;
                        background-color: none;
                        padding: 0.5rem;
                        border-radius: 0.5rem;
                
                    }                  


/* Style for the toggle button */
button.mdn-dark-button {
  background-color: #333;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 0.5em 1em;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

button.mdn-dark-button:hover,
button.mdn-dark-button:focus {
  background-color: #444;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  outline: none;
}

button.mdn-dark-button:active {
  background-color: #222;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}