:root {
  --highlight-color: #1cbdfa;
  --main-color: #012b56;
}

.overlay {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(14 14 14/0.2);
  backdrop-filter: blur(4px);
}

.character-name {
  color: #fff;
  font-size: 5vw;
  width: 40%;
  margin: auto;
  clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
  text-transform: uppercase;
  background-color: var(--highlight-color);
  top: 5%;
}

:is(.character-name, .character-speed)::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: -1;
  inset: 50% 50% auto auto;
  transform: translate(50%, -50%);
  width: 98.5%;
  height: 92%;
  background-color: var(--main-color);
  clip-path: inherit;
}

.character-speed {
  top: 4.8%;
  width: 30%;
  margin: auto;
  background-color: var(--highlight-color);
  clip-path: polygon(5% 100%, 95% 100%, 100% 0, 0 0);
  font-size: 4vw;
}

.back-btn {
  position: absolute;
  left: 3%;
  top: 5%;
  width: 10%;
}

.character-highlight{
  position: absolute;
  z-index: 10 !important; 
  width: 30%;
  object-fit: contain;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.7;
}

/* 
Slider Stylesheet
*/

.slider-container { 
  z-index: 10;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 60%;
  border-radius: 0.5em;
  padding: 0 5%;
  user-select: none; 
  z-index: 100 !important;
}

.slider-content {
  width: 85%;
  margin: auto;
  overflow: hidden;
}

.slider-container .btn {
  height: 20%;
  position: absolute; 
  z-index: 50;
  left: -15%;
  top: 50%;
  transform: translateY(-50%);
  object-fit: contain;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.slider-container .prev-btn {
  top: 38%;
  transform: scale(-1);
}
.slider-container .next-btn {
  left: unset;
  right: -15%; 
}

.slider {
  width: 100%;
  height: 80%;
  white-space: nowrap;
  transition: all 800ms ease;
  left: 0; 
  margin-top: 15%; 
}
 
.slider .character {
  --slider-img-size: 100%;
  height: var(--slider-img-size);
  width: var(--slider-img-size);
  object-fit: contain;
}

.avatar{ 
  height: 20%;
  top: 38%; 
  width: 10%;
  object-fit: contain;
}

@media screen and (min-aspect-ratio: 4/3) {
  .character-name {
    font-size: 5vh;
  }
  .character-speed {
    font-size: 4vh;
  }
}