html {
  font-family: "Roboto", sans-serif;
  box-sizing: border-box;
}

.container-app-1:hover {
  .app-left-1 {
    color: white;
    background-color: rgba(91, 57, 128, 0.8);
  }
  background-color: rgb(246, 246, 246);
}
.app-text-1:hover {
  color: rgb(123, 87, 164);
  text-decoration: underline;
  cursor: pointer;
}

.app-text-2:hover {
  color: rgb(62, 150, 50);
  text-decoration: underline;
  cursor: pointer;
}
.app-text-3:hover {
  color: rgb(52, 122, 168);
  text-decoration: underline;
  cursor: pointer;
}
.app-text-4:hover {
  color: rgb(223, 179, 0);
  text-decoration: underline;
  cursor: pointer;
}

.app-text-5:hover {
  color: #d91953;
  text-decoration: underline;
  cursor: pointer;
}

.container-app-2:hover {
  .app-left-2 {
    color: white;
    background-color: rgb(62, 150, 50, 0.8);
  }
  background-color: rgb(246, 246, 246);
}
.container-app-3:hover {
  .app-left-3 {
    color: white;
    background-color: rgb(52, 122, 168, 0.8);
  }
  background-color: rgb(246, 246, 246);
}

.container-app-4:hover {
  .app-left-4 {
    color: white;
    background-color: rgb(223, 179, 0, 0.8);
  }
  background-color: rgb(246, 246, 246);
}

.container-app-5:hover {
  .app-left-5 {
    color: white;
    background-color: rgb(217, 25, 83, 0.8);
  }
  background-color: rgb(246, 246, 246);
}

@keyframes wiggle {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
@keyframes ping-slow {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes ping-slower {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-wiggle {
  animation: wiggle 0.6s infinite;
}
.animate-ping-slow {
  animation: ping-slow 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.animate-ping-slower {
  animation: ping-slower 2.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse-strong {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}
.animate-pulse-strong {
  animation: pulse-strong 1.2s ease-in-out 0s infinite normal none running;
}
@keyframes rotate-shake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(6deg); }
}
.animate-rotate-shake {
  animation: rotate-shake 1.2s ease-in-out infinite;
  transform-origin: center;
}