*{transition:all .1s;padding:0;margin:0;font-family:monospace}body{overflow:auto;color:var(--font-color);background-color:var(--bg-body)}.navbar{display:flex;border-radius:50px;margin:5px;gap:20px;padding:15px 35px;background-color:var(--bg-color);justify-content:space-between;align-items:center}.navbar h1{color:var(--font-color);font-size:30px}.ttl-mode{display:flex;justify-content:space-around;width:300px}.container-night-mode{box-shadow:inset 0 .3px 1px #00000069;background-color:var(--theme-color);width:70px;height:30px;border-radius:500px;margin:auto;display:flex;z-index:9}.night-mode{cursor:pointer;margin:auto;z-index:-9999}.night-mode:before{content:"";display:block;position:absolute;border-radius:50px;width:24.5px;height:24.5px;margin-left:14px;margin-top:-5.8px;background:url(/assets/light-LuPv0HY-.png) no-repeat;background-size:20px;background-position:center;z-index:99999999999;background-color:var(--sd-inner-button);box-shadow:0 0 0 2px #fff,-2px 3px 9px 1px var(--sd-button),inset -10px -10px 5px #ffffff9c;transition:all 1s}.night-mode:after{background-color:var(--theme-color);content:"LIGHT MODE";color:var(--theme-font-color);box-shadow:inset 0 0 5px 0 var(--sd-button);font-weight:900;text-wrap:wrap;font-size:10px;display:flex;align-items:center;justify-content:center;text-align:center;margin-left:-26px;margin-top:-6px;border-radius:500px;padding-right:5px;width:45px;height:25px;z-index:99999;transition:all 1s}.night-mode:checked:before{content:"";display:block;position:absolute;border-radius:50px;width:24.5px;height:24.5px;margin-left:-26px;margin-top:-5.8px;background:url(/assets/dark-B8tXIac2.png) no-repeat;background-size:20px;background-position:center;z-index:99999999999;background-color:#eaeaea;box-shadow:0 0 0 2px #fff,0 0 4px 5px var(--sd-button),inset -10px -10px 10px #ffffff8e;transition:all 1s}.night-mode:checked:after{background-color:var(--theme-color);content:"DARK MODE";color:var(--theme-font-color);box-shadow:inset 0 0 20px 5px var(--sd-button);font-weight:900;text-wrap:wrap;font-size:10px;display:flex;align-items:center;justify-content:center;text-align:center;margin-top:-6.1px;margin-left:-11px;border-radius:500px;padding-left:10px;width:35px;height:25px;z-index:99999;transition:all 1s}.navbar .searchbar{display:flex;justify-content:space-around;align-items:center;background-color:#fff;border:1px solid rgb(255,255,255);height:30px;max-width:500px;min-width:100px;border-radius:50px;padding:0 5px 0 0}.navbar img{-webkit-user-drag:none;cursor:pointer;margin:5px;width:20px;padding:2px;transition:.2s}.navbar img:hover{rotate:90deg;transition:50ms}.navbar .searchbar input{color:var(--font-color);font-weight:bolder;max-width:500px;min-width:100px;text-align:center;height:30px;font-size:15px;border:none;border-radius:90px;outline:none}.container{width:90%;margin:auto;padding:10px}.title{text-decoration:underline;font-size:2.5rem;margin:20px 0}.list-notes{display:flex;flex-wrap:wrap;justify-content:space-around;gap:20px 10px}.note{text-wrap:wrap;height:min-content;min-width:190px;width:calc(11px + 19vw);max-width:300px;border:solid black 1px;padding:10px;border-radius:10px}.note h1{padding:5px;text-wrap:wrap;max-width:100px}.note q{font-weight:900;font-style:italic;margin:5px}.note p{padding:2px}.button{display:flex;justify-content:space-around;margin-top:10px}.button button{height:25px;width:70px;border-radius:50px;border:none;background-color:var(--font-color);color:var(--bg-color);cursor:pointer;transition:all .1s}.button button:hover{scale:1.1;background-color:var(--bg-color);color:var(--font-color)}:root{--sd-inner-button: rgb(219, 219, 219);--bg-color: rgb(227, 220, 236);--font-color: rgb(65, 50, 83);--theme-color: rgb(255, 255, 255);--theme-font-color: rgb(180, 180, 180);--sd-button: rgba(124, 124, 124, .45);--bg-body: rgb(236, 236, 236);--bg-form: rgba(236, 236, 236, .8)}[data-theme=dark]{--bg-form: rgba(65, 65, 65, .8);--bg-body: rgb(65, 65, 65);--sd-button: rgb(71, 71, 71);--theme-color: rgb(0, 0, 0);--theme-font-color: rgb(255, 255, 255);--bg-color: rgb(57, 56, 56);--font-color: rgb(206, 206, 206)}.cover-added{position:fixed;background-color:rgba(var(--bg-color),.5);box-shadow:5px 0 10px 1px var(--font-color);rotate:45deg;right:30px;bottom:30px;width:calc(50px + 3vw);aspect-ratio:1/1;border-radius:20px;display:flex;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;transition:all .5s}.cover-added:hover{background-color:var(--font-color);transition:all .2s}.cover-added:active{scale:1.1;background-color:rgba(var(--bg-color),1);opacity:.5}.button-added{transform:rotate(-45deg);width:10px;margin:auto;height:10px;aspect-ratio:1/1}.button-added .obj1{width:10px;margin:auto;height:10px;z-index:99999}.button-added .obj1:before{content:"";display:block;height:25px;width:8px;margin-top:1px;margin-left:1px;background-color:#3cff00}.button-added .obj1:after{content:"";display:block;height:25px;width:8px;margin-top:-42px;margin-left:1px;background-color:red;z-index:9999}.button-added .obj2:before{content:"";display:block;height:17px;width:8px;rotate:90deg;margin-top:-12.6px;margin-left:-11.6px;background-color:#fbff00;z-index:-99}.button-added .obj2:after{content:"";display:block;height:17px;width:0;rotate:90deg;border-bottom:8px solid transparent;border-right:8px solid #0004ff;margin-top:-20.9px;margin-left:9.4px;background-color:transparent}.bg-form{position:fixed;height:100%;width:100%;display:flex;justify-content:center;align-items:center;background-color:#00000097;left:0;right:0;top:0;bottom:0}.close{height:25px;width:25px;position:absolute;z-index:999999;cursor:pointer;top:20px;right:20px;display:flex}.close img{margin:auto;width:15px;aspect-ratio:1/1}.close:hover{scale:1.1}.container-form{box-shadow:0 10px 20px 0 var(--font-color);transition:.5s;width:80%;max-width:700px;transition:1s;height:400px;margin:auto;left:0;right:0;top:0;bottom:0;position:fixed;background-color:var(--bg-form);border-radius:20px;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.container-form form{gap:5px;flex-direction:column;width:80%;height:fit-content;margin:10px auto;display:flex}.container-form form input{margin:5px auto;border-radius:10px}.container-form h1{font-size:2.4rem;padding-top:20px;text-align:center}.container-form form label{text-align:right;margin-right:80px}.title-note{height:35px;padding:1px 10px;width:80%;background-color:var(--bg-form);color:var(--font-color);border:1px solid var(--font-color);outline-color:#7bcc00}.body-note{background-color:var(--bg-form);color:var(--font-color);border:1px solid var(--font-color);padding:5px 10px;resize:none;font-size:15px;margin:auto;border-radius:10px;width:80%}.container-form form button{background-color:var(--font-color);color:var(--bg-color);height:30px;margin:10px auto;width:40%;border-radius:10px}.container-form form button:hover{background-color:var(--bg-color);color:var(--font-color);border:1px solid var(--font-color)}