@font-face {
    font-family: TITLE;
    src: url(/assets/IBM-Logo.ttf);
}

@font-face {
    font-family: TEXT;
    src: url(/assets/Good\ Old\ DOS.ttf);
}

:root {

    --color1: #000000;
    --color2: #fbff00;

}



* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    scrollbar-color: var(--color2) var(--color1);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {

    background: var(--color2);

}

*::webkit-scrollbar-thumb {

    background: var(--color1);

}

html, body {
    height: 100%;
    background-color: var(--color1);
}

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

b {
    padding: 0% 1% 0% 1%;
    background-color: var(--color2);
    color: var(--color1);
}

header {
    background-color: var(--color2);
    color: var(--color1);
    font-family: TEXT;
    display: flex;

    .exit {
        height: 100%;
        margin-left: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        aspect-ratio: 1;
        background-color: var(--color1);
        color: var(--color2);
    }

    #killbutton {
        margin-left: auto;
        cursor: pointer;
    }
    #killbutton:hover {
        filter: drop-shadow(1px 1px 0px var(--color1));
    }
}

.mdiv {
    color: var(--color2);
    margin: auto;
    display: flex;
    aspect-ratio: 4/2.3;
    width: 75%;
    border: 4px solid var(--color2);

    .ldiv {
        background-color: var(--color2);
        color: var(--color1);
        flex: 1;
        display: flex;
        flex-direction: column;
        border-right: 4px solid var(--color2);
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .player {
            position: relative;
            flex: 2.5;;
            padding: 3%;
            display: flex;
            flex-direction: column;

            #NAME, .routenlvl {
                text-transform: capitalize;
            }

            * {
                z-index: 1;
            }
            b {
                color: var(--color2);
                background-color: var(--color1);
            }
            .mainstts {
                flex: 1;
                display: flex;
                div {
                    flex: 1;
                }
            }
            .STATS {
                flex: 2;
                font-family: TEXT;
                div {
                    margin-bottom: 2%
                }
            }

            .page {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 2;
                background-color: var(--color2);
                overflow-y: auto;
                overflow-x: hidden;
                padding: 7% 4% 0% 4%;
                p {
                    margin-bottom: 3%;
                }
                .value {
                    display: flex;
                    flex-direction: column;
                    list-style-type: none;
                    margin-bottom: 3%;
                    h1 {
                        font-size: 2vw;
                        font-family: TEXT;
                        background-color: var(--color1);
                        color: var(--color2);
                        margin-bottom: 2%;
                    }
                    b {
                        margin-left: auto;
                    }
                }
            }

            .nav {
                user-select: none;
                display: flex;
                flex-flow: column wrap;
                background-color: var(--color1);
                color: var(--color2);
                flex: 1;
                margin-bottom: 1%;
                padding: 2%;
                overflow: hidden;
                .press {
                    cursor: pointer;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    font-size: 1vw;
                    padding-left: 1%;
                    min-height: 22%;
                    max-height: 25%;
                }
                .press:hover {
                    outline: 2px dotted var(--color2);
                }
            }

        }

        .info {
            cursor: pointer;
            flex: 1.3;
            overflow-y: auto;
            background-color: var(--color1);
            color: var(--color2);
            padding: 5%;
            div {
                border-left: 2px solid var(--color2);
                padding-left: 5%;
                h1 {
                    text-transform: capitalize;
                    font-family: TEXT;
                }
                ul {
                    margin-left: 5%;
                }
            }
        }

        header {
            justify-content: center;
        }

    }

    .rdiv {
        flex: 1.8;
        margin: 2%;
        border: 2px solid var(--color2);
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .monsterview {
            display: none;
            flex: 7;
            border: 2px solid var(--color2);
            margin: 3%;
            animation: show .3s linear;
            justify-content: space-evenly;
            align-items: center;
            .enemy {
                flex-direction: column;
                height: 60%;
                display: flex;
                justify-content: center;
                align-items: center;
                aspect-ratio: 1;
                p {
                    font-family: TEXT;
                }
                div {
                    display: flex;
                    width: 100%;
                    aspect-ratio: 1;
                    border: 1px solid var(--color2);
                    justify-content: center;
                    align-items: center;
                }
                div:hover {
                    background-color: var(--color2);
                    color: var(--color1);
                }
            }
        }

        #prompt {
            background-color: var(--color1);
            padding: 3%;
            overflow-y: auto;
            overflow-x: hidden;
            flex: 20;

            .interact {
                display: flex;
                padding: 2%;
                align-items: flex-start;
                .icon {
                    font-family: TEXT;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 15vh;
                    border: 2px solid var(--color2);
                    aspect-ratio: 1;
                    font-size: 3vh;
                }
                p {
                    padding-top: 0%;
                    flex: 1;
                    line-break: anywhere;
                }
            }

            .option {
                margin-Left: 2%;
                font-Size: 1.5vw;
                text-Transform: uppercase
            }

            .title {
                font-family: TEXT;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                .line {
                    user-select: none;
                    flex: 1;
                    min-height: 20%;
                    background-color: var(--color2);
                }
                h1 {
                    flex: 2;
                    font-size: 6vw;
                }
            }

            .special {
                h1 {
                    padding: 2% 2% 0% 2%;
                    background-color: var(--color2);
                    color: var(--color1);
                    font-family: TEXT;
                    font-size: 2.5vw;                    
                }
            }

            p {
                text-rendering: geometricPrecision;
                font-size: 1.3vw;
                padding: 2%;

            }

            p:not(p:first-of-type) {
                border-top: 2px dotted var(--color2)
            }



        }

        .input {
            flex: 1;
            padding: 2%;
            input {
                background: none;
                border: none;
                width: 100%;
                color: var(--color2);
                padding: 1%;
            }
            input:focus {
                background-color: var(--color2);
                color: var(--color1);
                border: none;
                outline: none;
            }
        }

    }

}

