*{padding:0;margin:0;box-sizing:border-box;font-family:sans-serif}body{background-color:#333;color:#ccc}#main-container{display:flex}#main-container #sidebar{min-width:300px;width:300px;height:100vh;background-color:#222;position:sticky;top:0;left:0;bottom:0;overflow-y:auto}#main-container #sidebar::-webkit-scrollbar-thumb{background:#888;border-radius:4px}#main-container #sidebar::-webkit-scrollbar-track{background:#555}#main-container #sidebar::-webkit-scrollbar{width:8px}#main-container #sidebar #typing-history{display:flex;flex-direction:column;gap:5px;margin:5px}#main-container #sidebar #typing-history div{background-color:#333;padding:15px 20px;border-radius:8px;display:flex;flex-direction:column;justify-content:center;gap:10px}#main-container #sidebar #typing-history div h3{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#main-container #sidebar #typing-history div div{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0}#main-container #sidebar #typing-history div div span{font-weight:600}#main-container #typing-container{width:100%;min-width:300px;max-width:1024px;margin:0 auto;padding:20px;display:flex;flex-direction:column}#main-container #typing-container #actions{padding:10px;display:flex;justify-content:center}#main-container #typing-container #actions #change-ayah{border:none;outline:none;font-size:large;font-weight:600;text-transform:uppercase;padding:15px 30px;border-radius:5px;background-color:#283c5e;color:#ccc;cursor:pointer;transition:transform .3s}#main-container #typing-container #actions #change-ayah:active{transform:scale(.8)}#main-container #typing-container #typing-area{min-height:100px;background-color:#fff9;color:#333;font-size:xx-large;border-radius:10px 10px 0 0;padding:20px 30px;line-height:48px;display:flex;align-items:center;flex-wrap:wrap;-webkit-user-select:none;user-select:none}#main-container #typing-container #typing-area span{color:#777;white-space:pre}#main-container #typing-container #typing-area span.typed{color:#006100cc;background-color:#00610021}#main-container #typing-container #typing-area span.mistyped{background-color:#ff000021}#main-container #typing-container #typing-field{border-radius:0 0 10px 10px;background-color:#fff9;color:#333;font-size:xx-large;line-height:48px;padding:20px 30px;border:2px solid #999999;border-width:2px 0 0 0;outline:none;resize:vertical;scrollbar-width:none}#main-container #typing-container #typing-field::placeholder{color:#999}#main-container #typing-container #display-stats{padding:20px;display:flex;justify-content:center;gap:20px}#main-container #typing-container #display-stats #words,#main-container #typing-container #display-stats #wpm,#main-container #typing-container #display-stats #timer{background-color:#fff3;min-width:160px;padding:15px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px}#main-container #typing-container #display-stats #words h1,#main-container #typing-container #display-stats #words p,#main-container #typing-container #display-stats #wpm h1,#main-container #typing-container #display-stats #wpm p,#main-container #typing-container #display-stats #timer h1,#main-container #typing-container #display-stats #timer p{font-family:monospace}#main-container #typing-container #display-stats #words h1,#main-container #typing-container #display-stats #wpm h1,#main-container #typing-container #display-stats #timer h1{font-size:48px}#main-container #typing-container #display-stats #words p,#main-container #typing-container #display-stats #wpm p,#main-container #typing-container #display-stats #timer p{font-size:20px}