styles.css

/*
background brown: #221A0F;
red: #DC3958;
orange: #F06431;
yellow: #F79A32;
green: #889B4A;
cyan: #088649;
blue: #8AB1B0;
purple: #98676A;
light: #e4c6a5;
*/

.red{
    color: #dc322f !important;
}
.orange{
    color: #f06431 !important;
}
.yellow{
    color: #F79A32 !important;
}
.green{
    color: #889B4A !important;
}
.darkgreen{
    color: #088649 !important;
}
.cyan{
    color: #2aa198 !important;
}
.blue{
    color: #8ab1b0 !important;
}
.purple{
    color: #6c71c4 !important;
}
.pink{
    color: #d33682 !important;
}
.black{
    color: #221A0F;
}

*{
    font-family: "Noto Sans";
}
::selection{
    background-color: #d33682;
    color: #e4c6a5;
}
DOM, body{
    background-color: #221A0F;
}
#welcome h2{
    font-size: 48px;
}

/*1. letterly title*/

#header{
    color: #e4c6a5;
    font-weight: 100;
    font-size: 48px;
    text-align: center;
}


/*2. sentence title*/

h2{
    font-size: 36px;
    color: #e4c6a5;
    text-align: center;
    margin-top: 12px;
    margin-bottom: 12px;
}
#sentence{
    font-size: 48px;
}
.levelpanel h2 span{
    color: #221A0F;
    background-color: #e4c6a5;
}


/*3. words*/

#words{
    font-size: 28px;
    margin-left: 5%;
    margin-right: 5%;
    color: #e4c6a5;
    text-align: center;
}


/*4. letter*/

#letter{
    text-align: center;
    font-size: 64px;
    color: #DC3958;
}


/*5. continue button*/

.widebutton{
    width: 80%;
    margin-left: 9%;
    margin-right: 9%;
    color: #221A0F;
    font-size: 32px;
    border: #e4c6a5 2px solid;
    border-radius: 10px;
    outline: none;
}
.correct{
    background-color: #889B4A;
}
.correct:hover{
    background-color: #088649;
}
.incorrect{
    background-color: #dc3958;
}
.incorrect:hover{
    background-color: #dc322f;
}
.okay{
    background-color: #839496;
}
.okay:hover{
    background-color: #586e75;
}


/*6. multiple choice buttons*/

#multiplechoice button{
    width: 26%;
    margin-left: 3%;
    margin-right: 3%;
    background-color: #F79A32;
    color: #221A0F;
    font-size: 32px;
    border: #e4c6a5 2px solid;
    border-radius: 5px;
    outline: none;
}

#multiplechoice button:hover{
    background-color: #F06431;
}


/*7. pronunciation line*/

#letterinfo p{
    width: 49%;
    float: left;
    text-align: center;
    font-size: 32px;
}

#pronunciation{
    color: #98676A;
}

#pronunciation span{
    text-decoration: underline;
    color: #DC3958;
    font-weight: 700;
}

#listen{
    color: #8AB1B0;
    touch-action: manipulation;
}


/*8. input*/

input{
    width: 90%;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 1%;
    margin-bottom: 1%;
    border: #e4c6a5 2px solid;
    background-color: #221A0F;
    font-size: 48px;
    color: #DC3958;
    outline: none;
    border-radius: 10px;
}

input::placeholder{
    color: #DC3958;
    font-family: 'Noto Sans';
}

/*9. keyboard*/

.keyboard{
    width: 84%;
    margin-left: 8%;
    margin-right: 8%;
    border: 2px #98676A solid;
    border-radius: 10px;
}
#keyboard{
    height: 170px;
}
#numberkeyboard{
    height: 50px;
}
#numberkeyboard div{
    width: 7%;
}

.key, .pseudokey{
    background-color: #e4c6a5;
    height: 30px;
    width: 5.4%;
    float: left;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    margin-left: 0.8%;
    margin-right: 0.8%;
    margin-top: 6px;
    margin-bottom: 6px;
    border-radius: 5px;
}

