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

body {
   font-size: 24px;
   font-family: "Times New Roman", Times, serif;
   text-align: center;
   background-color: #333;
   color: wheat;
   height: 100vh;
   width: 100vw;
   display: flex;
   align-items: center;
   /* justify-content: center; */
   flex-direction: column;
   overflow: hidden;
   user-select: none;
}

.wrapper {
   position: relative;
   width: 10rem;
   /* height: 9rem; */
   height: 30%;
   transform-style: preserve-3d;
   transform: perspective(1000px) rotateY(0deg);
   transition: transform 1.7s;
   /* border: solid 3px blue; */
}

.wrapper span {
   position: absolute;
   top: 2rem;
   left: 0;
   /* transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px); */
   /* I put the above in the script in order to calculate the deltaAngle if there are only a fewe images avoids seeing the back of the images */
   /* border: solid 4px white; */
   /* border: solid 3px white; */
}

.wrapper span img {
   width: 10rem;
   height: 8rem;
   cursor: pointer;
   object-fit: fit;
}

h1 {
   /* position: absolute;
   top: 0.4rem; */
   font-size: 1.5rem;
}

.buttons {
   position: absolute;
   bottom: 0.1rem;
   width: 80%;
   z-index: 1000;
}

.btn:hover {
   filter: brightness(1.5);
}
.btn {
   border-radius: 50%;
   background-color: blue;
   color: wheat;
   cursor: pointer;
   font-size: 2rem;
   font-weight: bolder;
}

#next {
   margin-left: 20%;
   padding: 0.2rem 0.9rem 0.2rem 0.5rem;
}

#prev {
   margin-right: 20%;
   padding: 0.2rem 0.5rem 0.2rem 0.9rem;
}

.card-headings {
   background-color: rgb(0, 0, 0);
   color: wheat;
   font-size: 1.1rem;
   font-weight: bold;
   cursor: pointer;
   user-select: none;
}