#modal{width:300px;height:200px;background-color:#1a1a1a;box-shadow:#111 0 10px 10px;color:#1a1a1a;border:solid 1px #2d2d2d;flex-direction:column;align-items:center;justify-content:space-between;padding:22px;border-radius:32px;font-size:24px;font-weight:700;text-align:center;font-family:monospace;overflow:hidden}#modal[open]{display:flex;scale:1;transition:all .3s ease-in-out}@starting-style{#modal[open]{scale:0}}#modal p{margin:0;color:#ededed}#modal footer{display:flex;justify-content:space-between;width:100%;gap:10px}#modal footer button{width:100%;padding:10px;margin-top:10px;border:none;border-radius:10px;color:#0a0a0a;font-weight:700;cursor:pointer;transition:all .3s ease}#modal footer #cancel-button{color:#ededed;background-color:transparent;text-decoration:underline}#modal footer #cancel-button:hover{color:#0a0a0a;background-color:#ededed;text-decoration:none}#modal footer #confirm-delete-button{background-color:#ededed}#modal footer #confirm-delete-button:hover{background-color:#ccc}.tooltip{position:relative;display:inline-block}.tooltip .tooltiptext{visibility:hidden;width:max-content;background-color:#ededed;color:#0a0a0a;font-size:14px;font-weight:700;text-align:center;border-radius:6px;padding:5px 10px;box-shadow:#080808 0 0 10px;position:absolute;z-index:100;top:-35px;left:14%}.tooltip:hover .tooltiptext{visibility:visible}@media (max-width: 768px){.header{padding:0 36px!important;margin-bottom:10px}.header h1{padding:0 0 0 10px!important;margin:0!important;font-size:medium}#app{height:auto!important;flex-direction:column}main .textarea-container{width:300px;height:400px}aside{height:380px!important;margin-bottom:10px}}*,*:after,*:before{box-sizing:border-box}body{display:grid;grid-template-rows:62px 1fr;margin:0;padding:0;height:100dvh;width:100%;background-color:#000;font-family:monospace;color:#fff}body .header{display:flex;justify-content:center;padding:0 228px;background-color:#0a0a0a;border-bottom:1px solid #2d2d2d}body .header .logo{display:flex;flex-direction:row;align-items:center}body .header h1{padding:10px;margin:0}#app{display:flex;align-items:center;justify-content:center;gap:10px}main{display:flex;flex-direction:column;align-items:center}.textarea-container{width:600px;height:451px;padding:22px;background-color:#1a1a1a;border-radius:22px;overflow:hidden;border:1px solid #2d2d2d;transition:all .3s ease}.textarea-container:focus-within{border:1px solid #ededed}textarea{width:100%;height:100%;resize:none;font-family:monospace;font-size:larger;background-color:transparent;border:none;outline:none;padding:0 8px 0 0;overflow:auto;color:#ededed}textarea::-webkit-scrollbar{width:8px;background-color:#454545;border-radius:22px}textarea::-webkit-scrollbar-thumb{background-color:#878787;border-radius:22px}aside{display:flex;flex-direction:column;justify-content:space-between;width:300px;height:451px;padding:12px;background-color:#1a1a1a;color:#ededed;text-align:center;border-radius:22px;border:1px solid #2d2d2d}aside .aside-header{display:flex;flex-direction:column}aside .words-count-container{width:100%;height:auto;padding:6px 12px;display:flex;align-items:center;font-size:larger;border-radius:10px;cursor:default;overflow:hidden;transition:all .3s ease}aside .words-count-container h2{margin:0}aside .words-count-container span{margin-left:4px;font-size:24px}aside .words-count-container:hover{background-color:#292929}aside footer{display:flex;gap:10px}aside footer button{width:100%;padding:10px;margin-top:10px;border:none;border-radius:10px;background-color:#ededed;color:#0a0a0a;cursor:pointer;transition:all .3s ease}aside footer button:hover{background-color:#ccc}