/* FONTS */
@font-face {
    font-family: "Rodondo";
    src: url(resources/Rodondo.otf) format("OpenType");
}

.rw-title {
    font-family: "Rodondo";
    font-size: 6rem;
    text-align: center;
    line-height: 75%;
    width: 100%;
}

.rw-bigtext {
    font-family: 'Segoe UI';
    font-size: 1.3125rem;
    font-weight: 600;
}

.rw-text {
    font-family: 'Segoe UI';
    font-size: 1rem;
    font-weight: 600;
}

/* RW BUTTON START */
@keyframes border-blinker {
    50% {
        border-color: rgba(255, 255, 255, 255);
    }
}

@keyframes flasher {
    0% {
        background-color: #A9A4B2;
        /* menu lightgray */
    }
}


/* RW UI START */

/* BUTTON */
button.rw-ui {
    appearance: none;
    cursor: pointer;
    position: relative;
    border-radius: 8px;
    border: 2px solid #A9A4B200;
    /* alpha 0 for fading */
    box-sizing: border-box;
    /* correctness */
    width: 100%;
    height: 100%;
    margin: 0px;
    color: #A9A4B2;
    /* menu lightgray */
    transition: color 0.3s;
}

    button.rw-ui:hover {
        animation: border-blinker 0.8s linear infinite, flasher 0.3s;
        color: white;
    }

    button.rw-ui::before {
        /* outline that expands */
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin: -2px;
        /* undo parent border */
        border-radius: 8px;
        border: 2px solid #A9A4B2;
        /* menu lightgray */
        transition: padding 0.3s, border-color 0.3s, margin 0.3s;
    }

    button.rw-ui:hover::before {
        border-color: white;
        padding: 4px;
        margin: -6px;
    }

    button.rw-ui:active::before {
        border-color: white;
        padding: unset;
        margin: -2px;
    }

/* BUTTON END */

