.carousel-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
}

.slideshow1 {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.slideshow2 {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.slideshow-wrapper {
  display: flex;
  width: 600%; /* 4 images -> 400% width */
  height: 100%;
  position: relative; /* Ensure keyframes 'left' works */
  left: 0;
  animation: slideshow 20s infinite;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slideshow {
  0%, 10% { left: 0; }
  10%, 20% { left: -100%; }
  20%, 30% { left: -200%; }
  30%, 40% { left: -300%; }
  40%, 50% { left: -400%; }
  50%, 60% { left: -500%; }
  60%, 70% { left: -400%; }
  70%, 80% { left: -300%; }
  80%, 90% { left: -200%; }
  90%, 99% { left: -100%; }
  99%, 100% { left: 0; }
}

.slide-btn {
  background-color: #e9c8c8;
  border-radius: 50%;
  border: .1rem solid #bc3c33;
  width: 0.7rem;
  height: 0.7rem;
  cursor: pointer;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
}

.slidebox { 
	width:200px;
	height:300px;
	position:absolute;
  top: 0px;
	left:750px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
	background-repeat:no-repeat;
	background-size:cover;
}

.slidebox2 { 
	width:200px;
	height:300px;
	position:absolute;
  top: 0px;
	left:1000px;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
	background-repeat:no-repeat;
	background-size:cover;
}

.slidebox{ 
	border:1px solid rgba(0, 0, 0, 1)1px solid rgba(0, 0, 0, 1);
}

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

/* Carousel content positioning */
.carousel-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 50;
}

/* Slideshow styling */
.slideshow {
  height: 100%;
  overflow: hidden;
  position: relative;
  align-items: center;
}

.slideshow-wrapper {
  display: flex;
  width: 600%; /* 4 images -> 400% width */
  position: relative; /* Ensure keyframes 'left' works */
  left: 0;
  animation: slideshow 20s infinite;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.button-1 {
  background-color: rgb(255, 255, 255);
  color: #bc3c33;
  border: #bc3c33;
  cursor: pointer;
  border-radius: 8px;
  width: 100px;
  height: 45px;
  transition: 0.3s;
  padding: 10px;
}
.button-1:hover {
  color: #ffffff;
  background-color: #BC3C33;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  transform: translateY(-2px);
}
.button-1:active {
  box-shadow: none;
  transform: translateY(0);
}

/* Position each button individually */
.slide-btn-1 { left: 29%; }
.slide-btn-2 { left: 37%; }
.slide-btn-3 { left: 45%; }
.slide-btn-4 { left: 55%; }
.slide-btn-5 { left: 63%; }
.slide-btn-6 { left: 71%; }

/* Stop animation when focused on buttons */
.slide-btn-1:focus ~ .slideshow-wrapper { animation: none; left: 0; }
.slide-btn-2:focus ~ .slideshow-wrapper { animation: none; left: -100%; }
.slide-btn-3:focus ~ .slideshow-wrapper { animation: none; left: -200%; }
.slide-btn-4:focus ~ .slideshow-wrapper { animation: none; left: -300%; }
.slide-btn-5:focus ~ .slideshow-wrapper { animation: none; left: -400%; }
.slide-btn-6:focus ~ .slideshow-wrapper { animation: none; left: -500%; }

/* Button focus styling */
.slide-btn:focus {
  background-color: #bc3c33;
}


.container {
  display:flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}

.container img {
  max-width: 100%;
  max-height: 550px;
  align-items: center;
}

.container .text {
  max-width: 60%;
  margin-top: 10px;
  margin-left: 30px;
  align-items: center;
}

.drawer-button {
  display: none;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

details[open] .drawer-button {
  display: block;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 50%;
  background-color: rgb(248,248,248);
}

ul {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #BC3C33;
  padding-left: 30px;
}

h1 {
  font-family: 'Pacifico', cursive;
  font-size: 44px;
  color:#BC3C33
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #bc3c33;
  display: inline-block;
  transform: rotate(-90deg);
  padding-right: 200px;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #bc3c33;
  text-align: center;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #bc3c33;
  padding: 10px;
}

.main {
  justify-content: flex-end;
}

/* Slideshow container */
.slideshow-container {
  max-width: 200px;
  position: relative;
  margin: auto;
  overflow: hidden;
}

/* Slides */
.slides {
  display: none;
  position: relative;
}

/* Image styling */
.slide-image {
  width: 100%;
  height: auto;
  border-radius: 0px;
}

/* Fade effect for slideshow */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

*,
*:after,
*:before {
box-sizing: border-box;
transform-style: preserve-3d;
will-change: transform;
}
:root {
--bg: rgb(248,248,248);
--hover: 0.05;
--default: 0.01;
--limit: 0.9;
--height: 20;
--width: 12;
--depth: 8;
--frame: 1;
--handle: #ccc;
--hue: 10;
--saturation: 0%;
--drawer-one: #fafafa;
--drawer-two: #e6e6e6;
--drawer-three: #f2f2f2;
--unit-one: #9b1f16;
--unit-two: #da847e;
--unit-three: #c5615a;
--unit-four: #BC3C33;
--transition: 0.2s;
}

body {
background: var(--bg);
display: grid;
place-items: center;
height: 100vh;
transform: scale(1.5);
width: 125vh;
align-items: center;
}

.chest {
height: calc(var(--height) * 1vmin);
transform: translate3d(0, 0, 50vmin) rotateX(-32deg) rotateY(40deg);
width: calc(var(--width) * 1vmin);
color: #BC3C33;
}

.chest__panel {
position: absolute;
}
.chest__panel--back {
background: #BC3C33;
}
.chest__panel--back,
.chest__panel--front {
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--depth) * var(--coefficient)));
}
.chest__panel--front-frame {
height: 100%;
width: 100%;
border: calc(var(--frame) * 1vmin) solid var(--unit-one);
border-bottom-width: calc(var(--frame) * 2vmin);
transform: translate3d(0, 0, 0);
}
.chest__panel--front-frame:after,
.chest__panel--front-frame:before {
content: '';
background: var(--unit-one);
height: calc(var(--frame) * 1.5vmin);
width: calc(var(--width) * 1vmin);
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
}
.chest__panel--front-frame:after {
top: calc(100 / 3 * 1.01%);
}
.chest__panel--front-frame:before {
top: calc(100 / 3 * 2.01%);
}
.chest__panel--front {
--coefficient: 0.5vmin;
}
.chest__panel--back {
--coefficient: -0.5vmin;
}
.chest__panel--left,
.chest__panel--right {
height: 100%;
left: 50%;
width: calc(var(--depth) * 1vmin);
background: var(--unit-three);
transform: translate(-50%, 0) rotateY(90deg) translate3d(0, 0, calc(var(--width) * var(--coefficient)));
}
.chest__panel--right {
width: calc((var(--depth) * 1vmin) + 2px);
--coefficient: 0.5vmin;
}
.chest__panel--left {
--coefficient: -0.5vmin;
}
.chest__panel--top,
.chest__panel--bottom {
height: calc(var(--depth) * 1vmin);
width: calc(var(--width) * 1vmin);
background: var(--unit-two);
}
.chest__panel--top {
top: 0;
width: calc((var(--width) * 1vmin) + 0.1vmin);
height: calc((var(--depth) * 1vmin) + 0.1vmin);
left: 50%;
transform: translate(-50%, -50%) rotateX(-90deg);
}
.chest__panel--bottom {
bottom: 0;
transform: translate(0, 50%) rotateX(-90deg);
}
.chest__drawer {
--drawer-height: calc((var(--height) - (5 * var(--frame))) / 3);
position: absolute;
top: var(--top, 0);
left: 50%;
height: calc(var(--drawer-height) * 1vmin);
width: calc((var(--width) - (2 * var(--frame))) * 1vmin);
transform: translate3d(-50%, 0, calc((var(--depth) * 0.5vmin) + 0.01vmin));
}
.chest__drawer[data-position="1"] {
--index: 1;
--top: calc(var(--frame) * 1vmin);
}
.chest__drawer[data-position="2"] {
--index: 2;
--top: calc(((2 * var(--frame)) + var(--drawer-height)) * 1vmin);
}
.chest__drawer[data-position="3"] {
--index: 3;
--top: calc(((3 * var(--frame)) + (2 * var(--drawer-height))) * 1vmin);
}
.drawer__structure {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.drawer__panel {
position: absolute;
}
.drawer__panel--left,
.drawer__panel--right {
width: calc(var(--depth) * 1vmin);
height: 65%;
background: var(--drawer-two);
bottom: 1%;
}
.drawer__panel--left {
left: 0;
transform-origin: 0 50%;
transform: rotateY(90deg);
}
.drawer__panel--right {
right: calc((var(--frame) * 1vmin) + 1px);
right: 0;
transform-origin: 100% 50%;
transform: rotateY(-90deg);
}
.drawer__panel--front {
height: calc((var(--drawer-height) + (0.6 * var(--frame))) * 1vmin);
width: calc((var(--width) - (0.6 * var(--frame))) * 1vmin);
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 1px);
background: var(--unit-four);
}
.drawer__panel--bottom,
.drawer__panel--back {
width: calc(100% - (2vmin * var(--frame)));
width: 100%;
}
.drawer__panel--bottom {
height: calc(var(--depth) * 1vmin);
background: var(--drawer-three);
bottom: 5%;
left: 50%;
transform-origin: 50% 100%;
transform: translate(-50%, 0) rotateX(90deg);
}
.drawer__panel--back {
height: 65%;
background: var(--drawer-one);
bottom: 1%;
left: 50%;
transform: translate3d(-50%, 0, calc(var(--depth) * -1vmin));
text-align: center;
line-height: calc(var(--drawer-height) * 0.65vmin);
font-size: 3vmin;
font-family: sans-serif;
font-weight: bold;
}
.letter {
color: hsl(var(--hue), 80%, 50%);
display: inline-block;
-webkit-animation: wave calc(var(--open) * 1s) calc(var(--delay) * -0.1s) infinite ease-in-out;
        animation: wave calc(var(--open) * 1s) calc(var(--delay) * -0.1s) infinite ease-in-out;
}
.letter:nth-of-type(1) {
--hue: 15;
--delay: 0;
}
.letter:nth-of-type(2) {
--hue: 35;
--delay: 1;
}
.letter:nth-of-type(3) {
--hue: 45;
--delay: 2;
}
.letter:nth-of-type(4) {
--hue: 90;
--delay: 3;
}
.letter:nth-of-type(5) {
--hue: 180;
--delay: 4;
}
.letter:nth-of-type(6) {
--hue: 260;
--delay: 5;
}
.letter:nth-of-type(7) {
--hue: 320;
--delay: 6;
}
details {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
outline: transparent;
}
details:hover:not([open]),
details:hover:not([open]) + .drawer__structure {
--open: var(--hover);
}
details,
.drawer__structure {
transition: transform var(--transition);
transform: translate3d(0, 0, calc((var(--open, var(--default)) * var(--depth)) * 1vmin));
}
details[open],
.drawer__structure[open],
details[open] + .drawer__structure,
.drawer__structure[open] + .drawer__structure {
--open: var(--limit);
}
summary {
outline: transparent;
height: 100%;
width: 100%;
}
summary::-webkit-details-marker {
display: none;
}
summary:after {
content: '';
position: absolute;
background: linear-gradient(var(--handle), var(--handle)) 50% 15%/40% 8% no-repeat, transparent;
height: 110%;
width: 110%;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0.5vmin);
}
@-webkit-keyframes wave {
0%, 100% {
  transform: translate3d(0, 10%, 1px);
}
50% {
  transform: translate3d(0, -10%, 1px);
}
}
@keyframes wave {
0%, 100% {
  transform: translate3d(0, 10%, 1px);
}
50% {
  transform: translate3d(0, -10%, 1px);
}
}