@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap";.signup{color:#fff;background-image:radial-gradient(rgb(139,139,139) 1px,transparent 0);background-size:40px 30px;height:100vh}.signup h2{margin-bottom:20px}.signup label{display:block;margin-bottom:5px}.signup input{display:block;width:100%;padding:5px;margin-bottom:1rem}.signup button{padding:10px 20px;background-color:var(--color1);color:#000;cursor:pointer;font-weight:500}.signup button:hover{background-color:var(--color2)}.login{color:#fff;background-image:radial-gradient(rgb(139,139,139) 1px,transparent 0);background-size:40px 30px;height:100vh}.login h2{margin-bottom:20px}.login label{display:block;margin-bottom:5px}.login input{display:block;width:100%;padding:5px;margin-bottom:1rem}.login button{padding:10px 20px;background-color:var(--color1);color:#000;cursor:pointer;font-weight:500;height:100%}.login button:hover{background-color:var(--color2)}header{background:var(--color1);color:#000;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 7%;position:sticky;top:0;z-index:1000}.logo{font-size:2vmax;font-weight:400;cursor:pointer}header div:nth-child(2){display:flex;gap:.5rem}.loginbtn{background:transparent;color:#000;font-size:1.2vmax;cursor:pointer;border-radius:20px;padding:.5rem 1rem;font-weight:500}.loginbtn:hover{background:white}.signupbtn,.logoutbtn{padding:.5rem 1rem;cursor:pointer;font-size:1.2vmax;background-color:#000;border-radius:20px;color:#fff}.signupbtn:hover,.logoutbtn:hover{background:var(--color1);background-color:#fff;color:#000}.signupbtn:hover{border:none}@media (max-width:768px){.logo{font-size:3vmax}.loginbtn,.signupbtn,.logoutbtn{font-size:2vmax}}@media (max-width:500px){.signupbtn,.logoutbtn{padding:.4rem .8rem}header{padding:1.2rem 3%}}.homepage{position:relative;top:0;left:0;background-image:radial-gradient(rgb(139,139,139) 1px,transparent 0);background-size:40px 30px;min-height:100vh;padding-top:2rem}.addicon{background-color:#000;border-radius:100%;padding:10px 20px;font-size:2.5vmax;color:#fff;display:inline-block;box-shadow:3px 3px 5px #fff;position:fixed;bottom:50px;left:48%;cursor:pointer}.addicon:hover{background-color:#fff;color:#000;box-shadow:none}.notes-container>h2{text-align:center;margin-bottom:1rem}.notes-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;word-wrap:break-word}.notes{background-color:var(--color1);color:#000;padding:1rem;border-radius:10px}.title h2{cursor:pointer}@media (max-width: 768px){.notes-list{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}.add-note-form,.edit-note-form{padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin-bottom:1rem}.add-note-form input,.add-note-form textarea,.edit-note-form input,.edit-note-form textarea{display:block;background-color:var(--color1);width:100%;padding:.5rem;margin-bottom:1rem}.add-note-form textarea,.edit-note-form textarea{max-width:100%}.add-note-form button,.edit-note-form button{background-color:#000;padding:.7rem;margin-right:.5rem;color:#fff;border-radius:10px;cursor:pointer}.editbtn{padding:.4rem .7rem;margin-top:.4rem;background-color:#000;color:#fff;border-radius:10px}.editbtn:hover{background-color:#fff;color:#000}@media (max-width: 920px){.addicon{left:47%}}@media (max-width: 500px){.addicon{left:45%}}@media (max-width: 600px){.add-note-form{padding:10px}}@media (min-width: 601px) and (max-width: 1024px){.add-note-form{padding:15px}}.note-container{background-color:var(--color1);color:#000;margin:16px;border-radius:4px;box-shadow:0 2px 4px #0000001a;word-wrap:break-word}.note-container h2{margin-bottom:8px}.delete{padding:.7rem;margin-top:1rem;background-color:var(--color1);background-color:#000;color:#fff;cursor:pointer}.delete:hover{background-color:#fff;color:#000}@media (max-width: 768px){.note-container{margin:12px}}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--color1: #f7d44c;--color2: #f6ecc9;--gray-color: gray;scroll-behavior:smooth;color:#fff}*{font-family:Inter,sans-serif;margin:0;padding:0;box-sizing:border-box;outline:none;border:none;text-decoration:none;list-style:none}*:before,*:after{margin:0;padding:0;box-sizing:border-box}a{color:inherit;display:inline-block}body{min-width:320px;min-height:100vh;background-color:#000}section{padding:5rem 7%}img,picture,svg,video{display:block;max-width:100%}.josefin-font{font-family:Josefin Sans,sans-serif}@media (max-width:500px){section{padding:5rem 3%}}