.key:active, .pseudokey:active{
    background-color: #DC3958;
}

.bluekey{
    background-color: #268bd2;
    height: 30px;
    width: 5.4%;
    float: left;
    margin-left: 0.8%;
    margin-right: 0.8%;
    margin-top: 6px;
    margin-bottom: 6px;
    border-radius: 5px;
}

.mediumbluekey{
    background-color: #268bd2;
    height: 30px;
    width: 7.4%;
    float: left;
    margin-left: 0.8%;
    margin-right: 0.8%;
    margin-top: 6px;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    border-radius: 5px;
}

.largebluekey{
    background-color: #268bd2;
    height: 30px;
    width: 12.4%;
    float: left;
    margin-left: 0.8%;
    margin-right: 0.8%;
    margin-top: 6px;
    margin-bottom: 6px;
    border-radius: 5px;
}

.orangekey{
    background-color: #F06431;
    height: 30px;
    width: 13.4%;
    float: left;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    margin-left: 0.8%;
    margin-right: 0.8%;
    margin-top: 6px;
    margin-bottom: 6px;
    border-radius: 5px;
}

/*10. enter button*/

#enterbutton{
    background-color: #8ab1b0;
}
#enterbutton:hover{
    background-color: #268bd2;
}

/* MENU AREA */

#menu_header{
    color: #e4c6a5;
    text-align: center;
}
.script{
    text-align: left;
    height: auto;
    margin-bottom: 1%;
    padding: 10px;
    border-radius: 50px;
    background-color: #221A0F;
    border: #e4c6a5 4px solid;
    color: #e4c6a5;
}
.script h2{
    color: #e4c6a5;
}
.scriptexplanation{
    text-align: center;
    font-style: italic;
    font-size: 18px;
    margin: 3%;
}
#change p{
    margin: 0;
}
#changelog{
    background-color: #e4c6a5;
}
.metadiv{
    background-color: #e4c6a5;
    color: #221a0f;
    border: none;
}
.metadiv a, .metadiv h2{
    color: #221a0f;
}
#table{
    background-color: #e4c6a5;
}
#table a{
    font-size: 28px;
    text-decoration: none;
    font-weight: 600;
}
#table p{
    margin-left: 2%;
    margin-right: 2%;
}
#table span:hover{
    text-decoration: underline;
}
.levelbox{
    height: 70px;
    width: 98%;
    margin-left: 2%;
}
@media(max-width: 900px){
    .levelbox{
        height: 130px;
    }
}
.levelpanel h2{
    text-align: left;
    font-size: 32px;
    margin-left: 2%;
}
.levelpanel p{
    text-align: left;
    font-size: 20px;
    padding-left: 2%;
    padding-right: 2%;
}
.levelbox div{
    line-height: 155%;
    font-weight: 700;
    text-align: center;
    border: 3px solid #e4c6a5;
    float: left;
    height: 55px;
    width: 50px;
    margin-right: 5px;
    border-radius: 15px;
}
.levelbox div:hover{
    background-color: #e4c6a5;
    color: #221A0F;
}
.levelbox div span{
    font-size: 175%;
}
#changelog a{
    color: #221A0F;
    text-decoration: none;
}
#changelog a:hover{
    text-decoration: underline;
}
.calendar{
    font-weight: 700;
}
.calendar span{
    font-size: 80%;
}

/* */
#root{
    display: none;
}
@font-face {
    font-family: urduFont;
    src: url(fonts/urduFont.ttf);
}
.urduFont{
    font-family: urduFont;
}
@font-face {
    font-family: adlamFont;
    src: url(fonts/adlamFont.ttf);
}
.adlamFont{
    font-family: adlamFont;
}
hr{
    border: none;
    height: 4px;
    width: 96%;
    background-color: #e4c6a5;
    margin-bottom: 20px;
}
#changelog hr{
    background-color: #221a0f;
    margin-bottom: 10px;
}