.App {
  text-align: center;
  align-items: center;
  flex-direction: column;
  display: flex;
  height: 100vh;
  background-color: #1c1f24;
  overflow: hidden;
  justify-content: center;
  }

.App-header {
  /* background-color: #5b606b; */
  position: relative;
  min-width: 60vw;
  text-align: center;
  font-size: calc(8px + 2vmin);
  color: white;
  margin-bottom: 20px;
  max-width: 800px;
  margin: auto;
  padding: 20px;
}
h1 {
  color: #61aefb;
}
/* Media query for smaller screens */
@media screen and (max-width: 768px) {
  .App-header {
    font-size: 16px; /* font size for smaller screens */
    padding: 10px; /*padding for smaller screens */
  }
}


.App-link {
  color: #61dafb;
}

  @-webkit-keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-250px * 7));
    }
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-250px * 7));
    }
  }


  .slider .slide-track {
    -webkit-animation: scroll 30s ease linear infinite;
            animation: scroll 30s linear infinite;
    display: flex;
    width: calc(250px * 14);

  justify-content: space-between;

  }

  .slider .slide {
    height: 400px;
    width: 350px;
    margin: 15px;
    border: none;
    transform: rotate(3deg);
    transition: transform 0.3s ease, border-radius 0.3s ease;
  }

  .slide-track .slide:hover {
    transform: scale(1.05) rotate(0deg);
    border-radius: 10px;
  }

  /* Media query for smaller screens */
@media screen and (max-width: 768px) {
  .slider .slide-track {
    width: 100%;
  }
}

/*
.info {
    background-color: #5b606b;
    position: relative;
    text-align: center;
    font-size: calc(4px + 2vmin);
    color: white;
    max-width: 800px;
    margin: auto;
    padding: 20px;
} */
