@import"https://fonts.googleapis.com/css2?family=Courgette&display=swap";@import"https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap";.courgette-regular{font-family:Courgette,serif;font-weight:400;font-style:normal}.berkshire-swash-regular{font-family:Berkshire Swash,serif;font-weight:400;font-style:normal}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;transition:background-color .3s ease,color .3s ease}.header{background-color:#333;padding:10px 20px;box-shadow:0 2px 5px #0000001a}.nav{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:10px}.nav-link{color:#f7f7f7;text-decoration:none;font-size:1rem;margin:0 15px;transition:color .3s ease}.nav-link:hover{color:tomato}.nav-link.active{font-weight:700;border-bottom:2px solid #ff6347}@media (max-width: 768px){.nav{flex-direction:column;align-items:flex-start}.nav-link{margin:10px 0}}@media (max-width: 480px){.nav-link{font-size:.9rem}}main{padding:20px}.nav-link.active{color:tomato}.quote-item{background:linear-gradient(135deg,#3f3f42,#5d5d3c);border-radius:8px;box-shadow:0 2px 5px #0000001a;padding:15px;margin:10px;transition:transform .3s ease,box-shadow .3s ease}.quote-item:hover{transform:scale(1.05);box-shadow:0 4px 10px #0003}.card-body{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}.card-header{display:flex;align-items:center;justify-content:center;column-gap:15px;margin-bottom:10px}.card-header h2{background-color:#e13700;color:#fff;border-radius:50%;font-size:1.3rem;font-weight:700;display:flex;align-items:center;justify-content:center;width:40px;height:40px}.card-header .category-text{background-color:#f0f0f0;border-radius:25px;padding:5px 15px;font-size:1rem;color:#555}.quote-details .quote-text{margin:10px 0;font-size:1.1rem;line-height:1.4;font-style:italic;color:#fff;word-wrap:break-word;font-weight:bolder}.quote-details .quote-author{font-size:1rem;font-weight:700;margin-top:10px;color:#1e1714;transition:color .3s ease;display:flex;align-items:center;justify-content:center}.quote-details .quote-author:hover{cursor:pointer;transform:scale(1.05);color:#0d0a0b;text-decoration:underline}.quote-author .bubbleIcon{transition:transform .3s ease;margin-right:10px}.quote-author:hover .bubbleIcon{transform:rotate(90deg)}.clear-search-btn{background-color:#e13800a0;border:transparent;outline:transparent;border-radius:20px;padding:10px}.clear-search-btn:hover{background-color:#e13700;border:transparent;outline:transparent;border-radius:20px;padding:10px}.card-icons{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.card-icons p{display:flex;align-items:center;column-gap:7px}.loveIcon,.saveIcon{width:25px;height:25px;fill:#fff;transition:fill .3s ease}.deleteIcon:hover{fill:red}.saveIcon:hover{fill:#ff4500}.sort-buttons{display:flex;gap:10px;margin:15px 0}.sort-button{background-color:#333;color:#fff;border:none;padding:8px 12px;cursor:pointer;border-radius:5px;transition:background-color .3s ease}.sort-button:hover{background-color:#555}.category-filter{margin-bottom:20px}.category-select{padding:8px;font-size:1rem;border-radius:5px;border:1px solid #ccc}.quotes-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media (max-width: 768px){.quotes-list{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.quotes-list{grid-template-columns:1fr}}.random-quote{background-color:#ebebeb;border-radius:12px;padding:30px;box-shadow:0 4px 10px #504f4f1a;max-width:600px;margin:20px auto}.random-quote .quote-text{font-size:1.5rem;font-weight:700;color:#333;margin-bottom:10px}.random-quote .quote-author{font-size:1.2rem;color:#555}.filter-sort-wrapper{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}@media (max-width: 768px){.filter-sort-wrapper{flex-direction:column;align-items:flex-start}}.sorting-components{display:flex;justify-content:space-between;width:100%;gap:20px}.category-filter,.sort-buttons{flex-grow:1}@media (max-width: 768px){.sorting-components{flex-direction:column;align-items:flex-start}.category-filter,.sort-buttons{width:100%;margin-bottom:15px}}.data-layout-container{max-width:1200px;margin:0 auto;padding:20px;background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;transition:background-color .3s ease}.data-layout-container.dark-theme{background-color:#333}.welcome-message{font-size:1.5rem;font-weight:700;color:#333;margin-bottom:20px}.data-layout-container.dark-theme .welcome-message{color:#f1f1f1}.logout-button{background-color:tomato;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:1rem;margin-bottom:20px;transition:background-color .3s ease}.logout-button:hover{background-color:#ff4500}.divider{border:1px solid #ccc;margin:20px 0}.new-quote-form{background-color:#f9f9f9;padding:25px;border-radius:8px;box-shadow:0 2px 5px #0000001a;margin-bottom:30px}.data-layout-container.dark-theme .new-quote-form{background-color:#444}.new-quote-form h2{font-size:1.3rem;font-weight:700;color:#333;margin-bottom:20px}.new-quote-form .form-group{margin-bottom:15px}.new-quote-form .form-group label{display:block;font-weight:600;color:#555;margin-bottom:8px}.new-quote-form .form-group input,.new-quote-form .form-group textarea{width:100%;padding:10px;font-size:1rem;border-radius:5px;border:1px solid #ccc;transition:border-color .3s ease}.new-quote-form .form-group input:focus,.new-quote-form .form-group textarea:focus{border-color:tomato}.new-quote-form .form-group textarea{resize:vertical;min-height:150px}.new-quote-form .form-group button{background-color:tomato;color:#fff;border:none;padding:10px 20px;font-size:1rem;cursor:pointer;border-radius:5px;transition:background-color .3s ease}.new-quote-form .form-group button:hover{background-color:#ff4500}.quotes-title{font-size:1.3rem;font-weight:700;color:#333;margin-top:20px}.data-layout-container.dark-theme .quotes-title{color:#f1f1f1}.my-quotes-list{margin-top:20px}.my-quotes{margin-top:30px}.sorting-components{margin-bottom:20px}.edit-quote-button,.delete-quote-button{background-color:tomato;color:#fff;padding:8px 15px;border:none;border-radius:5px;cursor:pointer;margin:10px 0;transition:background-color .3s ease}.edit-quote-button:hover,.delete-quote-button:hover{background-color:#ff4500}.my-quotes .quote-item{display:flex;flex-direction:column;justify-content:space-between}@media (max-width: 768px){.data-layout-container{padding:15px}.welcome-message{font-size:1.2rem}.logout-button{width:100%;padding:12px 0}.new-quote-form{padding:20px}.new-quote-form h2{font-size:1.2rem}.quote-item{padding:10px;margin:5px 0}}@media (max-width: 480px){.logout-button{font-size:1rem}.quotes-title{font-size:1.2rem}.new-quote-form .form-group input,.new-quote-form .form-group textarea{font-size:.9rem}.quote-item{padding:5px}}.new-quote-page{background-color:#f9f9f9;padding:30px;border-radius:8px;box-shadow:0 4px 10px #0000001a;max-width:800px;margin:0 auto}.new-quote-page h1{font-size:2rem;font-weight:700;color:#333;margin-bottom:20px}.new-quote-page .form-group{margin-bottom:20px}.new-quote-page .form-group label{font-weight:600;color:#333;margin-bottom:8px}.new-quote-page .form-group input,.new-quote-page .form-group textarea{width:100%;padding:12px;font-size:1rem;border-radius:5px;border:1px solid #ccc;transition:border-color .3s ease}.new-quote-page .form-group input:focus,.new-quote-page .form-group textarea:focus{border-color:tomato;outline:none}.new-quote-page .form-group textarea{resize:vertical;min-height:150px}.new-quote-page .submit-button{background-color:tomato;color:#fff;padding:14px 20px;font-size:1.2rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease;width:100%}.new-quote-page .submit-button:hover{background-color:#ff4500}.new-quote-page .cancel-button{background-color:#ccc;color:#333;padding:14px 20px;font-size:1.2rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease;margin-top:15px;width:100%}.new-quote-page .cancel-button:hover{background-color:#bbb}.new-quote-container{background-color:#fff;padding:30px;border-radius:10px;box-shadow:0 4px 10px #0000001a;margin:20px auto;max-width:700px}.form-title{font-size:2rem;margin-bottom:20px;color:#333;text-align:center}.input-label{font-size:1.1rem;margin-bottom:8px;color:#333}.input-field{width:100%;padding:10px;font-size:1rem;margin-bottom:20px;border-radius:5px;border:1px solid #ccc;transition:border-color .3s ease}.submit-button{width:100%;padding:10px;background-color:tomato;color:#fff;font-size:1.1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.message-container{text-align:center}.message{padding:10px;margin-bottom:20px;border-radius:5px}.message.success{background-color:#28a745;color:#fff}.message.error{background-color:#dc3545;color:#fff}.cancel-button{width:100%;padding:10px;background-color:#ccc;color:#fff;font-size:1.1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease;margin-bottom:10px}.cancel-button:hover{background-color:#bbb}.not-found-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background-color:#f4f4f4;text-align:center;padding:20px}.not-found-title{font-size:2.5rem;color:#333;margin-bottom:20px}.not-found-message{font-size:1.2rem;color:#777;margin-bottom:30px}.home-link{text-decoration:none}.return-home-button{padding:12px 30px;background-color:tomato;color:#fff;font-size:1.2rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.return-home-button:hover{background-color:#ff4500}.return-home-button:focus{outline:none}@media (max-width: 768px){.new-quote-page{padding:20px}.new-quote-page h1{font-size:1.8rem}.new-quote-page .form-group input,.new-quote-page .form-group textarea{font-size:1rem}.new-quote-page .submit-button,.new-quote-page .cancel-button{width:100%;padding:12px 0}}@media (max-width: 480px){.new-quote-page{padding:15px}.new-quote-page h1{font-size:1.6rem}.new-quote-page .form-group input,.new-quote-page .form-group textarea{font-size:.9rem}.new-quote-page .submit-button,.new-quote-page .cancel-button{font-size:1rem}}.login-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background-color:#f4f4f4;padding:20px}.login-heading{font-size:2.5rem;color:#333;margin-bottom:20px;text-align:center}.login-form{background-color:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 8px #0000001a;width:100%;max-width:400px;margin:0 auto}.signup-prompt{text-align:center;margin-top:20px}.signup-link{text-decoration:none}.signup-button{padding:8px 20px;background-color:#28a745;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1rem;transition:background-color .3s ease}.signup-button:hover{background-color:#218838}.signup-button:focus{outline:none}@media (max-width: 768px){.login-container{padding:20px 15px}.login-heading{font-size:2rem}.login-form{width:90%;max-width:350px}.input-label{font-size:1rem}.input-field{font-size:.95rem}.submit-button,.signup-button{font-size:1rem}}.signup-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background-color:#f4f4f4;padding:20px}.signup-heading{font-size:2.5rem;color:#333;margin-bottom:20px;text-align:center}.error-message{color:#dc3545;margin-bottom:15px;font-size:1.1rem;text-align:center}.signup-form{background-color:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 8px #0000001a;width:100%;max-width:400px;margin:0 auto}.input-label{font-size:1.1rem;color:#333;margin-bottom:8px;display:block}.input-field{width:100%;padding:12px;font-size:1rem;border:1px solid #ccc;border-radius:5px;margin-bottom:20px;transition:border-color .3s ease}.input-field:focus{border-color:tomato;outline:none}.submit-button{width:100%;padding:12px;background-color:tomato;color:#fff;font-size:1.1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.submit-button:hover{background-color:#ff4500}.submit-button:focus{outline:none}.login-prompt{text-align:center;margin-top:20px}.login-link{text-decoration:none}.login-button{padding:8px 20px;background-color:#28a745;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1rem;transition:background-color .3s ease}.login-button:hover{background-color:#218838}.login-button:focus{outline:none}@media (max-width: 768px){.signup-container{padding:20px 15px}.signup-heading{font-size:2rem}.signup-form{width:90%;max-width:350px}.input-label{font-size:1rem}.input-field{font-size:.95rem}.submit-button,.login-button{font-size:1rem}}