.card{width:350px;border-radius:5px;box-shadow:0 1px 1px #00000013,0 2px 2px #00000013,0 4px 4px #00000013,0 8px 8px #00000013,0 16px 16px #00000013;position:absolute}.card-header{background-color:#9bd1de;border-radius:5px 5px 0 0;display:flex;justify-content:space-between;align-items:center;padding:5px;cursor:grab}.card-header .delete-btn{display:flex;justify-content:center;align-items:center}.card-body{padding:1em;border-radius:0 0 5px 5px}.card-body textarea{background-color:inherit;border:none;width:100%;height:100%;resize:none;font-size:16px}.card-body textarea:focus{outline:none}.color{background-color:gray;height:35px;width:35px;border-radius:50%;cursor:pointer;transition:.3s}.color:hover{height:45px;width:45px}#controls{display:flex;flex-direction:column;gap:1em;align-items:center;position:fixed;left:1em;top:50%;transform:translateY(-50%);background-color:#35363e;padding:.7em;border-radius:40px;box-shadow:0 1px 1px #00000013,0 2px 2px #00000013,0 4px 4px #00000013,0 8px 8px #00000013,0 16px 16px #00000013;z-index:1000000}#controls #add-btn{display:flex;justify-content:center;align-items:center;height:50px;width:50px;border-radius:50%;cursor:pointer;transition:.3s}#controls .color-options{display:inherit;flex-direction:inherit;align-items:center;gap:.65em;height:auto;overflow:auto}#controls #add-btn:hover{height:55px;width:55px}.info-btn{position:fixed;top:18px;right:18px;display:flex;justify-content:center;box-shadow:0 1px 1px #00000013,0 2px 2px #00000013,0 4px 4px #00000013,0 8px 8px #00000013,0 16px 16px #00000013;z-index:1}.modal-wrapper{position:fixed;background-color:#000000b3;top:0;bottom:0;left:0;right:0;z-index:1000000;display:flex;justify-content:center;align-items:center}.modal-wrapper .modal-content{cursor:pointer;border-radius:25px;max-width:80%}.modal-wrapper .modal-content h2,.modal-wrapper .modal-content p{margin:0}.modal-wrapper .modal-content .modal-header{border-top-right-radius:8px;border-top-left-radius:8px;padding:.4em .8em}.modal-wrapper .modal-content .modal-header img{width:42px}.modal-wrapper .modal-content .modal-header .title{display:flex;justify-content:center;align-items:center;gap:1em}.modal-wrapper .modal-content .modal-header .title-2{font-weight:500}.modal-wrapper .modal-content .modal-body{border-bottom-left-radius:8px;border-bottom-right-radius:8px;padding:.4em .8em}.modal-wrapper .modal-content .modal-body a{text-decoration:none;font-weight:600;padding:1em 0}.modal-wrapper .modal-content .modal-body ul div{margin:.5rem 0}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{padding:0;margin:0}#app{background-color:#212228;background-image:linear-gradient(#292a30 .1em,transparent .1em),linear-gradient(90deg,#292a30 .1em,transparent .1em);background-size:4em 4em;height:100vh;position:relative;overflow:auto}svg:hover{cursor:pointer}