#article-container{display:flex;flex-wrap:wrap;justify-content:space-evenly;flex-grow:1}.article,.article-profile{color:var(--base-font-color);display:flex;flex-direction:column;background-color:var(--header-element-color);border-radius:3rem;margin:1.3rem;align-items:center;justify-content:space-between;box-shadow:0 0 1rem #0000002b;width:50ch;max-height:100ch;padding:1.5rem;gap:1rem}.article-profile{height:100ch}.article-img{flex-shrink:1;border-radius:3rem 3rem 0 0;width:100%;height:50%;filter:brightness(.7)}.article-title{font-size:2.3em;margin:0;text-align:center}.article-description{font-size:1.2em;text-align:center}.article-read-btn{padding:.8rem 1.5rem;color:var(--base-background-color);border:solid .2rem;border-radius:5px;border-color:var(--base-background-color);background-color:transparent;cursor:pointer;transition:.3s;width:80%;text-align:center;font-size:1.4em;text-decoration:none}.article-read-btn:hover{background-color:var(--base-background-color-lighter)}.article-bottom-container{display:flex;justify-content:space-between;align-items:center;width:100%}.article-likes{display:flex;align-items:center}.article-like-button{background:none;border:none;cursor:pointer;display:flex;align-items:center}.article-like-counter{font-size:1.4rem;margin-left:.5rem}.article-date{font-size:1.2rem;color:gray}.skeleton-article{background-color:#fff3;border-radius:8px;padding:15px;margin-bottom:20px;animation:pulse 1.5s ease-in-out infinite}.skeleton-image{width:100%;height:200px;background-color:#ffffff4d;border-radius:4px;margin-bottom:15px}.skeleton-title{width:80%;height:24px;background-color:#ffffff4d;border-radius:4px;margin-bottom:10px}.skeleton-description{width:100%;height:60px;background-color:#ffffff4d;border-radius:4px;margin-bottom:15px}.skeleton-read-btn{width:100px;height:36px;background-color:#ffffff4d;border-radius:4px;margin-bottom:15px}.skeleton-bottom{display:flex;justify-content:space-between;align-items:center}.skeleton-likes{width:60px;height:24px;background-color:#ffffff4d;border-radius:4px}.skeleton-date{width:100px;height:24px;background-color:#ffffff4d;border-radius:4px}:root{--base-font-color: #343434;--base-background-color: rgb(95, 200, 181);--base-background-color-lighter: rgb(147, 242, 225)}html{font-size:62.5%}body,#root{min-height:100vh;margin:0;padding:0;background-color:var(--base-background-color);font-family:Noto Sans,sans-serif;color:var(--base-font-color);display:flex;flex-direction:column;justify-content:space-between}p,div,a,h1,h2,h3,h4,h5,h6{margin:0}.profile-container{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:2rem}.profile-sidebar{width:50ch;background-color:var(--header-element-color);padding:2rem;border-radius:1rem;box-shadow:0 0 1rem #0000002b;text-align:center}.profile-sidebar h2{font-size:2rem;margin-bottom:1rem}.profile-sidebar p{font-size:1.4rem;margin-bottom:1rem}.new-post-btn{padding:.8rem 1.5rem;background-color:var(--base-background-color);border:none;border-radius:5px;color:#fff;font-size:1.2rem;cursor:pointer;transition:.3s;margin-bottom:1rem;width:100%}.new-post-btn:hover{background-color:var(--base-background-color-lighter)}.logout-btn{padding:.8rem 1.5rem;background-color:#f44;border:none;border-radius:5px;color:#fff;font-size:1.2rem;cursor:pointer;transition:.3s;width:100%}.logout-btn:hover{background-color:#c00}.article-container{width:70%;display:flex;flex-wrap:wrap;justify-content:space-evenly}.article-actions{display:flex;justify-content:space-between;width:60%}.edit-btn,.delete-btn{padding:.6rem 1.2rem;border:none;border-radius:5px;cursor:pointer;font-size:1rem;transition:.3s}.edit-btn{background-color:gold}.delete-btn{background-color:#ff4500;color:#fff}.edit-btn:hover{background-color:#e6c200}.delete-btn:hover{background-color:#cc3700}@media (max-width: 900px){.profile-container{flex-direction:column;align-items:center}.profile-sidebar{width:90%;margin-bottom:2rem}.article-container{width:100%}}.skeleton-info{margin-bottom:20px}.skeleton-text{width:100%;height:20px;background-color:#ffffff4d;border-radius:4px;margin-bottom:10px;animation:pulse 1.5s ease-in-out infinite}.skeleton-button{width:100%;height:40px;background-color:#ffffff4d;border-radius:4px;margin-bottom:10px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{opacity:.6}50%{opacity:.8}to{opacity:.6}}.skeleton{background:linear-gradient(90deg,#ffffff1a 25%,#fff3,#ffffff1a 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:.5rem}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.article-view-container .skeleton{opacity:.7}.article-content.skeleton{width:70%;padding:2rem;background-color:var(--header-element-color);border-radius:1rem;box-shadow:0 0 1rem #0000002b}.article-gallery.skeleton{text-align:center}.gallery-img.skeleton{width:100%;height:400px;margin-bottom:1rem}.gallery-thumbnails.skeleton{display:flex;justify-content:center;gap:1rem}.thumbnail-img.skeleton{width:80px;height:80px;border-radius:.5rem}.article-view-title.skeleton{width:80%;height:3rem;margin:1.5rem auto}.article-likes.skeleton{display:flex;align-items:center;margin:1rem 0}.article-like-button.skeleton{width:2.5rem;height:2.5rem;border-radius:50%}.article-like-counter.skeleton{width:2rem;height:1.4rem;margin-left:.5rem}.article-text.skeleton{margin-top:2rem}.text-line.skeleton{width:100%;height:1.6rem;margin-bottom:1rem}.comments-section.skeleton{width:25%;padding:2rem;background-color:var(--header-element-color);border-radius:1rem;box-shadow:0 0 1rem #0000002b}.comments-title.skeleton{width:50%;height:2rem;margin-bottom:1rem}.comments-container.skeleton{margin-bottom:2rem}.comment.skeleton{padding:1rem;margin-bottom:1rem;background:#e6fff11a;border-radius:.5rem}.comment-author.skeleton{width:30%;height:1.2rem;margin-bottom:.5rem}.comment-text.skeleton{width:100%;height:1.2rem;margin-bottom:.5rem}.comment-date.skeleton{width:40%;height:1rem}.comment-form.skeleton{margin-top:2rem}.comment-textarea.skeleton{width:100%;height:80px;margin-bottom:1rem}.comment-submit.skeleton{width:100%;height:3rem}@media (max-width: 900px){.article-content.skeleton,.comments-section.skeleton{width:100%;margin-bottom:2rem}}.article-view-container{display:flex;justify-content:space-between;padding:2rem;margin:1.3rem;gap:3rem}.article-content{width:70%;background-color:var(--header-element-color);padding:2rem;border-radius:1rem;box-shadow:0 0 1rem #0000002b}.article-gallery{text-align:center}.gallery-img{width:100%;max-height:400px;border-radius:1rem;object-fit:cover}.gallery-thumbnails{display:flex;justify-content:center;margin-top:1rem;gap:1rem;flex-wrap:wrap}.thumbnail-img{width:80px;height:80px;border-radius:.5rem;cursor:pointer;transition:.3s}.thumbnail-img:hover{transform:scale(1.1)}.article-view-title{font-size:2.5rem;margin:1.5rem 0;text-align:center}.article-text{white-space:pre-wrap;word-wrap:break-word;line-height:1.6;font-size:1.6rem}.comments-section{width:25%;background-color:var(--header-element-color);padding:2rem;border-radius:1rem;box-shadow:0 0 1rem #0000002b;display:flex;flex-direction:column;gap:1.5rem}.interactions-section{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:1rem}.interactions-section h2{font-size:2rem;margin:0}.article-likes{display:flex;align-items:center;justify-content:center;padding:1rem;background:#e6fff11a;border-radius:.5rem}.article-like-button{background:none;border:none;cursor:pointer;display:flex;align-items:center;padding:.5rem;transition:transform .2s}.article-like-button:hover{transform:scale(1.1)}.article-like-img{width:2.5rem;height:auto}.article-like-counter{font-size:1.4rem;margin-left:.5rem;color:var(--base-font-color)}.comments-section h2{font-size:2rem;margin:0}.comment{background:#e6fff1;padding:1rem;border-radius:.5rem;margin-bottom:1rem;font-size:1.2rem}#comment-form textarea{width:100%;resize:vertical;height:80px;padding:.5rem;border-radius:5px;border:1px solid #ccc}.comment-btn{width:100%;padding:.8rem;margin-top:1rem;background-color:var(--base-background-color);color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1.2rem;transition:.3s}.comment-btn:hover{background-color:var(--base-background-color-lighter)}@media (max-width: 900px){.article-view-container{flex-direction:column;align-items:center}.article-content,.comments-section{width:100%;margin-bottom:2rem}}.create-post-container{max-width:1400px;margin:0 1.4rem;padding:2rem}.create-post-form{display:flex;gap:2rem;background-color:var(--header-element-color);padding:2rem;border-radius:1rem;box-shadow:0 4px 6px #0000001a;position:relative}.create-post-form h2{font-size:2.4rem;margin-bottom:2rem;color:var(--base-font-color);text-align:center;width:100%}.text-column{flex:2;display:flex;flex-direction:column;gap:2rem}.image-column{flex:1;display:flex;flex-direction:column;gap:2rem;position:relative}.right-column{flex:1;display:flex;flex-direction:column;gap:2rem}.form-group{margin-bottom:0}.form-group label{display:block;font-size:1.4rem;margin-bottom:.8rem;color:var(--base-font-color)}.form-group input[type=text],.form-group textarea{width:100%;padding:1rem;border:2px solid rgba(0,0,0,.1);border-radius:.5rem;font-size:1.4rem;transition:border-color .3s ease;background-color:#ffffffe6;box-sizing:border-box}.form-group input[type=text]:focus,.form-group textarea:focus{outline:none;border-color:var(--base-background-color)}.form-group textarea{min-height:400px;resize:vertical;white-space:pre-wrap;word-wrap:break-word;font-family:inherit;line-height:1.5}.image-upload-container{border:2px dashed rgba(0,0,0,.2);border-radius:.5rem;padding:2rem;text-align:center;transition:all .3s ease;background-color:#ffffffe6;min-height:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer}.image-upload-container:hover{border-color:var(--base-background-color);background-color:#fffffff2}.image-upload-container input[type=file]{display:none}.upload-label{display:inline-block;padding:1rem 2rem;background-color:var(--base-background-color);color:#fff;border-radius:.5rem;cursor:pointer;transition:background-color .3s ease;font-size:1.4rem}.upload-label:hover{background-color:var(--base-background-color-lighter)}.image-preview{margin-top:2rem}.image-preview h4{font-size:1.4rem;margin-bottom:1rem;color:var(--base-font-color)}.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin-top:1rem}.preview-item{position:relative;border-radius:.5rem;overflow:hidden;box-shadow:0 2px 4px #0000001a}.preview-item img{width:100%;height:150px;object-fit:cover}.remove-image{position:absolute;top:.5rem;right:.5rem;background-color:#f00c;color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:background-color .3s ease}.remove-image:hover{background-color:red}.form-actions{display:flex;gap:1rem;justify-content:center;margin-bottom:0}.cancel-button,.submit-button{padding:1rem 2rem;border:none;border-radius:.5rem;font-size:1.4rem;cursor:pointer;transition:all .3s ease;z-index:1;white-space:nowrap}.cancel-button{background-color:#f0f0f0;color:var(--base-font-color)}.cancel-button:hover{background-color:#e0e0e0}.submit-button{flex-grow:1;background-color:var(--base-background-color);color:#fff}.submit-button:hover{background-color:var(--base-background-color-lighter)}.submit-button:disabled,.cancel-button:disabled{opacity:.6;cursor:not-allowed}.error-message{color:#f44;font-size:1.4rem;padding:1rem 2rem;background-color:#fff;border-radius:.5rem;box-shadow:0 2px 4px #0000001a;margin-top:1rem;text-align:center}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.loading-content{background-color:#fff;padding:2rem;border-radius:.5rem;text-align:center}.loading-content p{margin-top:1rem;font-size:1.4rem;color:var(--base-font-color)}@media (max-width: 900px){.create-post-form{flex-direction:column}.text-column,.image-column{width:100%}.form-actions{position:static;margin-top:2rem;justify-content:flex-end}.error-message{position:static;transform:none;margin-top:1rem}}.auth-container{margin:1.3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}.auth-form{background-color:#fff;padding:3rem;border-radius:1rem;box-shadow:0 .4rem .8rem #0000001a;width:100%;max-width:40rem}.auth-form h2{font-size:2.4rem;margin-bottom:2rem;text-align:center;color:var(--base-font-color)}.form-group{margin-bottom:1.6rem}.form-group label{display:block;font-size:1.4rem;margin-bottom:.5rem;color:var(--base-font-color)}.form-group input{width:100%;padding:1rem;border:.1rem solid #ddd;border-radius:.5rem;font-size:1.4rem;transition:border-color .3s;box-sizing:border-box}.form-group input:focus{outline:none;border-color:var(--base-background-color)}.auth-button{width:100%;padding:1.2rem;background-color:var(--base-background-color);color:#fff;border:none;border-radius:.5rem;font-size:1.6rem;cursor:pointer;transition:background-color .3s}.auth-button:hover:not(:disabled){background-color:var(--base-background-color-lighter)}.auth-button:disabled{opacity:.7;cursor:not-allowed}.error-message{color:#f44;font-size:1.4rem;margin:1rem 0;text-align:center}.divider{display:flex;align-items:center;text-align:center;margin:2rem 0}.divider:before,.divider:after{content:"";flex:1;border-bottom:.1rem solid #ddd}.divider span{padding:0 1rem;color:#666;font-size:1.4rem}.google-button{width:100%;padding:1.2rem;background-color:#fff;color:#666;border:.1rem solid #ddd;border-radius:.5rem;font-size:1.6rem;cursor:pointer;transition:background-color .3s;display:flex;align-items:center;justify-content:center;gap:1rem}.google-button:hover:not(:disabled){background-color:#f5f5f5}.google-button:disabled{opacity:.7;cursor:not-allowed}.google-icon{width:2rem;height:2rem}.auth-link{text-align:center;margin-top:2rem;font-size:1.4rem;color:var(--base-font-color)}.auth-link a{color:var(--base-background-color);text-decoration:none;font-weight:700}.auth-link a:hover{text-decoration:underline}.form-group input[type=text],.form-group textarea{font-size:1.4rem}.help-container{padding:2rem;margin:1.3rem}.help-content{background-color:var(--header-element-color);padding:2rem;border-radius:1rem;box-shadow:0 0 1rem #0000002b}.help-content h1{font-size:2.8rem;margin-bottom:2rem;text-align:center;color:var(--base-font-color)}.help-section{margin-bottom:2rem}.help-section h2{font-size:2rem;margin-bottom:1rem;color:var(--base-font-color)}.help-section p{font-size:1.6rem;line-height:1.6;color:var(--base-font-color)}.help-section ul,.help-section ol{font-size:1.6rem;line-height:1.6;padding-left:2rem;color:var(--base-font-color)}.help-section li{margin-bottom:1rem}.help-section strong{color:var(--base-background-color)}:root{--header-element-color: whitesmoke;--header-font-color: var(--base-font-color)}.top-header,.bottom-header,.footer{display:flex;flex-wrap:wrap;justify-content:space-between;padding:1rem;background-color:var(--header-element-color);border-radius:8px;margin:1.3rem;align-items:center;box-shadow:0 0 1rem #0000002b}.copyright{color:gray}.bottom-header{display:flex;justify-content:space-between;align-items:center;padding-inline:1rem}.bottom-header-text{margin:0 auto;text-align:center;flex-grow:1}.site-title{font-size:2.4rem;display:flex;justify-content:center;align-items:center;color:var(--base-font-color);text-decoration:none}.site-name{margin:0;margin-left:1rem}.navigation{min-width:20%}.nav-list{width:100%;margin:0;padding:0;display:flex;justify-content:space-around}.nav-item{margin:0 1.2rem;padding:.6rem 1rem;border-radius:.5rem;list-style:none;text-align:center;transition:.3s}.nav-item:hover{background-color:#d6d6d6}.nav-item-a{text-decoration:none;font-size:1.4rem;color:var(--header-font-color)}.site-logo{width:4rem;height:auto;margin:0}.github-icon{width:1.7em;height:1.7em;fill:currentColor;margin-right:.5rem}.sort-dropdown{display:flex;align-items:center;margin-left:1rem;gap:.5rem}.sort-label{font-size:1.2rem;color:var(--header-font-color)}.sort-dropdown select{padding:.3rem .5rem;font-size:1rem;border-radius:4px;border:1px solid #ccc}.sort-select{font-size:1rem;padding:.4rem .6rem;border-radius:.5rem;border:1px solid #ccc;background-color:#fff;margin-left:auto}