.themes {

    display: flex;
    flex-direction: column;
    position: absolute;
    width: 5%;
    height: fit-content;
    left: 0;
    bottom: 0;
    margin: 1%;
    padding: .3%;
    padding-top: 0%;
    overflow-y: auto;
    max-height: 69%;

    .themeoption, .btn {

        padding: 5%;

    }

    .themeoption {
        position: static;
        width: 70%;
        top: 0;
        margin: auto;
        cursor: pointer;
        aspect-ratio: 1;
        display: none;
        flex-flow: wrap;
        margin-bottom: 30%;
        background-color: var(--color2);

        div {
            height: 50%;
            aspect-ratio: 1;
        }
        .cor1 {
           background-color: var(--color1);
        }
    }

    .btn {
        top: 0;
        position: sticky;
        margin: auto;
        cursor: pointer;
        width: 100%;
        aspect-ratio: 1;
        display: flex;
        flex-flow: wrap;
        margin-bottom: 30%;
        background-color: var(--color2);
        div {
            height: 50%;
            aspect-ratio: 1;
        }
        .cor1 {
           background-color: var(--color1);
        }
    }

    #tema1 {
        background-color: #ff2781;
        .cor1 {
            background-color: #000000;
        }
    }

    #tema2 {

        background-color: rgb(253, 79, 27);

        .cor1 {

            background-color: rgb(255, 207, 168);

        }


    }

    #tema3 {

        background-color: #fbff00;

        .cor1 {

            background-color: black;

        }

    }

    #tema4 {

        background-color: blue;

        .cor1 {

            background-color: lightblue;

        }

    }

    #tema5 {

        background-color: black;

        .cor1 {

            background-color: white;

        }


    }

    #tema6 {

        background-color: #323232;

        .cor1 {

            background-color: #929292;

        }

    }

    #tema7 {

        background-color: orange;

        .cor1 {

            background-color: darkblue;

        }

    }

    #tema8 {

        background-color: purple;

        .cor1 {

            background-color: black;

        }


    }

    #tema9 {

        background-color: #e23500;

        .cor1 {

            background-color: #ffe136;

        }

    }

    #tema10 {

        background-color: #000000;

        .cor1 {

            background-color: #20401f;

        }

    }

    #tema11 {

        background-color: #463A3B;

        .cor1 {

            background-color: #D4C9CC;

        }

    }

    #tema12 {

        background-color: #3e1601;

        .cor1 {

            background-color: #ba1016;

        }

    }

    #tema13 {

        background-color: #ff7b03;

        .cor1 {

            background-color: #272727;

        }

    }

    #tema14 {

        background-color: #c8ff00;

        .cor1 {

            background-color: #000a66;

        }
    }

}


@keyframes show {

    0% {
        transform: scaleY(0%);
    }
    50% {
        transform: scaleY(30%);
    }
    100% {
        transform: scaleY(100%);
    }

}