@import"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";*{padding:0;margin:0;box-sizing:border-box}html{font-size:16px;font-family:roboto,sans-serif;--primary-color: hsl(2, 58%, 42%);--secondary-color: hsl(0, 0%, 5%);--text-white: hsl(0, 0%, 95%);--text-black: hsl(0, 0%, 5%)}.loading-wrapper{display:flex;width:100%;justify-content:center;margin:5rem 0}.loading{color:var(--text-white);font-size:1.9rem;font-weight:700;background-color:var(--primary-color);align-self:start;padding:.5rem 1rem;border-radius:0 20px;box-shadow:0 0 15px -2px #fff}@media screen and (width <= 450px){html{font-size:13px}}#root{width:100%;min-height:100vh;display:grid;grid-template-rows:min-content 1fr min-content;background-color:var(--secondary-color)}header{background-color:var(--primary-color);box-shadow:0 0 15px -2px #fff;color:var(--secondary-color);padding:.5rem 0;display:flex;justify-content:space-around;align-items:center}.banner{display:flex;align-items:center;gap:.5rem}header>a{text-decoration:none}.banner-logo{font-size:1.3rem;font-weight:700;background-color:var(--secondary-color);color:var(--text-white);padding:.3rem;letter-spacing:.03rem;border-bottom-left-radius:10px;border-top-right-radius:10px}.banner-img{width:40px}header nav>a{outline:none;text-decoration:none;color:var(--text-white)}header nav>a:hover,header nav>a:focus{text-decoration:underline}.no-user-nav,.user-nav{display:flex;align-items:center;gap:3rem;position:relative}@media only screen and (width <= 400px){.banner-logo{display:none}}.user-menu-btn{background:none;outline:none;border:none;display:flex;align-items:center;cursor:pointer;font-family:roboto,sans-serif;font-size:1.01rem}.user-menu-btn:hover,.user-menu-btn:focus{text-decoration:underline;color:var(--text-white)}.username-span{max-width:8ch;display:block;overflow:hidden;text-overflow:ellipsis;color:var(--text-white)}.menu-arrow{width:28px;filter:brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(303%) hue-rotate(256deg) brightness(113%) contrast(90%)}.rotate{transform:rotate(180deg)}.user-menu{position:absolute;background-color:var(--text-white);padding:1rem;top:110%;left:42%;width:max-content;border-radius:0 10px}header nav .hidden{display:none}footer{background-color:var(--primary-color);padding:1rem 0;display:flex;justify-content:center;box-shadow:0 0 15px -2px #fff}footer>p{color:var(--text-white)}.posts-list{display:grid;grid-template-columns:1fr;grid-auto-rows:max-content;gap:5rem;justify-content:center;width:min(720px,100%);flex-shrink:1;flex-grow:1;padding:1rem 0}.posts-wrapper{width:100%;display:flex;flex-direction:column;align-items:center;padding:1rem;overflow:hidden}.homepage{width:100%;display:flex;flex-direction:column;align-items:center;margin:5rem 0;overflow:hidden}.homepage .pagination-btns{margin:5rem 0 .5rem}@media screen and (width < 720px){.homepage .pagination-btns{padding:0 1rem}}.post-link{text-decoration:none;will-change:transform;transition:transform .1s linear}.post-link:hover,.post-link:focus{transform:scale(1.05)}.post-card{position:relative;background-color:var(--primary-color);color:var(--text-white);display:flex;flex-direction:column;gap:1rem;padding:2rem;border-radius:0 30px;box-shadow:0 0 20px -1px #fff;will-change:transform;width:100%}.post-info{display:flex;justify-content:space-between;opacity:.8;align-self:stretch}.post-info.admin{margin-top:1rem}.post-author{max-width:15ch;overflow:hidden;text-overflow:ellipsis}.post-title{font-size:1.6rem;font-size:clamp(1.1rem,1rem + 2vw,1.6rem);font-weight:700;max-width:clamp(16ch,2ch + 70vw,50ch);overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap;z-index:1}.post-preview{margin:0 1rem;opacity:.8}.post-img{position:absolute;height:96%;z-index:0;left:0;right:0;margin:0 auto;opacity:.1;top:2%}.post-thumbnail-wrapper{z-index:2;max-width:400px;max-height:400px;overflow:hidden;margin:0 auto 1rem}.post-thumbnail{max-width:100%;filter:brightness(.9)}.post-thumbnail-wrapper.admin{margin:2rem auto 0}.publish-btn{cursor:pointer;position:absolute;top:0%;right:0;left:0;background-color:var(--text-white);border:none;outline:none;padding:.5rem 1rem;font-family:roboto,sans-serif;font-size:1rem;font-weight:700;border-radius:0 30px 0 0;color:var(--primary-color);z-index:2}.publish-btn:hover,.publish-btn:focus{color:var(--text-black)}@media screen and (width <= 400px){.post-card{padding:1.4rem}}.pagination-btns{margin:5rem 0;display:grid;grid-template-columns:max-content 1fr max-content;width:min(720px,100%)}.pagination-btns button{cursor:pointer;font-size:1rem;font-family:roboto,sans-serif;color:var(--text-white);background-color:var(--primary-color);outline:none;border:none;border-radius:0 10px;padding:.5rem 1rem;box-shadow:0 0 10px #fff;will-change:transform;transition:transform .2s ease-in-out}.pagination-btns button:hover,.pagination-btns button:focus{transform:scale(1.1)}.auth-modal{width:fit-content;height:fit-content;margin:0 auto;margin-top:5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;background-color:var(--primary-color);padding:1rem;border-radius:0 20px;box-shadow:0 0 15px 3px #fff}.auth-modal img{display:block;width:50px}.auth-modal .auth-title{font-size:1.2rem;font-weight:700;color:var(--secondary-color)}.auth-modal label{display:block;color:var(--secondary-color);font-size:1.2rem;font-weight:700}.auth-modal input{outline:none;font-size:1.2rem;height:3ch;padding:0 .2rem;border:2px solid black;border-radius:0 10px}.auth-modal input:hover,.auth-modal input:focus{box-shadow:0 0 10px #fff}.auth-modal form{display:flex;flex-direction:column;gap:1rem}.auth-modal form>:last-child{display:flex;justify-content:center}.auth-modal a{color:var(--text-white);font-size:1.1rem}.auth-modal button{outline:none;background-color:var(--secondary-color);border:none;color:var(--text-white);font-size:1.2rem;font-weight:700;padding:.5rem 1rem;border-radius:0 10px;cursor:pointer;box-shadow:0 0 10px -2px #fff;will-change:transition;transition:transform .2s ease-in-out}.auth-modal button:hover,.auth-modal button:focus{transform:scale(1.1)}.auth-modal .errors{list-style:none;color:var(--secondary-color)}.auth-modal .error{word-break:break-word;max-width:28ch}.full-post{margin:0 1rem;display:flex;flex-direction:column;justify-content:start;align-items:center}.full-post>.post-shadow{box-shadow:0 0 15px #fff;border-radius:0 40px;margin:4rem 0rem;width:min(900px,100%)}.post{background-color:var(--text-white);border:10px solid var(--primary-color);padding:2rem;box-shadow:0 0 15px 0 inset var(--primary-color);border-radius:0 40px;display:flex;flex-direction:column}.full-post-img-wrapper{margin:0 auto 1rem;overflow:hidden;padding:1rem;max-width:100%;max-height:400px}.full-post-image{max-width:100%}.full-post-title{color:var(--primary-color);font-weight:700;font-size:2.2rem;font-size:clamp(1.3rem,1rem + 3vw,2.2rem);text-align:center;position:relative;word-break:break-word}.full-post-info{margin:2rem 0;opacity:.8;display:flex;flex-wrap:wrap;justify-content:space-around;row-gap:.5rem}.author{max-width:15ch;overflow:hidden;text-overflow:ellipsis}.full-post-text{color:var(--text-black);font-size:1.1rem;line-height:1.8rem;word-break:break-word;overflow:hidden}.full-post-text p{margin:1rem 0;line-height:2.4rem}.full-post-text h1,.full-post-text h2,.full-post-text h3,.full-post-text h4,.full-post-text h5,.full-post-text h6{border:none;margin:max(1em,2rem) 0}.full-post-text ul,.full-post-text ol{padding-left:2.1em;margin:1rem 0}.comments-title{color:var(--primary-color);width:100%;text-align:center;border-bottom:2px solid var(--primary-color);padding-bottom:.5rem;font-size:2rem;font-weight:700;margin:5rem 0}.comment-login{text-decoration:none;background-color:var(--primary-color);font-size:1.1rem;color:var(--text-white);padding:1rem;border-radius:0 10px;box-shadow:0 0 10px #fff;will-change:transform;transition:transform .2s ease-in-out}.comment-login:hover,.comment-login:focus{transform:scale(1.1)}.comments{margin:3rem 0 4rem;width:100%;display:flex;flex-direction:column;align-items:center;gap:3rem}.comments .pagination-btns{margin:1rem 0 0}@media screen and (width <= 400px){.post{padding:1.4rem}}.comment-form{display:flex;justify-content:center;width:100%}.comment-form div{width:min(600px,100%);display:flex;flex-direction:column;gap:.5rem}.comment-form textarea{max-width:100%;outline:none;border:3px solid var(--primary-color);border-radius:0 20px;min-height:14ch;font-family:roboto,sans-serif;font-size:1rem;padding:.5rem;color:var(--text-black);background-color:var(--text-white);box-shadow:0 0 10px #fff;field-sizing:content;overflow:hidden;word-break:break-word}.comment-form button{align-self:end;background-color:var(--primary-color);outline:none;border:none;cursor:pointer;padding:.5rem 1rem;font-weight:700;font-family:roboto,sans-serif;font-size:1rem;color:var(--text-white);border-radius:0 10px;box-shadow:0 0 10px #fff;will-change:transform;transition:transform .2s ease-in-out}.comment-form button:hover,.comment-form button:focus{transform:scale(1.1)}.comment-card{background-color:var(--primary-color);padding:1rem;border-radius:0 20px;width:min(600px,100%);background-color:var(--text-white);border:3px solid var(--primary-color);box-shadow:0 0 10px #fff;display:flex;flex-direction:column;position:relative}.comment-info{display:flex;width:100%;justify-content:space-between;align-items:center}.comment-author{max-width:clamp(10ch,8ch + 5vw,20ch);overflow:hidden;text-overflow:ellipsis}.comment-btns{display:flex;gap:1rem}.editing-comment-txt,.comment-txt{font-size:1.1rem;font-family:roboto,sans-serif;max-width:100%;min-height:5ch;margin:1rem 0;border:none;outline:none;resize:none;background:none;color:var(--text-black);field-sizing:content;word-break:break-word;overflow:hidden}.comment-txt{cursor:default;margin:1rem .5rem}.editing-comment-txt{padding:0 .2rem;border-radius:0 10px;border:2px solid var(--primary-color)}.comment-card button{cursor:pointer;border:none;background-color:var(--primary-color);border-radius:0 10px;padding:.5rem 1rem;font-size:1rem;color:var(--text-white);box-shadow:0 0 10px #000;will-change:transform;transition:transform .2s ease-in-out}.comment-card button:hover,.comment-card button:focus{transform:scale(1.1)}.prompt-btns{display:flex;gap:1rem;align-self:end}.comment-user{color:var(--text-black);display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}.comment-date{opacity:.7;font-size:.9rem}.admin-main{display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:0 1rem}.admin-posts{display:flex;flex-direction:column;gap:5rem;width:min(720px,100%);margin:5rem 1rem}.new-post-link{text-decoration:none;margin-top:5rem;padding:.8rem 5rem;background-color:var(--text-white);outline:none;color:var(--primary-color);font-weight:700;font-size:1.3rem;border-radius:0 20px;box-shadow:0 0 15px -1px #fff;will-change:transform;transition:all .2s ease-in-out}.new-post-link:hover,.new-post-link:focus{transform:scale(1.1);color:var(--text-black)}.admin-main .pagination-btns{margin:.5rem 0 5rem}.post-form-wrapper{display:flex;flex-direction:column;align-items:center;width:100%}.new-post-form{padding:1rem;margin:5rem 1rem;max-width:min(900px,100%);background-color:var(--text-white);border:6px solid var(--primary-color);border-radius:0 40px;box-shadow:0 0 15px -1px #fff;display:flex;flex-direction:column;gap:3rem}.new-post-form button{background-color:var(--primary-color);outline:none;border:none;padding:.5rem 1rem;font-family:roboto,sans-serif;font-size:1rem;border-radius:0 10px;cursor:pointer;color:var(--text-white);box-shadow:0 0 10px #000;will-change:transform;transition:transform .2s ease-in-out}.new-post-form button:hover,.new-post-form button:focus{transform:scale(1.02)}.new-post-form .title-publish-wrapper{display:flex;width:100%;justify-content:space-between;flex-wrap:wrap;row-gap:2rem}.new-post-form input[type=text]{border:2px solid var(--primary-color);border-radius:0 10px;font-family:roboto,sans-serif;font-size:1.1rem;padding:0 .2rem;height:3.3ch;outline:none;box-shadow:0 0 10px #000;width:min(100%,400px)}.new-post-form input[type=text]:hover,.new-post-form input[type=text]:focus{border-color:var(--text-black)}.new-post-form input[type=checkbox]{width:3rem;background-color:var(--primary-color);cursor:pointer}.new-post-form .preview-wrapper{display:flex;justify-content:center}.new-post-form .preview-wrapper>input{width:100%}.new-post-form .errors{list-style:none}.new-post-form .error{max-width:28ch;word-break:break-word}.post-del-btns-wrapper{width:100%;display:flex;gap:2rem}.post-del-btns-wrapper>button{width:50%}.upload-wrapper{display:flex;width:100%;justify-content:center;align-items:center;gap:2rem;flex-wrap:wrap}.image-upload{cursor:pointer;background-color:var(--primary-color);outline:none;border-radius:0 20px;padding:1rem 3rem;color:var(--text-white);box-shadow:0 0 15px #000;will-change:transform;transition:transform .2s ease-in-out}.image-upload:hover,.image-upload:focus{transform:scale(1.1)}