App.css

.App {
  width: 100%;
  min-height: 100vh; 
  background: #121026;
  display: flex;
  flex-direction: column; 
}

.App-content {
  display: flex;
  flex: 1; 
  overflow: auto;
  
}

.App-footer {
  width: 100%;
  height: 100px;
  background: #19162c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  padding: 0 10px;
  z-index: 1000;
}

.App::-webkit-scrollbar {
  display: none;
  color: #19162c ;
}

@media only screen and (max-width: 525px) {
  .App-content {
    flex-direction: column;
  }
}
/* Animations */
.fromTop{
  animation: slideTop 1s ease forwards;
}
.fromLeft{
  animation: slideLeft 1s ease forwards;
}
.fromRight{
  animation: slideRight 1s ease forwards;
}
.fromBottom{
  animation: slideBottom 1s ease forwards;
}
.zoomIn{
  animation: zoomIn 1s ease forwards;
}

@keyframes slideRight {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideLeft {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideTop {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideBottom {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}