@keyframes slidePrompt{
    0%{
        color: transparent;
        width: 0%;
        margin-left: 50%;
    }
    35%{
        color: rgb(202, 202, 202);
        width: 40%;
        margin-left: 28%;
    }
    75%{
        color: rgb(202, 202, 202);
        width: 40%;
        margin-left: 28%;
    }
    100%{
        color: transparent;
        width: 0%;
        margin-left: 50%;
    }
}
@keyframes hideInput{
    0%{
        background-color: rgb(39, 39, 39);
        border: 2px solid rgb(53, 53, 179);
        color: rgb(202, 202, 202);
        height: 3rem;
    }
    35%{
        background-color: transparent;
        border: 0px solid transparent;
        color: transparent;
        height: 0rem;
    }
    75%{
        background-color: transparent;
        border: 0px solid transparent;
        color: transparent;
        height: 0rem;
    }
    100%{
        background-color: rgb(39, 39, 39);
        border: 2px solid rgb(53, 53, 179);
        color: rgb(202, 202, 202);
        height: 3rem;
    }
}

body{
    background-color: rgb(39, 39, 39);
    color: rgb(202, 202, 202);
    text-align: center;
}

.enclosed{
    border: 2px solid rgb(180, 180, 180);
    width: 20%;

    text-align: center;
}
.enclosed input{
    display: block;
    float: none;
}
.mbtn{
    background-color: rgb(39, 39, 39);
    border: 2px solid rgb(103, 103, 247);
    color: rgb(202, 202, 202);
    border-radius: 5px;
    cursor: pointer;

    padding: 5px;
    margin-top: 5px;
    margin-left: -2%;
    margin-right: 2%;

    width: 12rem;
    height: 2.5rem;

    transition-duration: 500ms;
}
.mbtn:disabled{
    background-color: transparent;
    color: transparent;

    border: 0px solid transparent;
    border-radius: 2.5px;

    cursor: default;

    height: 0px;
}
.mbtn:enabled:hover{
    border: 2px solid rgb(146, 146, 228)
}

#scrambled{
    background-color: rgb(39, 39, 39);
    border: 2px solid rgb(68, 68, 68);
    border-radius: 5px;
    color: rgb(180, 180, 180);

    width: 25%;
    margin-left: 37%;
    padding-top: 15px;
    padding-bottom: 15px;
}
#guess{
    background-color: rgb(39, 39, 39);
    border: 2px solid rgb(53, 53, 179);
    color: rgb(202, 202, 202);

    width: 98%;
    height: 3rem;

    text-align: center;
}
#guess:hover{
    border: 2px solid rgb(103, 103, 247);
}
#bkgImg{
    z-index: -1;
    position: absolute;

    width: 100%;
    height: 100%;
}
#hint{
    background-color: rgb(39, 39, 39);
    border: 2px solid rgb(202, 202, 202);
    border-radius: 15px;

    width: 40%;
    height: 2rem;
    margin-left: 28%;
}

.showPrompt{
    animation-name: slidePrompt;
    animation-duration: 2500ms;
    animation-fill-mode: forwards;
}
.hideBox{
    animation-name: hideInput;
    animation-duration: 2500ms;
    animation-fill-mode: forwards;
}