/* TOGGLES */
input[type='checkbox'].rw-ui,
input[type='radio'].region-radio,
input[type='radio'].rw-ui,
input[type='button'].rw-ui {
    appearance: none;
    cursor: pointer;
    position: relative;
    border-radius: 8px;
    border: 2px solid #A9A4B200;
    /* alpha 0 for fading */
    box-sizing: border-box;
    /* correctness */
    width: 100%;
    height: 100%;
    margin: 0px;
}

    input[type='checkbox'].rw-ui::before,
    input[type='radio'].region-radio::before,
    input[type='radio'].rw-ui::before,
    input[type='button'].rw-ui::before {
        /* outline that expands */
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin: -2px;
        /* undo parent border */
        border-radius: 8px;
        border: 2px solid #4B4653;
        /* darkgray */
        transition: padding 0.3s, border-color 0.3s, margin 0.3s;
    }

    /* inserted span */
    input[type='checkbox'].rw-ui,
    input[type='radio'].rw-ui + span,
    input[type='radio'].region-radio,
    input[type='button'].rw-ui + span {
        cursor: pointer;
        position: absolute;
        left: 0px;
        top: calc(50% - 12px);
        /* proof that CSS is stupid, cant fucking vertical center text */
        width: 100%;
        text-align: center;
        color: #4B4653;
        /* darkgray */
        user-select: none;
        transition: color 0.3s;
    }

        /* inserted 50x50 image */
        input[type='checkbox'].rw-ui + img,
        input[type='radio'].rw-ui + img,
        input[type='button'].rw-ui + img {
            position: absolute;
            cursor: pointer;
            opacity: 0.72;
            top: calc(50% - 25px);
            left: calc(50% - 25px);
            user-select: none;
            transition: opacity 0.3s, transform 0.3s;
        }

        /* checked */
        input[type='checkbox'].rw-ui:checked::before,
        input[type='radio'].region-radio:checked::before,
        input[type='radio'].rw-ui:checked::before,
        input[type='button'].rw-ui:checked::before {
            border-color: #A9A4B2;
            /* lightgray */
        }

        input[type='checkbox'].rw-ui:checked::after,
        input[type='radio'].region-radio:checked::after,
        input[type='radio'].rw-ui:checked::after,
        input[type='button'].rw-ui:checked::after {
            /* extra outline */
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            margin: -6px;
            padding: 4px;
            border-radius: 8px;
            border: 2px solid #A9A4B2;
            /* lightgray */
            transition: padding 0.3s, border-color 0.3s, margin 0.3s;
        }

        input[type='checkbox'].rw-ui:checked + span,
        input[type='radio'].region-radio:checked + span,
        input[type='radio'].rw-ui:checked + span,
        input[type='button'].rw-ui:checked + span {
            color: #A9A4B2;
            /* lightgray */
        }

        input[type='checkbox'].rw-ui:checked + img,
        input[type='radio'].rw-ui:checked + img,
        input[type='button'].rw-ui:checked + img {
            opacity: 1.0;
        }

        /* hover */
        input[type='checkbox'].rw-ui:hover,
        input[type='radio'].region-radio:hover,
        input[type='radio'].rw-ui:hover,
        input[type='button'].rw-ui:hover {
            animation: border-blinker 0.8s linear infinite, flasher 0.3s;
        }

            input[type='checkbox'].rw-ui:hover::before,
            input[type='radio'].region-radio:hover::before,
            input[type='radio'].rw-ui:hover::before,
            input[type='button'].rw-ui:hover::before {
                margin: -6px;
                padding: 4px;
                border-color: white;
            }

        input[type='checkbox'].rw-ui:checked:hover::after,
        input[type='radio'].region-radio:checked:hover::after,
        input[type='radio'].rw-ui:checked:hover::after,
        input[type='button'].rw-ui:checked:hover::after {
            margin: -10px;
            padding: 8px;
            border-color: white;
        }

        input[type='checkbox'].rw-ui:hover + span,
        input[type='radio'].rw-ui:hover + span,
        input[type='radio'].region-radio:hover + span,
        input[type='button'].rw-ui:hover + span {
            color: white;
        }

        input[type='checkbox'].rw-ui:hover + img,
        input[type='radio'].rw-ui:hover + img,
        input[type='button'].rw-ui:hover + img {
            opacity: 1.0;
            transform: scaleX(1.2) scaleY(1.2);
        }

        /* active */
        input[type='checkbox'].rw-ui:active,
        input[type='radio'].rw-ui:active,
        input[type='radio'].region-radio:active,
        input[type='button'].rw-ui:active {
            animation: border-blinker 0.8s linear infinite, flasher 0.3s;
        }

            input[type='checkbox'].rw-ui:active::before,
            input[type='radio'].region-radio:active::before,
            input[type='radio'].rw-ui:active::before,
            input[type='button'].rw-ui:active::before {
                margin: -2px;
                padding: 0px;
                border-color: white;
            }

        input[type='checkbox'].rw-ui:checked:active::after,
        input[type='radio'].region-radio:checked:active::after,
        input[type='radio'].rw-ui:checked:active::after,
        input[type='button'].rw-ui:checked:active::after {
            margin: -6px;
            padding: 4px;
            border-color: white;
        }

        input[type='checkbox'].rw-ui:active + img,
        input[type='radio'].rw-ui:active + img,
        input[type='button'].rw-ui:active + img {
            transform: none;
        }

/* TOGGLES END */

/* CHECKBOX MIXIN */

input[type='checkbox'].rw-ui-ckb::before {
    content: "\2714";
    text-align: center;
    font-size: 1.6em;
    font-weight: 600;
    color: #A9A4B200;
    transition: padding 0.3s, border-color 0.3s, margin 0.3s, color 0.3s;
}

input[type='checkbox'].rw-ui-ckb:hover::before {
    color: #A9A4B288;
}

input[type='checkbox'].rw-ui-ckb:checked::before {
    color: #A9A4B2;
}

input[type='checkbox'].rw-ui-ckb:checked:hover::before {
    color: white;
}

input[type='checkbox'].rw-ui-ckb:active::before {
    color: white;
}

input[type='checkbox'].rw-ui-ckb + label {
    position: relative;
    left: 10px;
    top: -10px;
    color: #4B4653;
    /* darkgray */
    transition: color 0.3s;
}

input[type='checkbox'].rw-ui-ckb:hover + label {
    color: #A9A4B2;
}

input[type='checkbox'].rw-ui-ckb:checked + label {
    color: #A9A4B2;
}

input[type='checkbox'].rw-ui-ckb:checked:hover + label {
    color: white;
}

input[type='checkbox'].rw-ui-ckb:active + label {
    color: white;
}

/* RW UI END */