/* #region FUENTES */

@font-face {
    font-family: "Chalet";
    src: url("../fonts/Chalet.otf");
}

/* #endregion */

/* #region GENERAL */
::selection {
    background: #bcf19a;
    color: #1a2a1a;
}

::-moz-selection {
    background: #ffffff;
    color: #1a2a1a;
}

body {
    color: #f2f2f2;
}

body::before {
    background-image: url("../images/main/background_V.webp");
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    transform: scale(1.1);
    z-index: -1;
}

#rightContent::before {
    background: linear-gradient(90deg, #a3bd7c, #b475efd9);
}

.block {
    background: #036512c3;
    box-shadow: 0px -60px 500px 100px #37ab408e;
    border: 5px solid #96fbc3af;
}

#container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.text-container {
    justify-content: left;
    align-items: left;
}

.text-container h2 {
    font-family: "Chalet";
    color: rgba(93, 182, 229, 255);
    font-size: 34px;
    text-align: center;
    text-shadow: 3px 3px 1px #000000;
}

.right-content-nav a {
    font-family: "Chalet";
    font-size: 28px;
}

.right-content-nav a.active {
    color: rgba(93, 182, 229, 255);
    text-shadow: 0 0 2px #000;
    cursor: default;
}

.right-content-nav a.inactive {
    color: rgba(93, 181, 229, 0.189);
}

.right-content-nav a.inactive:hover {
    color: #5db5e5;
    text-shadow: 0 0 1px #000;
    transition: color 0.1s;
}

.right-content-nav a.inactive:active {
    color: rgb(59, 145, 191);
}

/* #endregion */

/* #region FICHA TÉCNICA */
.ficha-tecnica {
    border-color: #d9ff92 !important;
    background-color: #1c9a595e;

    & table {
        & tr {
            border-color: #d9ff92f8;
        }
    }
}

.ficha-tecnica th,
span.table-platforms {
    font-family: "Chalet";
    text-shadow: 2px 2px #000;

}

span.table-platforms {
    color: #5db5e5;
}

/* #endregion */

/* #region 100% CHECKLIST */
.progress-wrapper {
    & .progress-bar-bg {
        & .progress-bar-fill {
            background: linear-gradient(90deg, #a0f2f8, #a5ffa4,#ffa85d);
        }
    }
}

.checklist-container {
    & article {
        & .section-header {
            & .section-check-all {
                &.complete {
                    color: #d6fa88;

                    & svg {
                        stroke: #88fac5;
                        filter: drop-shadow(0 0 5px #79ffce);
                    }
                }
            }
        }

        & .checklist-list-wrapper {
            & ul {
                & li {
                    &.completed {
                        background: rgba(18, 116, 101, 0.422);
                        border-color: rgba(45, 205, 175, 0.25);
                    }

                    & .checklist-row {
                        & label {
                            & input {
                                &:checked {
                                    &+span {
                                        background: #80d7ff;
                                        border-color: #83ffff;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* #endregion */

/* #region LOGROS */
.achievement-selector button {
    background: #5db5e5c2;
    color: #f2f2f2;
    text-shadow: 1px 1px #000;
}

/* #endregion */

/* #region RADIO */

.v-radio-wheel {
    position: relative;
    width: 600px;
    height: 550px;
}

.v-radio-wheel .radio-image {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: rotate(calc(var(--i) * 14.4deg)) translate(260px) rotate(calc(var(--i) * -14.4deg));
    transform-origin: center;
    opacity: 0.6;
    filter: saturate(0%);
    transition: opacity 0.3s;
}

.radio-image:hover {
    opacity: 1;
    filter: saturate(100%);
    outline: 3px solid #4a6eb3;
    border-radius: 100%;
    cursor: pointer;
}

.radio-image.selected {
    outline: 3px solid #4a6eb3;
    border-radius: 100%;
    filter: saturate(100%);
    opacity: 1;
}

.v-radio-center {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 20px;
    color: white;
    text-shadow: 2px 2px 5px #000;
    z-index: 10;
    pointer-events: none;
    text-wrap: nowrap;
}

#radioText {
    font-family: "Chalet", sans-serif;
}

/* #endregion */