*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}.App{width:100%;display:flex;text-align:center;justify-content:center;flex-direction:column;align-items:center;background:rgb(0,212,255);background:linear-gradient(90deg,rgba(0,212,255,1) 3%,rgba(120,212,208,.9304096638655462) 23%,rgba(59,52,176,1) 99%)}.NavbarItems{display:flex;justify-content:space-between;align-items:center;font-size:1.2rem;padding:0 30px;background-color:#222;box-shadow:0 5px 15px #00000040;width:95%;height:80px;border-radius:13px;position:fixed;top:20px;left:50%;transform:translate(-50%)}.logo{color:#fff;justify-self:start;cursor:pointer}.fa-sticky-note{margin-left:.2rem;font-size:1.6rem}.nav-menu{display:grid;grid-template-columns:repeat(6,auto);grid-gap:10px;list-style:none;align-items:center;text-align:center;justify-content:end}.nav-links{text-decoration:none;color:#fff;padding:.7rem 1rem;white-space:nowrap}.nav-links i{padding-right:10px}.nav-links:hover{background:rgb(80,80,238);border-radius:4px;transition:all .2s ease-in-out}.fa-bars,.fa-times{color:#fff}.menu-icons{display:none}.nav-links-mobile{padding:.5rem 1rem;white-space:nowrap;background-color:#fafafa;border-radius:3px;text-decoration:none;font-size:1rem;color:#222;font-weight:500}.home-link{text-decoration:none;color:#fff;padding:.7rem 1rem;white-space:nowrap}@media screen and (max-width: 850px){.NavbarItems{z-index:99}.nav-menu{display:flex;flex-direction:column;justify-content:flex-start;background:rgba(255,255,255,.25);width:100%;box-shadow:0 8px 32px #1f26875e;backdrop-filter:blur(4px);border-radius:13px;height:auto;position:absolute;top:0;left:-110%;align-items:stretch;padding:80px 0 30px;margin:0;z-index:-1;transition:all .5s ease-in-out}.nav-menu.active{left:0;transition:.3s}.nav-links{display:block;padding:2rem 0;color:#222}.nav-links:hover{background:rgba(255,255,255,.25);backdrop-filter:blur(20px)}.menu-icons{display:block;position:absolute;top:0;right:0;transform:translate(-100%,60%);font-size:1.8rem;cursor:pointer}.nav-links-mobile{padding:1.5rem;display:block;text-align:center;font-size:1.3rem;font-weight:700;width:80%;margin:auto}}.home{width:100%;height:100vh;text-align:center;display:flex;justify-content:center;flex-direction:column;background:rgb(0,212,255);background:linear-gradient(90deg,rgba(0,212,255,1) 3%,rgba(120,212,208,.9304096638655462) 23%,rgba(59,52,176,1) 99%)}button{width:100px;height:50px}.home-text{font-size:2rem;color:#fff;margin-bottom:20px}.home-title{font-size:4rem;color:#fff;margin-bottom:20px}.welcome-form{display:flex;flex-direction:row;justify-content:center;align-items:center;margin-bottom:20px}.welcome-form input{width:300px;height:50px;border-radius:5px;border:none;padding:0 20px;font-size:1.2rem}.welcome-form button{width:100px;height:50px;border-radius:5px;border:none;background:#fff;color:#000;font-size:1.2rem;margin-left:10px}.welcome-form button:hover,.welcome-form button:active{background:#000;color:#fff}.welcome-form button:focus{outline:none}.home-btn{width:100px;height:50px;border-radius:5px;border:none;background:#fff;color:#000;font-size:1.2rem;margin-left:10px}.home-btn:hover,.home-btn:active{background:#000;color:#fff}.home-btn:focus{outline:none}.home-btn .btn-note{text-decoration:none}.addNote{width:100%;display:flex;justify-content:center}.formNote{display:flex;flex-direction:column;width:70%}.field{border:2px solid rgba(0,0,0,0);outline:none;background-color:#e6e6e699;padding:.5rem 1rem;font-size:1.1rem;margin-bottom:22px;transition:.3s}.btn{padding:.5rem 1rem;background-color:#2ecc71;color:#fff;font-size:1.1rem;border:none;outline:none;cursor:pointer;transition:.3s}.notes{padding-top:25%;width:100%}.noteContainer{display:grid;margin-top:20px;padding:3%}.notes_table{display:grid;width:100%;border-collapse:collapse;background-color:beige;border-spacing:0;border:1px solid #ddd}.styled-table{border-collapse:collapse;font-size:.9em;min-width:400px;box-shadow:0 0 20px #00000026}.styled-table thead tr{background-color:#009879;color:#fff;text-align:left}.styled-table th,.styled-table td{padding:12px 15px}.styled-table tbody tr{border-bottom:1px solid #ddd}.styled-table tbody tr:nth-of-type(even){background-color:#f3f3f3}.styled-table tbody tr:last-of-type{border-bottom:2px solid #009879}.noteContainer:after{content:"";position:absolute;width:100%;height:100%;left:0;top:0;background:url(/img/bg.jpg) no-repeat center;background-size:cover;filter:blur(50px);z-index:-1}.eachNote{display:flex;padding:1rem;align-items:center;justify-content:space-between}.timeStamp{font-size:.8rem;color:#999;display:flex;align-items:center;justify-content:space-between}.timeStamp .timeStamp-Created-At{margin-right:10px}.btn-Control{display:flex;justify-content:space-between;width:100%;height:50px}.delete-btn{background-color:#f44336;height:35px;border:none;color:#fff;text-align:center;text-decoration:none;display:inline-block;font-size:14px;margin:4px 2px;cursor:pointer;border-radius:20px}.edit-btn{background-color:#4caf50;height:35px;border:none;color:#fff;text-align:center;text-decoration:none;display:inline-block;font-size:14px;margin:4px 2px;cursor:pointer;border-radius:20px}.container{width:100%;height:100vh;display:flex;text-align:center;justify-content:center;flex-direction:column;align-items:center;padding:20px 100px;background:rgb(222,66,66);background:linear-gradient(90deg,rgb(226,118,118) 0%,rgb(107,40,40) 94%)}.container:after{content:"";position:absolute;width:100%;height:100%;left:0;top:0;background:url(/img/bg.jpg) no-repeat center;background-size:cover;filter:blur(50px);z-index:-1}.contact-box{max-width:850px;display:grid;grid-template-columns:repeat(2,1fr);justify-content:center;align-items:center;text-align:center;background-color:#fff;box-shadow:0 0 19px 5px #00000030}.left{background:url(/img/bg.jpg) no-repeat center;background-size:cover;height:100%}.right{padding:25px 40px}h2{position:relative;padding:0 0 10px;margin-bottom:10px}h2:after{content:"";position:absolute;left:50%;bottom:0;transform:translate(-50%);height:4px;width:50px;border-radius:2px;background-color:#2ecc71}.field{width:100%;border:2px solid rgba(0,0,0,0);outline:none;background-color:#e6e6e699;padding:.5rem 1rem;font-size:1.1rem;margin-bottom:22px;transition:.3s}.field:hover{background-color:#0000001a}textarea{min-height:150px}.btn{width:100%;padding:.5rem 1rem;background-color:#2ecc71;color:#fff;font-size:1.1rem;border:none;outline:none;cursor:pointer;transition:.3s}.btn:hover{background-color:#27ae60}.field:focus{border:2px solid rgba(30,85,250,.47);background-color:#fff}@media screen and (max-width: 880px){.contact-box{grid-template-columns:1fr}.left{height:200px}}