html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    user-select: none;
    touch-action: none;
}

ul {
    list-style-type: none;
}

li {
    overflow: visible;
}

canvas {
    touch-action: none;
}


/* /////////////////////////////////////////////*/

.words {
    margin: 0;
}


/* /////////////////////////////////////////////*/

#resp-table-Tool {
    display: table;
    height: 80%;
    position: absolute;
    top: 15px;
    margin: 0;
    padding-left: 27px;
}

#resp-table-Draw {
    display: table;
    height: 96%;
    position: absolute;
    right: 0;
    top: 15px;
    margin: 0;
    width: auto;
}


/* /////////////////////////////////////////////*/

#buttonsTool {
    display: table-row-group;
    height: 80%;
}

.resp-table-row-Tool {
    display: table-row;
    max-height: 20%;
}

.table-body-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}


/* ///////////////////////////////////////////// */

#buttonsDraw {
    display: table-row-group;
    height: 100%;
}

.resp-table-row-Draw {
    display: table-row;
    max-height: 25%;
}

.resp-table-row-Draw-color {
    display: table-row;
    max-height: 16.6%;
}

#Size1 {
    max-height: 60%;
    max-width: 60%;
    width: 35%;
}

#Eraser1 {
    max-height: 60%;
    max-width: 60%;
    width: 35%;
}

#Dust1 {
    max-height: 60%;
    max-width: 60%;
    width: 35%;
}

#colorPalette {
    max-height: 60%;
    max-width: 60%;
    width: 35%;
}


/* ///////////////////////////////////////////// */

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
    text-decoration: none;
}


/* ///////////////////////////////////////////// */

#textInput {
    display: none;
}

#textInput[showInput=yes] {
    display: inline;
    position: fixed;
    top: 3%;
    left: 45%;
    margin: 0 auto;
    vertical-align: right;
}


/* ///////////////////////////////////////////// */

.buttonWords {
    font-family: "Arial";
    color: white;
    font-size: 22px;
    text-align: center;
    font-weight: bold;
    border-spacing: 10px 10px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
}

.buttonWords:hover {
    animation-duration: 0.2s;
    animation-name: buttonHover;
    animation-fill-mode: forwards;
}


/* /////////////////////////////////////////////*/


/* /////////////////////////////////////////////*/

.images {
    max-width: 70%;
    max-height: 70%;
    margin-left: auto;
    margin-right: auto;
}


/* /////////////////////////////////////////////*/

.slider {
    width: 75%;
}


/* /////////////////////////////////////////////*/

#colors {
    display: none;
}

#colors[color0=yes] {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

#colors1 {
    display: none;
}

#colors1[color1=yes] {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

#colors2 {
    display: none;
}

#colors2[color2=yes] {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

#colors3 {
    display: none;
}

#colors3[color3=yes] {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

.color {
    height: 16px;
    width: 16px;
    background: #159;
    border-radius: 100%;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 16px;
    color: white;
    transform: rotate(45deg);
}

.color:hover {
    cursor: pointer;
    animation-duration: 0.1s;
    animation-name: buttonHover;
    animation-fill-mode: forwards;
}

.color[color0=yes][name="#FC5148"] {
    background: #FC5148;
}

.color[color0=yes][name="#FD50F7"] {
    background: #FD50F7;
}

.color[color0=yes][name="#FA8A38"] {
    background: #FA8A38;
}

.color[color0=yes][name="#FDC26F"] {
    background: #FDC26F;
}

.color[color0=yes][name="#FFF51A"] {
    background: #FFF51A;
}

.color[color0=yes][name="#FBFBF9"] {
    background: #FBFBF9;
}

.color[color0=yes][name="#02A927"] {
    background: #02A927;
}

.color[color0=yes][name="#8EFE3F"] {
    background: #8EFE3F;
}

.color[color0=yes][name="#506DFD"] {
    background: #506DFD;
}

.color[color0=yes][name="#3DDDFF"] {
    background: #3DDDFF;
}

.color[color0=yes][name="#B050FD"] {
    background: #B050FD;
}

.color[color0=yes][name="#D39CFF"] {
    background: #D6A6FC;
}


/* /////////////////////////////////////////////*/

.color[color1=yes][name="#A1B5C0"] {
    background: #A1B5C0;
}

.color[color1=yes][name="#99564A"] {
    background: #99564A;
}

