@charset "utf-8"; :root{--primary-color:#ff8c00;--secondary-color:#ff6a00;--tertiary-color:#ff4500;--text-color:#333;--light-bg-color:#fff5e6;--white:#fff;--light-gray:#f8f8f8;--dark-gray:#666;--border-color:#e0e0e0;--shadow-color:rgba(0,0,0,0.1);--font-family:'Poppins',sans-serif} body{font-family:var(--font-family);line-height:1.6;color:var(--text-color);max-width:1200px;margin:0 auto;padding:0;background-color:var(--light-bg-color)} main{display:flex;flex-direction:column;gap:20px; }.space{height:100px;display:block;clear:both}main:after{height:100px;display:block;clear:both} body a#header{text-decoration:none}body a#header:visited{text-decoration:none}.page-header{background:linear-gradient(135deg,var(--primary-color) 0%,var(--tertiary-color) 100%);color:var(--white);padding:0;margin-bottom:0;text-align:center;position:relative;overflow:hidden}.page-header::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:repeating-linear-gradient( 45deg,rgba(255,255,255,0.1),rgba(255,255,255,0.1) 1px,transparent 1px,transparent 10px );transform:rotate(30deg)}.page-header h1{font-size:3em;margin:0;position:relative;text-shadow:2px 2px 4px rgba(0,0,0,0.3)}.page-header .subtitle{font-size:1.2em;margin-top:10px;opacity:0.8} @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.page-header h1,.page-header .subtitle{animation:fadeIn 1s ease-out} nav{background-color:#333}nav ul{list-style-type:none;padding:0;margin:0}nav ul li{display:inline-block}nav ul li a{color:var(--white);text-decoration:none;padding:15px 20px;display:block}nav ul li a:hover{background-color:#555} .search-form{background-color:var(--white);padding:20px;border-radius:5px;box-shadow:0 2px 5px var(--shadow-color);margin-bottom:20px}.search-form input[type="text"]{width:70%;padding:10px;font-size:16px;border:1px solid var(--border-color);border-radius:4px}.search-form input[type="submit"]{padding:10px 20px;font-size:16px;background-color:var(--primary-color);color:var(--white);border:none;border-radius:4px;cursor:pointer;transition:background-color 0.3s}.search-form input[type="submit"]:hover{background-color:var(--secondary-color)}.search-tips{margin-top:10px;font-size:0.9em;color:var(--dark-gray)} .filter-section{display:flex;justify-content:space-between;margin-bottom:30px;background-color:var(--white);border-radius:8px;box-shadow:0 4px 6px var(--shadow-color);overflow:hidden}.tag-tree{flex:1;padding:20px;border-right:1px solid var(--border-color)}.tag-tree h3{margin-top:0;margin-bottom:15px;color:var(--secondary-color);font-size:1.2em}.tag-tree ul{list-style-type:none;padding-left:0;margin:0}.tag-tree li{margin:10px 0}.tag-tree .category{font-weight:bold;color:var(--secondary-color);text-decoration:none;display:block;padding:5px 10px;background-color:#fff9f0;border-radius:4px;transition:all 0.3s ease}.tag-tree .category:hover{background-color:#ffe0b3}.tag-tree .tag{color:var(--primary-color);text-decoration:none;display:block;padding:3px 10px 3px 20px;transition:all 0.3s ease}.tag-tree .tag:hover{background-color:#fff0d9}.tag-tree .active{color:var(--tertiary-color);font-weight:bold}#favoriteFilter{flex:0 0 200px;display:flex;align-items:center;justify-content:center;padding:20px;background-color:#fff9f0}#favoriteFilter button{width:100%;padding:12px;font-size:1em;background-color:var(--primary-color);color:var(--white);border:none;border-radius:4px;cursor:pointer;transition:background-color 0.3s;box-shadow:0 2px 4px var(--shadow-color)}#favoriteFilter button:hover{background-color:var(--secondary-color)}#favoriteFilter button.active{background-color:var(--tertiary-color)} .posts-container{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0}.post{background-color:var(--white);margin:10px;padding:0;border-radius:8px;box-shadow:0 2px 5px var(--shadow-color);transition:all 0.3s ease;cursor:default;position:relative;overflow:hidden;width:calc(100% - 20px);box-sizing:border-box;height:300px;display:flex;flex-direction:column}.post-link{display:block;text-decoration:none;color:inherit}.post-background{position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:center;background-repeat:no-repeat}.post-content{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,0.8),rgba(0,0,0,0.4));padding:20px;color:var(--white);height:50%; display:flex;flex-direction:column;justify-content:flex-end;transition:all 0.3s ease}.post:hover .post-content{height:60%; }.post h2{color:var(--white);margin-top:0;margin-bottom:10px;font-size:1.5em;transition:color 0.3s ease}.post-meta{font-size:0.9em;color:var(--light-gray);margin-bottom:10px}.post-excerpt{color:var(--light-gray);margin-bottom:0;max-height:3em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;opacity:0.8} .post-tags-categories{position:absolute;top:10px;left:10px;display:flex;flex-wrap:wrap;gap:5px}.tag,.category{font-size:0.75em;padding:3px 8px;border-radius:12px;background-color:rgba(255,255,255,0.8);backdrop-filter:blur(4px);transition:all 0.3s ease}.tag{color:var(--primary-color);border:1px solid var(--primary-color)}.category{color:var(--secondary-color);border:1px solid var(--secondary-color)}.tag:hover,.category:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,0.9)}.post-tags-categories a{text-decoration:none;transition:all 0.3s ease}.post-tags-categories a:hover{opacity:0.9}.post-tags-categories .category:hover,.post-tags-categories .tag:hover{text-decoration:underline}.search-hint-icon{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;background-color:#f0f0f0;border-radius:50%;cursor:pointer;margin-left:10px;font-weight:bold}#searchHintPopup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:white;padding:20px;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,0.2);z-index:1001;max-width:80%;width:400px}#searchHintPopup h3{margin-top:0}#searchHintPopup ul{padding-left:20px}#searchHintPopup code{background-color:#f0f0f0;padding:2px 4px;border-radius:3px}#filterPopup .category-container{display:flex;justify-content:space-between;align-items:center;background-color:#f5f5f5;border-radius:5px;transition:background-color 0.3s;margin-bottom:5px}#filterPopup .category-container:hover{background-color:#e0e0e0}#filterPopup .category-link{color:var(--secondary-color);text-decoration:none;flex-grow:1;padding:10px 15px;font-weight:bold}#filterPopup .toggle-button{background:none;border:none;cursor:pointer;padding:10px 15px;color:var(--secondary-color);font-size:18px;transition:background-color 0.3s,color 0.3s}#filterPopup .toggle-button:hover{background-color:var(--secondary-color);color:white}#filterPopup .toggle-icon{display:inline-block;transition:transform 0.3s}#filterPopup .toggle-button[aria-expanded="true"] .toggle-icon{transform:rotate(180deg)}#filterPopup .tags{display:none;margin-left:20px;margin-top:5px;margin-bottom:15px}#filterPopup .tag{color:var(--primary-color);text-decoration:none;display:block;padding:5px 10px;margin-bottom:5px;background-color:#f9f9f9;border-radius:3px;transition:background-color 0.3s}#filterPopup .tag:hover{background-color:#e9e9e9}.close-popup{position:absolute;top:15px;right:20px;font-size:28px;color:#999;cursor:pointer;transition:color 0.3s}.close-popup:hover{color:var(--primary-color)}.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1000}.favorite-btn{position:absolute;top:10px;right:10px;background-color:rgba(255,255,255,0.7);border:none;border-radius:50%;width:40px;height:40px;font-size:1.5em;color:#ccc;transition:all 0.3s ease;z-index:10;cursor:pointer}.favorite-btn:hover,.favorite-btn.active{background-color:rgba(255,255,255,1)}.favorite-btn.active{color:var(--primary-color)} .pagination{text-align:center;margin-top:20px;margin-bottom:20px}.pagination a,.pagination span{display:inline-block;padding:8px 16px;margin:0 4px;border:1px solid var(--primary-color);color:var(--primary-color);text-decoration:none;border-radius:4px;transition:all 0.3s ease}.pagination a:hover{background-color:var(--primary-color);color:var(--white)}.pagination .current{background-color:var(--primary-color);color:var(--white);font-weight:bold} .ad-container{background-color:#fff9f0;border:1px solid #ffe0b3;border-radius:8px;padding:20px;margin:10px 0;text-align:center;box-shadow:0 2px 5px var(--shadow-color)}.ad-container p{margin:0 0 10px 0;font-style:italic;color:var(--secondary-color)} .filter-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap}.filter-button,#favoriteFilterBtn{padding:10px 15px;font-size:14px;border:none;border-radius:4px;cursor:pointer;transition:background-color 0.3s}.filter-button{background-color:var(--primary-color);color:white}#favoriteFilterBtn{background-color:var(--secondary-color);color:white}.filter-button:hover,#favoriteFilterBtn:hover{opacity:0.9}#favoriteFilterBtn.active{background-color:var(--tertiary-color)}.filter-button:hover{background-color:var(--secondary-color)}.popup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--white);padding:20px;border-radius:10px;box-shadow:0 4px 6px var(--shadow-color);z-index:1000;max-width:90%;max-height:80vh;overflow-y:auto}.popup h3{color:var(--secondary-color);margin-top:0}.popup ul{list-style-type:none;padding:0}.popup li{margin-bottom:10px}.popup .category{font-weight:bold;color:var(--secondary-color);cursor:pointer;display:flex;justify-content:space-between;align-items:center}.popup .category-link{color:var(--secondary-color);text-decoration:none}.popup .category-link:hover{text-decoration:underline}.popup .toggle-icon{font-size:18px;transition:transform 0.3s}.popup .tags{display:none;margin-left:20px;margin-top:5px}.popup .tag{color:var(--primary-color);text-decoration:none;display:block;padding:5px 0}.popup .tag:hover{text-decoration:underline}.overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:999}.close-popup{position:absolute;top:10px;right:10px;font-size:24px;color:var(--secondary-color);cursor:pointer}.current-filters{background-color:#fff9f0;border:1px solid #ffe0b3;border-radius:5px;padding:10px;margin-bottom:20px}.filter-tag{display:inline-block;background-color:var(--primary-color);color:var(--white);padding:5px 10px;margin:2px;border-radius:3px;font-size:0.9em}.filter-tag a{color:var(--white);text-decoration:none;margin-left:5px} .site-footer{background-color:var(--light-gray);color:var(--text-color);padding:20px 0;margin-top:40px;border-top:1px solid #e7e7e7}.footer-content{max-width:1200px;margin:0 auto;text-align:center}.footer-links{margin-bottom:10px}.footer-links a{color:var(--secondary-color);text-decoration:none;margin:0 10px;transition:color 0.3s ease}.footer-links a:hover{color:var(--tertiary-color)}.copyright{font-size:0.9em;color:var(--dark-gray)} .post-container{background-color:var(--white);padding:20px;border-radius:5px;box-shadow:0 2px 5px var(--shadow-color);margin-bottom:30px; }.post-title{color:var(--secondary-color);margin-top:0;font-size:2em}.post-meta{margin-top:10px;font-size:0.9em;color:var(--primary-color)} .post-image{cursor:pointer;transition:opacity 0.3s;max-width:100%;height:auto}.post-image:hover{opacity:0.8}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.9);opacity:0;transition:opacity 0.3s ease}.modal-content{margin:auto;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.8);max-width:90%;max-height:90%;opacity:0;transition:all 0.3s ease}.modal.show{opacity:1}.modal-content.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.close{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:bold;transition:0.3s}.close:hover,.close:focus{color:#bbb;text-decoration:none;cursor:pointer}.modal-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:2em;color:var(--white);cursor:pointer;padding:10px;background-color:rgba(0,0,0,0.5);z-index:1001}.modal-nav.prev{left:10px}.modal-nav.next{right:10px}.modal-caption{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:var(--white);background-color:rgba(0,0,0,0.5);padding:10px}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--white);font-size:1.5em} .comments-section{margin-top:30px;background-color:#f9f9f9;padding:20px;border-radius:5px;box-shadow:0 2px 5px var(--shadow-color)}.comment{margin-bottom:20px;border-bottom:1px solid var(--border-color);padding-bottom:10px}.comment-form{margin-top:20px}.comment-form input,.comment-form textarea{width:100%;padding:10px;margin-bottom:10px}.comment-form button{background-color:var(--secondary-color);color:var(--white);border:none;padding:10px 20px;cursor:pointer}.delete-request-form{display:none;margin-top:10px}.delete-request-form textarea{width:100%;margin-bottom:10px}.comment.deletion-requested{opacity:0.6}.ip-notice{background-color:#ffffd9;border:1px solid #e7e7e7;padding:10px;margin-bottom:10px;font-size:0.9em;color:var(--dark-gray)} .delete-request-button,.submit-request-button,.cancel-request-button{background-color:#f44336;color:var(--white);border:none;padding:8px 16px;text-align:center;text-decoration:none;display:inline-block;font-size:14px;margin:4px 2px;cursor:pointer;border-radius:4px;transition:background-color 0.3s,transform 0.1s}.delete-request-button:hover,.submit-request-button:hover{background-color:#d32f2f}.cancel-request-button{background-color:#9e9e9e}.cancel-request-button:hover{background-color:#757575}.delete-request-button:active,.submit-request-button:active,.cancel-request-button:active{transform:scale(0.98)}.delete-request-button:focus,.submit-request-button:focus,.cancel-request-button:focus{outline:none;box-shadow:0 0 0 3px rgba(244,67,54,0.5)}.deletion-requests{margin-top:10px;font-size:0.9em;color:var(--dark-gray)}.deletion-request-item{margin-bottom:5px} .about-page{max-width:800px;margin:0 auto;padding:20px;background-color:var(--white);border-radius:8px;box-shadow:0 0 10px var(--shadow-color)}.about-section{margin-bottom:30px}.about-section h3{color:var(--secondary-color);border-bottom:2px solid var(--secondary-color);padding-bottom:10px;margin-bottom:15px}.about-section ul{list-style-type:none;padding-left:0}.about-section ul li:before{content:"•";color:var(--secondary-color);display:inline-block;width:1em;margin-left:-1em}.about-section a{color:var(--secondary-color);text-decoration:none}.about-section a:hover{text-decoration:underline} @media screen and (min-width:768px){.post{width:calc(50% - 20px)}}@media screen and (max-width:767px){.menu-toggle{display:block;background-color:#333;color:var(--white);border:none;padding:15px 20px;font-size:1.2em;cursor:pointer}nav ul{display:none}nav ul.active{display:block}nav ul li{display:block}.filter-section{flex-direction:column}.tag-tree{border-right:none;border-bottom:1px solid var(--border-color)}#favoriteFilter{padding:15px}.pagination a,.pagination span{padding:6px 12px;margin:0 2px}.post-container,.comments-section{padding:15px}.post{height:250px; }.post-content{padding:15px}.post h2{font-size:1.3em}.post-excerpt{-webkit-line-clamp:1; }.post-tags-categories{top:5px;left:5px}.tag,.category{font-size:0.7em;padding:2px 6px}.filter-container{flex-direction:column;align-items:stretch}.filter-button,#favoriteFilterBtn{margin-bottom:10px;width:100%}#filterPopup{width:95%;padding:20px}#filterPopup h3{font-size:20px}.close-popup{top:10px;right:15px;font-size:24px}#filterPopup .category-link,#filterPopup .toggle-button{padding:8px 12px}#filterPopup .toggle-button{font-size:16px}}@media screen and (min-width:1024px){.modal-content{max-width:80%;max-height:80%}} .blog_post .post-content{position:absolute;bottom:0;left:0;right:0;background:rgba(255,255,255,0.9);padding:20px;transition:all 0.3s ease}.blog_post .post-container{background-color:white;padding:20px;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.1)}.blog_post .post-container{background-color:white;padding:20px;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.1)}.blog_post .post-title{color:#ff6a00;margin-top:0;font-size:2em}.blog_post .post-meta{margin-top:10px;font-size:0.9em;color:#ff8c00} .blog_post .post-image{cursor:pointer;transition:opacity 0.3s;max-width:100%;height:auto}.blog_post .post-image:hover{opacity:0.8}.blog_post .modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.9);opacity:0;transition:opacity 0.3s ease}.blog_post .modal-content{margin:auto;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.8);max-width:90%;max-height:90%;opacity:0;transition:all 0.3s ease}.blog_post .modal.show{opacity:1}.blog_post .modal-content.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.blog_post .close{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:bold;transition:0.3s}.blog_post .close:hover,.blog_post .close:focus{color:#bbb;text-decoration:none;cursor:pointer} @media screen and (min-width:1024px){.blog_post .modal-content{max-width:80%;max-height:80%}} .blog_post .modal-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:2em;color:#fff;cursor:pointer;padding:10px;background-color:rgba(0,0,0,0.5);z-index:1001}.blog_post .modal-nav.prev{left:10px}.blog_post .modal-nav.next{right:10px}.blog_post .modal-caption{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#fff;background-color:rgba(0,0,0,0.5);padding:10px}.blog_post .modal-content{transition:transform 0.3s ease}.blog_post .loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:1.5em} .blog_post .delete-request-form{display:none;margin-top:10px}.blog_post .delete-request-form textarea{width:100%;margin-bottom:10px}.blog_post .comment.deletion-requested{opacity:0.6} .blog_post .comments-section{margin-top:30px;background-color:#f9f9f9;padding:20px;border-radius:5px}.blog_post .comment{margin-bottom:20px;border-bottom:1px solid #ddd;padding-bottom:10px}.blog_post .comment-form{margin-top:20px}.blog_post .comment-form input,.blog_post .comment-form textarea{width:100%;padding:10px;margin-bottom:10px}.blog_post .comment-form button{background-color:#ff6a00;color:white;border:none;padding:10px 20px;cursor:pointer}.blog_post .delete-request-form{display:none;margin-top:10px}.blog_post .delete-request-form textarea{width:100%;margin-bottom:10px}.blog_post .comment.deletion-requested{opacity:0.6} .blog_post .ip-notice{background-color:#ffffd9;border:1px solid #e7e7e7;padding:10px;margin-bottom:10px;font-size:0.9em;color:#666} .blog_post .popup{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background-color:white;padding:20px;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,0.2);z-index:1000;max-width:80%;width:300px}.blog_post .popup-content{text-align:center}.blog_post .popup-close{position:absolute;right:10px;top:10px;cursor:pointer}.blog_post .overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:999}.blog_post .popup-button{margin-top:15px;padding:5px 15px;background-color:#ff6a00;color:white;border:none;border-radius:3px;cursor:pointer}.blog_post .cooldown-timer{color:#ff6a00;font-size:0.9em;margin-top:10px}.blog_post .delete-request-button,.blog_post .submit-request-button,.blog_post .cancel-request-button{background-color:#f44336;color:white;border:none;padding:8px 16px;text-align:center;text-decoration:none;display:inline-block;font-size:14px;margin:4px 2px;cursor:pointer;border-radius:4px;transition:background-color 0.3s,transform 0.1s}.blog_post .delete-request-button:hover,.blog_post .submit-request-button:hover{background-color:#d32f2f}.blog_post .cancel-request-button{background-color:#9e9e9e}.blog_post .cancel-request-button:hover{background-color:#757575}.blog_post .delete-request-button:active,.blog_post .submit-request-button:active,.blog_post .cancel-request-button:active{transform:scale(0.98)}.blog_post .delete-request-button:focus,.blog_post .submit-request-button:focus,.blog_post .cancel-request-button:focus{outline:none;box-shadow:0 0 0 3px rgba(244,67,54,0.5)}.blog_post .deletion-requests{margin-top:10px;font-size:0.9em;color:#666}.blog_post .deletion-request-item{margin-bottom:5px}