@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

html, body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  background: #000;
  font-size: clamp(16px, 3.3vw, 64px);
}

section {
  width: 100vw;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.carousel {
  width: 100vw;
  height: 80vh;
  gap: -10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
  -webkit-overflow-scrolling: touch;
}

.carousel-slide {
  position: relative;
  flex: 0 0 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  scroll-snap-align: center;
  overflow: hidden;
}

.carousel-slide img {
  position: absolute;
  left: 0;
  width: 150%;
  height: 100%;
  object-fit: cover;
}

h2 {
  position: relative;
  margin: 0;
  color: #19f7ff;
  font-size: 1.8rem;
}

h5 {
  position: relative;
  margin: 1% 0 0 0;
  font-size: 1rem;
  color: red;f4e3c0
  font-weight: 50;
  letter-spacing: 0.3px;
}

h7 {
  position: relative;
  margin: 0,5% 0 0 0;
  font-size: 0.5rem;
  font-weight: 100;
  letter-spacing: 0.3px;
}

menuleft { 
  position: absolute;
  top: 1vh;
  left: 0;
  margin: 0 0 0 0;
  font-family: soleil, sans-serif;
  font-size: 0.25rem;
  color: white;
  font-weight: 300;
  letter-spacing: 0.5px;
}

menuright { 
  position: absolute;
  top: 1vh;
  right: 0;
  margin: 0 0 0 0;
  font-family: soleil, sans-serif;
  font-size: 0.25rem;
  color: white;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.carousel-nav {
  display: none; /* displayed in the JS */
  position: absolute;
  width: 100%;
}

.carousel-nav button {
  cursor: pointer;
  border: none;
  font-size: 3rem;
  position: absolute;
  aspect-ratio: 1.5;
  width: 7vw;
  max-width: 75px;
  height: auto;
  max-height: 3.7vh;
  background-color: transparent;
  background-size: cover;
  overflow: visible;
  background-image: url("data:image/svg+xml,%3Csvg stroke='%23fff' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 1 22 15'%3E%3Cpath d='M2,11 11,2 20,11'/%3E%3C/svg%3E");
}

.prev {
  transform: translateY(-50%) rotate(-90deg);
}

.next {
  transform: translateY(-50%) rotate(90deg);
  right: 0;
}

.carousel-nav div {
  position: absolute;
  top: 40vh;
  width: 100%;
  text-align: center;
  color: #fff;
  font-weight: 200;
  opacity: 0.5;
  letter-spacing: 0.25rem;
  font-size: clamp(22px, 3.9vw, 44px);
}

/* Simplify the scroll bar appearance */
::-webkit-scrollbar {
  height: 13px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-top: 6px solid #000;
  background: #555;
  width: 50%;
}

::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}
@charset "UTF-8";
/* CSS Document */