:root {
    --white: #E7E2DB;
    --lightOrange: #F8BA50;
    --midOrange: #FB940A;
    --darkOrange: #EA7607;
    --lightGrey: #b3b3b3;
    --black: #020101;
    --whiteTrans: rgba(255, 255, 255, 0.9);
    --blackTrans: rgba(0, 0, 0, 0.8);
}

.theme--light {
    --mainBg: var(--white);
    --fontColor: var(--black);
    --modalBg: var(--whiteTrans);
    --overlayBg: transparent;
}

.theme--dark {
    --mainBg: var(--black);
    --fontColor: var(--lightGrey);
    --modalBg: var(--black);
    --overlayBg: var(--blackTrans);
}

body {
    font-family: 'Indie Flower', cursive;
    color: var(--fontColor);
    margin: 0;
    padding: 0;
    background: var(--white) url('../images/bgSunset.jpg') no-repeat right center fixed;
    background-size: cover;
}

.layer {
    background-color: var(--overlayBg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

h1 {
    font-family: 'Bangers', cursive;
    font-size: 9vw;
    color: var(--black);
    -webkit-text-stroke: 2px var(--white);
    text-shadow:
        3px 3px 0 var(--black),
        -1px -1px 0 var(--black),
        1px -1px 0 var(--black),
        -1px 1px 0 var(--black),
        1px 1px 0 var(--black);
}

h2 {
    color: var(--black);
    font-size: large;
    text-shadow:
        -1px -1px 0 var(--white),
        1px -1px 0 var(--white),
        -1px 1px 0 var(--white),
        1px 1px 0 var(--white);
}

.modal {
    font-size: 1.2rem;
    color: var(--fontColor);
}

.modal-content {
    background-color: var(--modalBg);
    border: var(--fontColor) 3px solid;
}

.modal-footer {
    border-top: none;
}

footer {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--lightOrange);
    position: fixed;
    bottom: 0px;
    left: 0px;
    margin: 0px;
}

footer a {
    text-decoration: none;
    color: var(--lightOrange);
}

.weapon_container {
    height: 50px;
    position: relative;
    overflow-x: hidden;
}

.battle {
    position: fixed;
    bottom: 10%;
    left: 0;
    right: 0;
}

.progress {
    max-width: 25vh;
}

.progress-bar {
    font-size: larger;
    color: var(--black);
}

.battle_img--character {
    max-height: 25vh;
}

/* IMAGES */
.modal_img--ninja {
    height: auto;
    width: 75%;
}

.battle_img--character {
    height: 100%;
    width: auto;
}

.battle_img--weapon {
    width: auto;
    height: 100%;
    position: absolute;
}

.img_belt {
    width: 75px;
    height: 75px;
}

/* QUESTION AREA */
.questions_submit {
    height: 50px;
    width: 50px;
    background-color: var(--mainBg);
    color: var(--fontColor);
    border: var(--fontColor) 1px solid;
}

.questions_submit:hover {
    background-color: var(--fontColor);
    color: var(--mainBg);
    border: var(--mainBg) 1px solid;
}

.questions {
    background-color: var(--modalBg);
    border-radius: 25px;
    border: var(--fontColor) solid 3px;
    position: fixed;
    top: 25%;
    left: 0;
    right: 0;
}

.questions_row {
    display: flex;
    justify-content: center;
    align-items: center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    background-color: var(--mainBg);
}

.input:focus {
    outline: none !important;
    border: 1px solid var(--midOrange);
    box-shadow: 0 0 10px var(--darkOrange);
}

/* HIDE RADIO */
[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* LEVEL SELECTOR */
[type=radio]+img {
    cursor: pointer;
}

[type=radio]:checked+img {
    background-color: var(--fontColor);
    border-radius: 5px;
}

/* SETTINGS */
.form-check-input:checked {
    background-color: var(--midOrange);
    border: solid 1px var(--white);
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    border-color: var(--darkOrange);
}

/* BUTTONS */
.modal_btn--black {
    color: var(--fontColor);
    background-color: var(--mainBg);
    border: var(--fontColor) 3px solid;
}

.modal_btn--black:hover {
    color: var(--mainBg);
    background-color: var(--fontColor);
    border: var(--fontColor) 3px solid;
}

.modal_btn--white {
    color: var(--mainBg);
    background-color: var(--fontColor);
    border: var(--fontColor) 3px solid;
}

.modal_btn--white:hover {
    color: var(--fontColor);
    background-color: var(--mainBg);
    border: var(--fontColor) 3px solid;
}

.footer_btn--contact:hover {
    background-color: var(--lightOrange);
    color: var(--black);
    border: var(--black) 1px solid;
    border-radius: 5px;
}

.header_btn {
    height: 50px;
    width: 50px;
    font-size: 1rem;
    background-color: var(--mainBg);
    color: var(--fontColor);
    border: var(--fontColor) 1px solid;
}

.header_btn:hover {
    background-color: var(--fontColor);
    color: var(--mainBg);
    border: var(--fontColor) 1px solid;
}

.no-js div {
    font-size: larger;
    color: var(--white);
    background-color: #020101;
    border: solid 1px var(--white);
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100vw;
    left: 0%;
    z-index: 1;
    padding: 10%;
}

.container404 {
    background-color: var(--modalBg);
    border-radius: 25px;
    border: var(--fontColor) solid 3px;
    width: 100%;
}

#ninja404 {
    height: auto;
    width: 30vw;
}

.message {
    display: none;
}

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
    .layer {
        display: none;
    }

    .message {
        display: block;
        height: 100vh;
        width: 100vw;
    }

    .modal-backdrop {
        visibility: hidden;
    }
}