*{margin:0;padding:0;box-sizing:border-box}body{height:100vh;background-color:#f6f6f8}nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:60px;width:100%;background-color:#f6f6f8;border-bottom:2px solid #e6e6eb}nav .logo-container{display:flex;align-items:center;margin-left:50px;color:#1919e6;cursor:pointer;gap:10px}nav a{text-decoration:none}nav .links-container{font-family:Old Standard TT;margin-right:50px}nav .links-container a{text-decoration:none;color:#000;margin:0 10px}.active{font-weight:700}nav button{color:#fff;background-color:#1919e6;padding:6px 20px;margin-left:10px;border:none;border-radius:5px;cursor:pointer;font-size:14px;font-family:Old Standard TT;transition:all .3s}nav button:hover{background-color:#5959f0}.wrap-container{display:flex;align-items:center;justify-content:center;flex-direction:column;width:100%;min-height:85vh;margin-top:20px;font-family:Old Standard TT}.principal{text-align:center;width:50%}.quote-principal-container{display:flex;align-items:center;justify-content:center;flex-direction:column}.quote-principal-container h1{font-size:50px;margin-bottom:20px}.search{position:relative;display:flex;align-items:center;justify-content:center;margin-top:25px;gap:20px}.search input[type=text]{padding:10px 7px 10px 35px;border-radius:5px;border:1px solid #e6e6eb;width:30%;font-family:Old Standard TT;outline:none}.search input[type=text]::placeholder{font-family:Old Standard TT}.search-icon{position:absolute;color:#e6e6eb;left:281px}.search button{color:#fff;background-color:#1919e6;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:14px;font-family:Old Standard TT;transition:all .3s}.search button:hover{background-color:#5959f0}.add-quote-form{display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #e6e6eb;padding:20px;border-radius:20px;width:50%}.add-quote-form textarea{width:100%;font-size:20px;margin:10px 15px;padding:10px;font-family:Old Standard TT;background-color:transparent;resize:none;outline:none;height:130px;border:none}.add-quote-form textarea::placeholder{font-family:Old Standard TT;color:gray}.submit-container{display:flex;align-items:center;justify-content:space-between;width:100%}.submit-container input[type=text]{font-size:16px;padding:7px 10px;font-family:Old Standard TT;border-radius:50px;outline:none;width:40%;border:1px solid #e6e6eb}.submit-container input[type=text]::placeholder{font-size:16;color:gray}.submit-container button{color:#fff;background-color:#1919e6;padding:10px 20px;border:none;border-radius:50px;cursor:pointer;font-size:18px;font-family:Old Standard TT;transition:all .3s}.submit-container button:hover{background-color:#5959f0}.quotes-container{display:flex;align-items:center;justify-content:center;flex-direction:column;width:50%;margin-top:20px;margin-bottom:20px}.quote-container{display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #e6e6eb;padding:20px;border-radius:20px;margin-bottom:20px;width:100%}.info-user{display:flex;align-items:center;justify-content:start;width:100%;margin-bottom:10px;font-size:12px;font-weight:700}.info-user img{width:30px;height:30px;border-radius:100%;margin-right:10px}.quote-info{display:flex;align-items:start;flex-direction:column;width:100%;margin:10px 0}.quote-container .btns-container{display:flex;width:100%;gap:30px;margin:10px 0}.quote-container .btns-container button{display:flex;align-items:center;gap:5px;font-size:14px;border:none;cursor:pointer;background-color:transparent}.quote-comment{display:flex;align-items:center;justify-content:center;flex-direction:column;width:75%;border:1px solid #e6e6eb;padding:20px;border-radius:10px;margin-bottom:20px}.quote-comment p{font-size:40px;font-family:Old Standard TT;font-weight:700;text-align:center;margin-bottom:10px}.quote-comment span{color:#353594;font-style:italic}.quote-comment small{font-style:italic;font-weight:12px;color:#1111a7}.form-comment{width:75%;display:flex;flex-direction:column;align-items:start;border:none;margin-top:20px;padding:0}.form-comment h2{margin-bottom:20px}.form-comment textarea{margin:6px 0 0;box-sizing:border-box;border:1px solid #e6e6eb;width:100%;height:120px;outline:none;font-family:Old Standard TT;font-size:18px;padding:10px;resize:none;border-radius:10px}.form-comment div{display:flex;width:100%;justify-content:right;padding-top:20px}.form-comment div button{color:#fff;background-color:#1919e6;padding:10px 20px;border:none;border-radius:10px;cursor:pointer;font-size:18px;font-family:Old Standard TT;transition:all .3s}.form-comment div button:hover{background-color:#5959f0}.comments-container{display:flex;flex-direction:column;width:75%;margin-top:40px}.comments-container h2{margin-bottom:20px}.comment{position:relative;display:flex;width:100%;margin-bottom:20px}.comment img{width:30px;height:30px;border-radius:100%;margin-right:10px}.comment .name-time{display:flex;align-items:center;padding:5px 7px 5px 0;margin-bottom:5px;margin-top:9px;gap:10px}.btnDelete{position:absolute;top:8px;right:8px;border:none;background:transparent;cursor:pointer;opacity:0}.comment:hover .btnDelete{opacity:1}.search-container{display:flex;align-items:center;justify-content:center;flex-direction:column;width:75%}.search-form{display:flex;justify-content:center;width:100%;border:none}.search-form input[type=text]{width:80%;padding:10px 7px 10px 35px;font-size:18px;border-radius:5px;border:1px solid #e6e6eb;font-family:Old Standard TT;margin:0 20px 20px 0;outline:none}.search-form button{display:flex;align-items:center;color:#fff;background-color:#1919e6;height:43px;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:14px;font-family:Old Standard TT;transition:all .3s}.quote-container-search{display:flex;justify-content:start;flex-direction:column;width:100%}.result-container{width:100%;cursor:pointer}.result{display:flex;justify-content:center;flex-direction:column;padding:15px;border:1px solid #e6e6eb;border-radius:10px;width:100%;cursor:pointer}.result p{margin-bottom:7px}footer{display:flex;align-items:center;justify-content:center;width:100%;height:60px;color:gray;border-top:2px solid #e6e6eb;font-family:Old Standard TT}