@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*,*:before,*:after{box-sizing:border-box}.menu-btn input:checked{transform:translateY(-.5rem);transition:all .2s ease-in-out}.menu-btn input:hover,.menu-btn:hover{cursor:pointer}.add-note-btn:active{transform:scale(.8);transition:all .8s ease-in}.note-template:hover{box-shadow:.5rem .4rem .2rem #1d1b1b80;transform:scale(1.02)}.add-note-form:hover{box-shadow:.5rem .4rem .2rem #1d1b1b80}.add-note-form input:hover{background-color:#f4f4f4;color:var(--font-color-light);transform:scale(1.05)}.add-note-form input:focus{background-color:#f4f4f4;color:var(--font-color-light);transform:scale(1.1)}:root{--font: "Poppins", sans-serif;--accent-color: #4E8BC4;--primery-color: #96CBFC;--secoundary-color: #C2E1FC;--fore-ground-color: rgb(29, 27, 27);--background-color: #DFC3E3;--card-background-color: rgb(236, 236, 236);--font-color: #2a2a2a;--font-color-light: #feecfd;--menu-width: 2.1rem;--menu-height: .3rem;--menu-gap: .25rem;overflow-x:hidden}.nevigation-bar{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding:0rem 1rem;border-radius:1rem;position:relative;margin-bottom:1rem}.logo-header{font-size:1.5rem;text-wrap:nowrap;font-family:var(--font);font-weight:800;color:var(--accent-color);margin:0rem}.card-container{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}.add-note-btn{color:var(--font-color-light);position:fixed;font-size:2rem;font-family:var(--font);font-weight:600;width:5.5rem;height:5rem;min-height:20px;min-width:50px;max-height:100px;max-width:150px;border-radius:1rem;border:none;margin-top:.5rem;transition:all .3s cubic-bezier(.55,0,.67,1.25);z-index:1}.drag-drop-menu{display:flex;justify-content:space-between;padding:0rem 1rem;width:32%;max-width:300px;height:98%;border-radius:2rem;margin-top:7px;position:fixed;top:0%;background-color:#ececec99;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:0 0 .5rem #1d1b1b33;transition:all .2s cubic-bezier(.55,0,.67,1.25)}.note-template{display:flex;flex-direction:column;flex-wrap:wrap;position:relative;background:#ffc2d9;background:linear-gradient(135deg,#dfc3e3 45%,#ececec 45%);height:9rem;margin-top:2rem;padding:1rem;width:100%}.add-note-form{display:none;flex-direction:column;flex-wrap:wrap;position:relative;justify-content:space-between;justify-self:center;align-self:center;background-color:var(--card-background-color);padding:1rem;width:33%;min-width:300px;max-width:300px;height:10rem;transition:all .2s ease-in-out}.add-note-form input{font-size:1rem;font-family:var(--font);font-weight:600;color:var(--accent-color);margin:0rem;width:100%;padding:.5rem 1rem;border:none;background-color:var(--card-background-color);margin:.2rem;transition:all .1s ease-in-out}.save-btn{background-color:var(--primery-color);color:var(--font-color-light);font-size:.8rem;font-family:var(--font);font-weight:600;width:50%;min-width:70px;padding:.5rem 1rem;border-radius:.5rem;border:none;margin-top:.5rem;transition:all .2s ease-in-out}.menu-btn{width:var(--menu-width);height:var(--menu-height);background-color:var(--fore-ground-color);border-radius:.5rem;border:none;margin:.8rem}.menu-btn:after,.menu-btn input{content:"";width:var(--menu-width);height:var(--menu-height);background-color:var(--fore-ground-color);border-radius:.5rem}.menu-btn:after{top:25%}.menu-btn input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;margin:0rem;transition:all .2s ease-in-out}@media (min-width: 1200px){.nevigation-bar{height:5%}.add-note-btn{width:5.5rem;height:5rem;font-size:1rem;left:92%;transform:translate(-100%);top:84%}}@media (max-width: 1200px) and (min-width: 0px){.add-note-btn{width:5.5rem;height:5rem;font-size:1rem;left:80%;transform:translate(-30%);top:84%}}@media (max-width: 992px) and (min-width: 0px){.add-note-btn{font-size:.8rem;min-width:90px;left:80%;transform:translate(-50%);top:84%}}@media (max-width: 700px) and (min-width: 0px){.logo-header{font-size:1.3rem;text-wrap:nowrap;font-family:var(--font);font-weight:800;color:var(--accent-color);margin:0rem}.drag-drop-menu{width:48%}.add-note-btn{font-size:1rem;min-height:60px;min-width:60px;left:70%;transform:translate(-100%);top:85%}}@media (max-width: 600px) and (min-width: 0px){.logo-header{font-size:1.3rem;text-wrap:nowrap;font-family:var(--font);font-weight:800;color:var(--accent-color);margin:0rem}.note-template{width:100%;height:8rem}.add-note-btn{font-size:1rem;width:5.5rem;height:5rem;min-height:60px;min-width:60px;left:50%;transform:translate(-80%);top:95%}}@media (max-width: 500px) and (min-width: 0px){.logo-header{font-size:1.3rem;text-wrap:nowrap;font-family:var(--font);font-weight:800;color:var(--accent-color);margin:0rem}.note-template{width:100%;height:6rem}.add-note-btn{font-size:1rem;width:5.5rem;height:5rem;min-height:60px;min-width:60px;left:50%;transform:translate(-80%);top:95%}}.note-card:hover{box-shadow:.5rem .4rem .2rem #1d1b1b80;transform:scale(1.02)}.edit-btn:hover{background-color:var(--accent-color);color:var(--font-color-light);transform:scale(1.05);transition:all .1s ease-in-out}.delete-btn:hover{background-color:red;color:var(--font-color-light);transform:scale(1.05);transition:all .1s ease-in-out}.note-card{display:flex;flex-direction:column;flex-wrap:wrap;position:relative;justify-content:space-between;background:#ffc2d9;background:linear-gradient(135deg,#dfc3e3 50%,#ececec 50%);padding:1rem;width:32%;max-width:300px;height:9rem;transition:all .2s ease-in}.note-id{font-size:1rem;font-family:var(--font);font-weight:600;color:var(--accent-color);margin:0rem}.note-type{font-size:.7rem;font-family:var(--font);font-weight:600;color:var(--font-color-light);margin-top:0rem}.edit-btn{background-color:var(--primery-color);color:var(--font-color-light);font-size:.8rem;font-family:var(--font);font-weight:600;width:70%;min-width:50px;padding:.5rem 1rem;border-radius:.5rem;border:none;margin-top:.5rem;transition:all .2s ease-in-out}.delete-btn{background-color:red;width:25%;min-width:50px;position:absolute;left:70%;top:58.5%;padding:.5rem 1rem;border-radius:.5rem;border:none;margin-top:.5rem;transition:all .2s ease-in-out}.delete-icon{width:1rem;height:1rem}@media (min-width: 1200px){.nevigation-bar{height:5%}.add-note-btn{left:92%;top:84%}}@media (max-width: 1200px) and (min-width: 0px){.add-note-btn{left:90%;top:84%}}@media (max-width: 992px) and (min-width: 0px){.note-card{width:30%}}@media (max-width: 700px) and (min-width: 0px){.note-card{width:48%}}@media (max-width: 600px) and (min-width: 0px){.note-card{width:48%}.edit-btn{width:50%}.delete-btn{width:25%}}