.blink {
    animation: blink 1s linear infinite;
}

@keyframes blink{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.pulse {
  animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes pulse {
  from {
    opacity: 0.5;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.05);
  }
}

.shake {
    animation: shake .5s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
  75% {
    transform: translateX(-10px);
  }
}

.slide-in {
    animation: slide-in 1s ease-in-out;
}

@keyframes slide-in {
    from {
        scale: 300% 1;
        translate: 150vw 0;
    }

    to {
        scale: 100% 1;
        translate: 0 0;
    }
}

    <div class="typewriter">
      <div>
          <p>Typerwriter Animation</p>
      </div>
    </div>

    .typewriter{
        display: flex;
        justify-content: center;
    }

    .typewriter p {
        overflow: hidden;
        font-size: 1.5rem;
        font-family: monospace;
        border-right: 1px solid;
        margin-inline: auto;
        white-space: nowrap;
        /* The cursor will inherit the text's color by default */
        /* border-color: red */                
        /* Steps: number of chars (better to set directly in js)*/
        animation: typing 3s steps(21) forwards,
        blink 1s step-end infinite;
    }

    @keyframes typing{
        from{
            width: 0%
        }
        to{
            width: 100%
        }
    }

    @keyframes blink{
        50%{
            border-color: transparent;
        }
    }

.button {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.1s;
}

.button:active {
  transform: translateY(2px);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

.button {
 font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,;
 background: #0a85ff;
 color: #fff;
 padding: 8px 12px;
 border: none;
 margin: 4px;
 border-radius: 10px;
 cursor: pointer;
 box-shadow: inset 0 1px 1px #fff2, 0px 2px 3px -2px rgba(0, 0, 0, 0.3) !important; /*This is really performance heavy*/
 font-size: 14px;
 display: flex;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.button:hover {
 background: #0974ee;
 color: #fff
}

.blur-background {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.5);
}

.glow {
  background-color: #f39c12;
  padding: 10px 20px;
  border-radius: 5px;
  transition: box-shadow 0.3s ease;
}

.glow:hover {
  box-shadow: 0 0 15px rgba(243, 156, 18, 0.8);
}

.card {
  height: 300px;
  width: 200px;
  border-radius: 5px;
  overflow: hidden;
}

.card img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: all 0.3s;
  transition-duration: 200ms;
  cursor: pointer;
}

.card:hover img {
  filter: grayscale(0%);
  scale: 1.05;
}

.yourElement {
    /* Your Elements styles go here*/
    border-style: solid;
    border-radius: 10px;
    color: rgb(0, 0, 0);

}
.yourElement:hover {

    animation: change-color;
    animation-duration: 0.5s;         /* you can alter the duration of the animation here. */
    animation-iteration-count: infinite;         /* Choose to play animation infinitely or once on hover. */
}

@keyframes change-color {
    0% {
        border-color: red;
    }

    50% {
        border-color: green;
    }

    100% {
        border-color: blue;
    }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

.columns {
  display: flex;
  justify-content: space-between;
}

.column {
  flex: 1;
  margin: 0 10px;
}

.grid-container {
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Explanation:
- `auto-fit`: Automatically fits as many columns as possible within the container.
- `minmax(250px, 1fr)`: Defines a minimum column size of 250px and a maximum size of 1fr (fraction of available space).
*/
}

/* Phone */
.element {
  margin: 0 10%
}

/* Tablet */
@media (min-width: 640px) {
  .element {
    margin: 0 20%
  }
}

/* Desktop base */
@media (min-width: 768px) {
  .element {
    margin: 0 30%
  }
}

/* Desktop large */
@media (min-width: 1024px) {
  .element {
    margin: 0 40%
  }
}

/* Desktop extra large */
@media (min-width: 1280px) {
  .element {
    margin: 0 60%
  }
}

/* Desktop bige */
@media (min-width: 1536px) {
  .element {
    margin: 0 80%
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}

p {
  letter-spacing: 0.05em;
}

h1 {
  font-size: calc(1.5rem + 2vw);
}