@import url('bulma.min.css');
@import url('fontawesome.css');
@import url('all.css');
@import url('color.css');

:root {
    --background: var(--base);
    --surface: var(--base-50);
    --surface-1: var(--base-100);
    --border: var(--950-opacity-10);

    --title: var(--base-950);
    --text: var(--base-600);

    --white: var(--base);
    --white-hover: var(--base-300);

    --purple: var(--purple-dark);
    --purple-hover: var(--purple-light);

    --pink: var(--magenta-dark);
    --pink-hover: var(--magenta-light);

    --blue: var(--blue-dark);
    --blue-hover: var(--blue-light);

    --cyan: var(--cyan-dark);
    --cyan-hover: var(--cyan-light);

    --green: var(--green-dark);
    --green-hover: var(--green-light);

    --emerald: var(--emerald-dark);
    --emerald-hover: var(--emerald-light);

    --gold: var(--yellow-dark);
    --gold-hover: var(--yellow-light);

    --orange: var(--orange-dark);
    --orange-hover: var(--orange-light);

    --red: var(--red-dark);
    --red-hover: var(--red-light);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --background: var(--base-950);
        --surface: var(--base-900);
        --surface-1: var(--base-800);
        --border: var(--base-opacity-10);

        --title: var(--base-50);
        --text: var(--base-500);

        --white: var(--base);
        --white-hover: var(--base-300);

        --purple-hover: var(--purple-dark);
        --purple: var(--purple-light);

        --pink-hover: var(--magenta-dark);
        --pink: var(--magenta-light);

        --blue-hover: var(--blue-dark);
        --blue: var(--blue-light);

        --cyan-hover: var(--cyan-dark);
        --cyan: var(--cyan-light);

        --green-hover: var(--green-dark);
        --green: var(--green-light);

        --emerald-hover: var(--emerald-dark);
        --emerald: var(--emerald-light);

        --gold-hover: var(--yellow-dark);
        --gold: var(--yellow-light);

        --orange-hover: var(--orange-dark);
        --orange: var(--orange-light);

        --red-hover: var(--red-dark);
        --red: var(--red-light);
    }
}

html {
    background-color: var(--background);
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
strong {
    color: var(--title);
}

.content {
    max-width: 1200px;
    margin: auto;
}

.content p {
    color: var(--text);

    &:not(:last-child) {
        margin-bottom: 0px;
    }
}

hr {
    height: 1px;
    background-color: var(--border);
}

i {
    &.is-big {
        font-size: 4rem;
    }

    &.is-mid {
        font-size: 2rem;
    }
}

.landscape {
    max-height: 300px;
}

.is-bold {
    font-weight: bold;
}

/*-- COLORS --*/

.is-title {
    color: var(--title) !important;
}

.is-purple {
    color: var(--purple);
}

.is-pink {
    color: var(--pink);
}

.is-blue {
    color: var(--blue);
}

.is-cyan {
    color: var(--cyan);
}

.is-green {
    color: var(--green);
}

.is-emerald {
    color: var(--emerald);
}

.is-gold {
    color: var(--gold);
}

.is-orange {
    color: var(--orange);
}

.is-red {
    color: var(--red);
}

/*-- BUTTONS --*/

.button[disabled],
fieldset[disabled] .button {
    background-color: var(--background);
    color: var(--text);
    border: none;
    box-shadow: none;
    opacity: none;
}

.button {
    color: var(--background);
    border: none;

    &.story {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 99;
    }

    &.is-white {
        background-color: var(--white);

        &:hover {
            background-color: var(--white-hover);
        }
    }

    &.is-purple {
        background-color: var(--purple);

        &:hover {
            background-color: var(--purple-hover);
        }
    }

    &.is-blue {
        background-color: var(--blue);

        &:hover {
            background-color: var(--blue-hover);
        }
    }

    &.is-green {
        background-color: var(--green);

        &:hover {
            background-color: var(--green-hover);
        }
    }

    &.is-emerald {
        background-color: var(--emerald);

        &:hover {
            background-color: var(--emerald-hover);
        }
    }

    &.is-gold {
        background-color: var(--gold);

        &:hover {
            background-color: var(--gold-hover);
        }
    }

    &.is-orange {
        background-color: var(--orange);

        &:hover {
            background-color: var(--orange-hover);
        }
    }

    &.is-pink {
        background-color: var(--pink);

        &:hover {
            background-color: var(--pink-hover);
        }
    }
}

/*-- MODAL --*/

.modal-content {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* Internet Explorer 10+ */
    &::-webkit-scrollbar {
        display: none;
        /* WebKit */
    }
}

.update {
    border-radius: 20px;
    padding: 20px;
    background-color: var(--background);

    h4 {
        text-align: center;
        margin: 0px !important;
        padding: 20px;
    }

    p {
        margin: 0px 20px 20px 20px;
    }
}

.nopacity {
    background-color: var(--background);
}

/*-- BLOCKS --*/

.block {
    height: 100%;
    background-color: var(--surface);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--border);

    margin-bottom: 24px;

    &.nrt {
        border-radius: 0px 0px 10px 10px;
    }

    &.chatbox {
        display: flex;
        flex-direction: column-reverse;
        height: 200px;
        margin-bottom: 0;
        overflow: hidden;
        padding-bottom: 10px;

        & p {
            line-height: 1.45rem;
            opacity: 0;
            transition: opacity 0.3s ease;

            &:first-child {
                opacity: 1;
            }

            &:first-child + p {
                opacity: 0.8;
            }

            &:first-child + * + p {
                opacity: 0.6;
            }

            &:first-child + * + * + p {
                opacity: 0.4;
            }

            &:first-child + * + * + * + p {
                opacity: 0.2;
            }

            &:first-child + * + * + * + * + p {
                opacity: 0.1;
            }

            &:first-child + * + * + * + * + * + p {
                opacity: 0.05;
            }
        }
    }

    .block {
        height: auto;
        background-color: var(--surface-1);
        margin: -5px;
        border-radius: 5px;

        &:not(:last-child) {
            margin-bottom: 5px;
        }
    }
}

/*-- TABS --*/

.tabs {
    display: flex;
    margin-bottom: -1px !important;

    .tab {
        background-color: var(--surface-1);

        flex-grow: 1;
        padding: 10px 10px 0px 10px;
        border-radius: 10px 10px 0px 0px;
        border-bottom: 1px solid var(--border);


        &.is-active {
            background-color: var(--surface);

            border: 1px solid var(--border);
            border-bottom: none;
        }

        &:not(.is-active) {
            cursor: pointer;
            transition: background 0.3s ease;

            &:hover {
                background-color: var(--surface);
            }
        }

        p {
            margin: auto;
            margin-bottom: 0px;
            width: 150px;
        }
    }
}

.fa-leaf-oak:first-child {
    transform: rotateY(3.142rad);
}