@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
}

:root{
    font-family: Raleway;
    --palMorado:#783C9D;
    --palAzul:#318D8D;
    --palVerde:#C3C544;
    --palNaranja:#EB9151;
    --palAmarillo:#E1CF08;
    --palRojo:#E10E08;

    --palCrema:rgb( 249, 248, 245 );
    --palNegroAzul:rgb( 82, 89, 123 );
}

html {
    background-color: var(--palCrema);
    color: var(--palNegroAzul);
}

.carouselContainer {
  width: 60%;
  height: 60%;
  margin: 0 auto;
  position: relative;
  background-color: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
}
.carouselImgs {
  width: 100%;
  height: 100%;
  animation: fade 1.5s;
  display: none;
  padding: 20px;
  text-align: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
}
.prev, .next {
  position: absolute;
  top: 49%;
  cursor: pointer
}
.prev { left: 10px; }
.next { right: 10px; }
.slide1 { background-color: rgb( 249, 248, 245 ); }
.slide2 { background-color: rgb( 249, 248, 245 ); }
.slide3 { background-color: rgb( 249, 248, 245 ); }
.slide4 { background-color: rgb( 249, 248, 245 ); }


@keyframes fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}