.color[color1=yes][name="#785E24"] {
    background: #785E24;
}

.color[color1=yes][name="#283B29"] {
    background: #283B29;
}

.color[color1=yes][name="#2a4245"] {
    background: #2a4245;
}

.color[color1=yes][name="#022623"] {
    background: #022623;
}

.color[color1=yes][name="#323232"] {
    background: #323232;
}

.color[color1=yes][name="#000000"] {
    background: #000000;
}

.color[color1=yes][name="#44000D"] {
    background: #44000D;
}

.color[color1=yes][name="#3E2C41"] {
    background: #3E2C41;
}

.color[color1=yes][name="#133B5C"] {
    background: #133B5C;
}

.color[color1=yes][name="#273345"] {
    background: #273345;
}


/* /////////////////////////////////////////////*/

.color[color2=yes][name="#493829"] {
    background: #493829;
}

.color[color2=yes][name="#816C5B"] {
    background: #816C5B;
}

.color[color2=yes][name="#A9A18C"] {
    background: #A9A18C;
}

.color[color2=yes][name="#613318"] {
    background: #613318;
}

.color[color2=yes][name="#855723"] {
    background: #855723;
}

.color[color2=yes][name="#B99C6B"] {
    background: #B99C6B;
}

.color[color2=yes][name="#404F24"] {
    background: #404F24;
}

.color[color2=yes][name="#668D3C"] {
    background: #668D3C;
}

.color[color2=yes][name="#BDD09F"] {
    background: #BDD09F;
}

.color[color2=yes][name="#4E6447"] {
    background: #4E6447;
}

.color[color2=yes][name="#4E6172"] {
    background: #4E6172;
}

.color[color2=yes][name="#557C9E"] {
    background: #557c9e;
}


/* /////////////////////////////////////////////*/

.color[color3=yes][name="#D19C7D"] {
    background: #D19C7D;
}

.color[color3=yes][name="#E0B5A4"] {
    background: #E0B5A4;
}

.color[color3=yes][name="#E6B9B2"] {
    background: #E6B9B2;
}

.color[color3=yes][name="#EE8E98"] {
    background: #EE8E98;
}

.color[color3=yes][name="#F4AFB2"] {
    background: #F4AFB2;
}

.color[color3=yes][name="#FAC7C2"] {
    background: #FAC7C2;
}

.color[color3=yes][name="#513528"] {
    background: #513528;
}

.color[color3=yes][name="#5F452E"] {
    background: #5F452E;
}

.color[color3=yes][name="#6E5046"] {
    background: #6E5046;
}

.color[color3=yes][name="#8D5B28"] {
    background: #8D5B28;
}

.color[color3=yes][name="#A16B4F"] {
    background: #A16B4F;
}

.color[color3=yes][name="#DEA26C"] {
    background: #DEA26C;
}


/* /////////////////////////////////////////////*/

@keyframes buttonHover {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}


/* /////////////////////////////////////////////*/

#show1 {
    display: none;
}

#show1[showText=yes] {
    display: block;
}


/* /////////////////////////////////////////////

#show2 {
    display: none;
}

#show2[showEraser=yes] {
    display: block;
}
*/


/* /////////////////////////////////////////////*/

#timer {
    display: none;
}

#timer[show=yes] {
    display: block;
    margin: 0;
    padding: 0;
}

#hourT {
    display: none;
}

#hourT[showH=yes] {
    display: block;
}


/* /////////////////////////////////////////////*/

#question {
    display: none;
}

#question[qShow=yes] {
    display: block;
    position: absolute;
    top: 5px;
    right: 0;
    left: 0;
    width: 20%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    border-radius: 10px;
    text-shadow: 0px 3px 3px black;
    box-shadow: 0px 0px 10px black;
    background: #383736;
    padding: 30px;
}

#Yes {
    float: left;
    font-size: 1.5vw;
}

#No {
    float: right;
    font-size: 1.5vw;
}

.Qdo {
    font-size: 1.7vw;
}


/* /////////////////////////////////////////////*/

#resp-table-Donation {
    display: none;
}

#resp-table-Donation[dShow=yes] {
    display: table;
    height: 100%;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 50%;
    background: #383736;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 10px;
}

#donation {
    display: table-row-group;
    height: 100%;
}

