@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Oswald&display=swap');

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

a{
  text-decoration: none;
  color: #222;
}

h1{
  font-family: Oswald;
  font-size: 15vmin;
}

body{
  color: #eee;
  overflow: hidden;
}

.container{
  height: 100vh;
  width: 100vw;
  background: radial-gradient(circle at 50vw 10vh, rgb(224, 172, 223), rgb(86, 96, 176));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.carousel{
  position: relative;
  height: 75vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow{
  position: absolute;
  top: 50%;
  font-size: 2rem;
  right: 7.5vw;
  cursor: pointer;
  width: 3.5rem;
  aspect-ratio: 1/.9;
  display:grid;
  place-content: center;
  border-radius: 50%;
  background: #eeeeee55;
}

.arrow:first-child{
  left: 7.5vw;
}

.arrow:hover{
  color: rgb(86, 96, 176);
  background: #eeeeeedd;
}

.card{
  position: absolute;
  height: 60vmin;
  width: 52vmin;
  transform-origin: bottom;
  transition: transform 1s ease-in-out;
  border: 1vmin solid black;
  background: #eee;
}


.card[data-pos='1']{
  z-index: 1;
}

.card[data-pos='2']{
  z-index: 2;
}

.card[data-pos='3']{
  z-index: 3;
}

.card[data-pos='4']{
  z-index: 4;
}

.card[data-pos='5']{
  z-index: 5;
}

.card[data-pos='6']{
  z-index: 6;
}

.card[data-pos='7']{
  z-index: 7;
}

.card[data-pos='8']{  
  z-index: 8;
}

.card-on-left{
  transform: translateX(calc(-50% - 50vw));
}

.card-on-right{
  transform: translateX(calc(50% + 50vw));
}

.card-centered[data-pos='1']{
  transform: rotate(5deg);
}

.card-centered[data-pos='2']{
  transform: rotate(10deg);
}

.card-centered[data-pos='3']{
  transform: rotate(5deg);
}

.card-centered[data-pos='4']{
  transform: rotate(0deg);
}

.card-centered[data-pos='5']{
  transform: rotate(-5deg);
}

.card-centered[data-pos='6']{
  transform: rotate(-10deg);
}

.card-centered[data-pos='7']{
  transform: rotate(-5deg);
}

.card-centered[data-pos='8']{  
  transform: rotate(0deg);
}

/* anim for moving cards from front to back */

.card[data-pos='9']{
  z-index: 9;
  animation: linear .5s forwards running to-the-back;
}

@keyframes to-the-back{

  25%{
    opacity: 0.75;
  }
  40%{
    transform: translateX(10vw)  rotate(30deg);
    opacity: 0;
    z-index: 9;
  }
  60%{
    transform: translateX(-15vw)  rotate(-45deg);
    opacity: 0;
  }
  75%{
    opacity: 0.75;
    z-index: 1;
  }
  100%{
    transform: translateX(0)  rotate(0);
    opacity: 1;
    z-index: 1;
  }
}

/* anim for moving cards from back to front */

.card[data-pos='0']{
  z-index: 0;
  animation: linear .5s forwards running to-the-front;
}

@keyframes to-the-front{
  25%{
    opacity: 0.75;
  }
  40%{
    transform: translateX(-15vw)  rotate(-45deg);
    opacity: 0;
    z-index: 1;
  }
  60%{
    transform: translateX(10vw)  rotate(30deg);
    opacity: 0;
  }
  75%{
    opacity: 0.75;
    z-index: 9;
  }
  100%{
    transform: translateX(0)  rotate(0);
    opacity: 1;
    z-index: 9;
  }
}

.illustration{
  width: 100%;
  height: auto;
  transition: transform .25s ease-in-out;
}

.name{
  text-align: center;
  font-size: 5vmin;
  font-family: caveat;
}