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

:root {
    --background: #E3E9F7;
    --bg1: #FFFFFF;
    
    --red: hsl(348, 100%, 61%);
    --green: hsl(141, 53%, 53%);

    --text: #909095;
    --title: #22232C;
}

p{
    color: var(--text)!important;
}

.heading,strong{
    color: var(--title)!important;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --background: #121418;
        --bg1: #22232C;

        --text: #838692;
        --title: #FFFFFF;
    }
}

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

.temcard{
    background-color: var(--bg1);
    border-radius: 10px;
    padding: 10px;
}

.temcard .column img{
    background-color: var(--background);
    border-radius: 5px;
}

.modal-background{
    background-color: rgba(10, 10, 10, 0.70);
}

.filter{
    height: 50px;
    width: 50px;
    background-color: var(--bg1) !important;
    border-radius: 5px;
    margin-right: 5px;
    padding: 2.5px;
    cursor: pointer;
}

.condition{
    height: 30px;
    width: 30px;
    border-radius: 5px;
    margin-right: 5px;
    padding: 2.5px;
}

.is-weakness img{
    height: 30px;
    width: 30px;
    background-color: var(--red) !important;
    border-radius: 5px;
    margin-right: 5px;
    padding: 2.5px;
    cursor: pointer;
}

.is-resist img{
    height: 30px;
    width: 30px;
    background-color: var(--green) !important;
    border-radius: 5px;
    margin-right: 5px;
    padding: 2.5px;
    cursor: pointer;
}

.input, .textarea {
    background-color: var(--bg1);
    border-color: #000000;
    color: var(--title);
}

.input::placeholder {
    color: var(--text)!important;
}

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

/* width */
::-webkit-scrollbar {
    width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: transparent;
}