@charset "utf-8";
/* CSS Document */
body {
    border: 0px; 
    padding: none; 
    margin: 0px; 
    background-color: black;
}

.creditsLink {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.creditsImage {
    border: solid 2px #8ff8ea; 
    box-shadow: 0px 0px 10px #8800f0, 0px 0px 20px #a955e9, 0px 0px 40px #c290e7;
}

.ww_app_frame {
    position: absolute; 
    background-color: black;
    background: black;
    left: 200px; 
    top: 0px; border: 0px;
    width: calc(100% - 200px); 
    min-width: 400px;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none; /*firefox*/
    -ms-overflow-style: none; /*IE 10+*/
}
.ww_app_frame::-webkit-scrollbar {
    width: 0;
    height: 0;
}
label {
    color: #ffffff;
}

input {
    background-color: #a0f0fd;
    width: 100%;
    margin-right: -20px;
}
#cover {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: black;
    opacity: 1.0;
    visibility: visible;
    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;

}
#coverContainer {
    background-color: black;
    position: absolute; 
    top: 0px; 
    left: 0px;
    width: 100%;
    height: auto;
}
.coverImage {
    display: block;
    width: auto;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: none;
}

.graphicButton {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    border: none;
    padding: none;
    margin: 0;
}

.graphicButtonOver {
    position: relative;
    top: -68px;
    left: 0px;
    width: 100%;
    height: auto;
    border: none;
    padding: none;
    margin: 0;
    opacity: 0.0;
    visibility: hidden;
    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;
}

#devtools {
    padding-left: 20px;
    padding-right: 20px;
    visibility: hidden;
}

#cover2 {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: black;
    opacity: 1.0;
    visibility: visible;
    -webkit-transition: opacity 600ms, visibility 600ms;
    transition: opacity 600ms, visibility 600ms;

}

#undo {
    position: relative;
    width: 100%; 
    height: 64px; 
    background-color:black; 
    overflow: hidden; 
    margin-top: -36px;
}

#redo {
    width: 100%; 
    height: 64px; 
    background-color:black; 
    overflow: hidden; 
    margin-top: -14px;
    margin-left: 3px;
}

#options {
    width: 100%; 
    height: 64px; 
    background-color:black; 
    overflow: hidden; 
    margin-top: -10px;
    margin-left: 0px;
}

#credits {
    width: 100%; 
    height: 64px; 
    background-color:black; 
    overflow: hidden; 
    margin-top: -10px;
    margin-left: 0px;
}

#options_screen {
    position: fixed;
    bottom: 5%;
    right: 5%;
    top: 5%;
    left: 5%;
    height: 90%;
    width: 90%;
    background-color: rgb(0, 0, 0);
    overflow: hidden;
    border: solid 2px #ffffff;
    box-shadow: 0px 0px 10px #8800f0, 0px 0px 20px #a955e9, 0px 0px 40px #c290e7;
    visibility: hidden;
    opacity: 0.0;
    -webkit-transition: opacity 30ms, visibility 30ms;
    transition: opacity 300ms, visibility 30ms;
    
}

#options_content {
    scrollbar-width: none; /*firefox*/
    -ms-overflow-style: none; /*IE 10+*/
}

#options_content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

#credits_screen {
    position: fixed;
    bottom: 5%;
    right: 5%;
    top: 5%;
    left: 5%;
    height: 90%;
    width: 90%;
    background-color: rgb(0, 0, 0);
    overflow: hidden;
    border: solid 2px #ffffff;
    box-shadow: 0px 0px 10px #8800f0, 0px 0px 20px #a955e9, 0px 0px 40px #c290e7;
    visibility: hidden;
    opacity: 0.0;
    -webkit-transition: opacity 30ms, visibility 30ms;
    transition: opacity 300ms, visibility 30ms;
    scrollbar-width: none; /*firefox*/
    -ms-overflow-style: none; /*IE 10+*/
}


#credits_content {
    scrollbar-width: none; /*firefox*/
    -ms-overflow-style: none; /*IE 10+*/
}

#credits_content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

@media screen and (max-width: 640px) {
    .ww_app_frame {
        position: absolute; 
        background-color: black;
        background: black;
        left: 0px; 
        top: 0px; border: 0px;
        width: 100%;
        min-width: 400px;
        height: calc(100% - 128px);
        overflow-y: scroll;
        scrollbar-width: none; /*firefox*/
        -ms-overflow-style: none; /*IE 10+*/
        border-bottom: solid 2px #ffffff;
        margin-bottom: 10px;
    }

    #undo {
        position: absolute;
        width: 200px;
        left: 0px;
        bottom: 50px;
        background-color:black; 
        overflow: hidden; 
        margin-top: -36px;
    }

    #redo {
        position: absolute;
        width: 200px;
        bottom: 54px;
        left: calc(100vw - 200px);
        float: right;
        background-color:black; 
        overflow: hidden; 
        margin-top: -36px;
        margin-left: 0px;
    }

    #options {
        position: absolute;
        width: 200px;
        left: 0px;
        bottom: 0px;
        background-color:black; 
        overflow: hidden; 
        margin-top: -36px;
    }

    #credits {
        position: absolute;
        width: 200px;
        left: calc(100vw - 200px);
        bottom: 0px;
        background-color:black; 
        overflow: hidden; 
        margin-top: -42px;
    }
}