.resp-table-row-Donation {
    display: table-row;
    text-align: center;
    height: 15%;
    width: 100%;
}

.table-body-cell-Donation {
    display: table-cell;
    width: 100%;
    text-align: center;
    justify-content: center;
    vertical-align: middle;
}

.donatePic1 {
    max-width: 70%;
    max-height: 70%;
    padding-top: 10px;
}

.donatePic2 {
    max-width: 70%;
    max-height: 70%;
}

.donatePic3 {
    max-width: 70%;
    max-height: 70%;
}

.buttonControl:hover {
    cursor: pointer;
    animation-duration: 0.1s;
    animation-name: buttonHover;
    animation-fill-mode: forwards;
}

.button1 {
    max-height: 100%;
    width: 25%;
    background: gray;
    box-shadow: 0px 0px 10px black;
    font-size: 1.5vw;
    border-radius: 10px;
    padding: 10px;
    display: inline-block;
}

.button3 {
    max-height: 100%;
    width: 30%;
    background: gray;
    box-shadow: 0px 0px 10px black;
    font-size: 1.5vw;
    border-radius: 10px;
    padding: 10px;
    float: left;
}

.button4 {
    max-height: 100%;
    width: 30%;
    background: gray;
    box-shadow: 0px 0px 10px black;
    font-size: 1.5vw;
    border-radius: 10px;
    padding: 10px;
    float: right;
}

#logoContainer {
    height: 100%;
    width: 100%;
    display: inline-block;

}

.logo {
    max-height: 100%;
    max-width: 100%;
    width: 15%;
    padding-bottom: 20px;
    
}

.logo:hover {
    cursor: pointer;
    animation-duration: 0.1s;
    animation-name: buttonHover;
    animation-fill-mode: forwards;
}


/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#wmContacts {
    display: none;
}

#wmContacts[cShow=yes] {
    display: block;
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 40%;
    margin: 0 auto;
    background-color: #383736;
    border-radius: 10px;
    padding: 20px;
}

.wmContact {
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    width: 100%;
}

#waterMarkid {
    display: block;
    bottom: 15px;
    left: 0;
    height: 16%;
    padding-left: 18px;

}

.waterMark {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    display: block;
    filter: drop-shadow(0px 0px .15rem blue);

}

#waterPic {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
}

.arrow {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
}

#arrowContacts {
    display: none;
}

#arrowContacts[cShow=yes] {
    display: block;
    position: absolute;
    bottom: 40px;
    left: 140px;
    height: 20%;
    width: auto;
}


/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#resp-table-How {
    display: none;
}

#resp-table-How[iShow=yes] {
    display: table;
    height: 100%;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 50%;
}

#instructions {
    display: block;
    position: fixed;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    background: #383736;
    border-radius: 10px;
    font-family: "Arial";
    color: white;
    font-size: 1.3vw;
    font-weight: bold;
}

.resp-table-row-How {
    display: table-row;
    max-height: 20%;
}

.table-body-cell-How {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#HowDiv {
    height: 100%;
    width: 100%;
    display: inline-block;
}

.imagesHow {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: 100%;
}


/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#chalkboard {

    width: auto;
    height: auto;
    z-index: 2;
    cursor: none;
    background-image: url("BlackboardWBorder.png");

    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

#stopper1 {
    height: 20px;
    left: 0;
    right: 0;
    top: 0px;
    position: fixed;
}

#stopper2 {
    height: 20px;
    left: 0;
    right: 0;
    bottom: 0px;
    position: fixed;
}




/*/////////////////////////////////////////////////////////////////////////////////////////////////////*/

#chalkboard[drawer=yes]:hover {
    cursor: url("Chalk.png"), auto;
}

#chalkboard[drawer=yes]:active {
    cursor: url("Chalk.png"), auto;
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#chalkboard[eraser=yes]:hover {
    cursor: url("SmallEraser.png") 25 15, auto;
}

#chalkboard[eraser=yes]:active {
    cursor: url("SmallEraser.png") 25 15, auto;
    
}


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////

#chalkboard[texter=yes]:hover {
    cursor: url("https://github.com/SirBbarnes/Chalkboard/blob/main/Text.jpg?raw=true"), auto;
}

#chalkboard[texter=yes]:active {
    cursor: url("https://github.com/SirBbarnes/Chalkboard/blob/main/Text.jpg?raw=true"), auto;
}
*/