:root
{
    --negro-demon: #000000;
    --blanco-demon: #FFFFFF;
}

.fondo-demon
{
    background-color: var(--negro-demon);
}

.navbar
{
    border-bottom: 4px solid gray;
}

footer
{
    background-color: var(--negro-demon);
}

.btn-navbar
{
    border: 3px,solid, var(--blanco-demon);
    border-radius: 10px;
    background-color: var(--negro-demon);
    color: var(--blanco-demon);
}

img {
    user-select: none;
}

/* BANNER */
.content p {
    font-size: 1.7vw !important;
    line-height: 120%;
    @media (max-width: 767px) {
        font-size: 5vw !important;
        line-height: 100%;
    }
}
.content img {
    filter: drop-shadow(0.5vw 0.5vw 0 black);
    @media (max-width: 767px) {
        filter: drop-shadow(2vw 2vw 0 black);
    }
}

.carousel-img-wrapper
{
    max-width: 600px;
    margin: 0 auto;
}

.carousel-image-frame {
    display: inline-block;
    border-width: 3px;
    border-style: solid;
    border-color: white;
}

.carousel-item {
    text-align: center;           /* center inline-block */
}

.carousel-image {
    display: block;               /* removes inline gaps */
    max-height: 525px;
    min-height: 200px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.border-color-demon{
    border-color: var(--negro-demon);
}

.pb-10 {
    padding-bottom: 10rem !important;
    @media (max-width: 767px) {
        padding-bottom: 3rem !important;
    }
}
.px-4-and-a-half {
    @media (max-width: 767px) {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

.nav-link {
    font-size: 2.3vw !important;
    @media(max-width: 764px) {
        font-size: 6vw !important;
    }
}

.platform-banner i { /* Tamaño de los iconos de consolas */
    font-size: 300% !important;
}
.navbar, .platform-banner
{
    border-bottom: 6px solid;
}

/* MARCO PARA LAS IMAGENES EN MECHANICS */
.mechanics-dj-frame
{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    position: relative;

    border: 3vw solid transparent;
    border-image-source: url('../../Resources/screamer_streamers/backgrounds/seagreen_frame_sqr.webp');
    border-image-slice: 30%;
    @media (max-width: 767px) {
        border: 5vw solid transparent;
        border-image-source: url('../../Resources/screamer_streamers/backgrounds/seagreen_frame_sqr.webp');
        border-image-slice: 30%;
    }
}
.mechanics img {
    display: none;
}

/* CHARACTERS-SECTION */
.char-bg {
    z-index: 10; /* Atrás del char */
}
.char { /* El personaje */
    position: relative;
    z-index: 20;
}
.char-fg {
    z-index: 30; /* Enfrente del char */
}

.separator {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100vw;
    overflow: hidden;
    z-index: 1;
    @media (max-width: 767px) {
        transform: translate(-50%, -45%) scale(2);
        max-width: 100vw;
        left: 0;
    }
}

#contact::before,
.characters-section::before,
.characters-section::after,
.trailer-section::before,
.trailer-section::after,
.levels-section::before,
.levels-section::after {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 0;
    pointer-events: none;
}

.mechanics h2{
    font-size: 3vw;
    text-align: center;
    position: relative;
    z-index: 5;
    text-align: center;
    z-index: 10;
}
.mechanics p{
    position: relative;
    font-size: 2.5vw;
    line-height: 90%;
    text-align: center;
    z-index: 10;
}
.mechanics img {
    user-select: none;
}
.board-tr, .board-br, .board-tl, .board-bl {
    user-select: none;
}

.char-info p {
    font-size: 2.8vw;
    line-height: 90%;
    @media (max-width: 576px) {
        font-size: 4.5vw;
    }
}
.char-info h2 {
    font-size: 3rem;
}

.mechanics-dj-frame
{
        border: 3vw solid transparent;
}

@media (max-width: 767px) {
    .mechanics h2 {
        font-size: 6vw;
        line-height: 100%;
    }
    .mechanics p {
        font-size: 5.5vw;
        line-height: 100%;
    }

    .char-info h2 {
        font-size: 6vw;
    }
    .char-info p {
        font-size: 10vw;
        line-height: 80%;
    }

    .mechanics-dj-frame {
        border: 5vw solid transparent;
    }
}

@media (max-width: 576px){
    .char-info h2 {
        font-size: 2rem;
    }
    .char-info p {
        line-height: 85%;
        font-size: 6vw;
        margin-bottom: 0;
    }
}

h1, h2, h3, h4, h5, h6, p {
    paint-order: stroke;
}

.mechanics-dj-frame > img {
    position: absolute;
    height: auto;
}
.carousel-ornament {
    display: none;
}
#levelsCarousel {
    position: relative;
    z-index: 300;
}
.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel-inner {
    z-index: 20;
}
[data-bs-target="#levelsCarousel"] {
    z-index: 25;
}

/* PARA CAMBIAR LOS FLECHAS DEL CARROUSEL */
.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    --flecha: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e";
}
[data-bs-target="#levelsCarousel"] {
    opacity: 1;
}
[data-bs-target="#levelsCarousel"] > span {
    --spanSize: 7vw;
    width: var(--spanSize);
    height: var(--spanSize);
    @media (max-width: 767px) {
        --spanSize: 13vw;
    }
}

/* REDUCIR TAMAÑO DEL HOVER EN CARRUSEL */
.carousel-control-next,
.carousel-control-prev {
  pointer-events: none;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
  pointer-events: auto;
}
.carousel-control-prev, .carousel-control-next {
    z-index: 350;
}
.carousel-control-prev-icon {
    background-image: url(var(--flecha));
    opacity: 1;
}
.carousel-control-prev-icon:hover {
    background-image: url(var(--flecha));
}
.carousel-control-next-icon {
    background-image: url(var(--flecha));
    opacity: 1;
}
.carousel-control-next-icon:hover {
    background-image: url(var(--flecha));
}