:root {
    --low-pink: #f2eddc;
    --darkblue: #2a4359;
    --blue: #42708c;
    --brown: #bf8b5e;
    --red: #a62145;
    --big-h2: 42px;
    --sml-h2: 30px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

html, body {
    height: 100%;
}

body {
    font-family: "Roboto Slab", serif;
    display: grid;
    grid-template-areas:
            "header header header header"
            "wl content sidebar wr"
            "footer footer footer footer";
    grid-template-columns: 1fr 960px 320px 1fr;
    grid-template-rows: 80px 1fr 80px;
}

.wrapper {
    width: 1280px;
}

.wl {
    grid-area: wl;
}

.wr {
    grid-area: wr;
}

/* HEADER */

header {
    display: flex;
    justify-content: center;
    grid-area: header;
    box-shadow: 0 2px 10px -2px #9d9d9d;
    font-size: 18px;
}

header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header a {
    text-decoration: none;
    color: var(--blue);
    font-weight: 500;
}

header .logo {
    font-size: 24px;
    user-select: none;
}

header .logo span {
    color: var(--red);
}

header nav {
    display: flex;
    gap: 30px;
}

/* END HEADER */
/* CONTENT */

.content {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 50px 40px 50px 0;
    grid-area: content;
}

.content span {
    padding: 5px 0 0;
    line-height: 1.4;
}

.content .main {
    color: var(--darkblue);
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 20px;
    overflow: hidden;
}

.content .main div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 18px;
}

.content .main h2 {
    font-size: var(--big-h2);
}

.content .main img {
    justify-self: end;
}

.content .main .goto-publish {
    align-self: start;
}

.content .main .goto-publish:hover {
    background: var(--blue);
    transition: 800ms background;
    transition-timing-function: ease-out;
}

.content .main .main-img{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 450px;
}

.content article {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    color: var(--darkblue);
    border-bottom: 1px solid var(--darkblue);
    padding: 0 0 20px;
}

.content article h2 {
    font-size: var(--sml-h2);
}

.content article .author {
    font-size: 12px;
}

.content article author-name {
    font-size: 16px;
    font-weight: bold;
}

.content article img {
    width: 920px;
    padding: 30px 0;
}

.content article .text {
    font-size: 18px;
    text-align: justify;
}

.content article a,.goto-publish {
    background: var(--darkblue);
    color: var(--low-pink);
    text-decoration: none;
    font-size: 19px;
    padding: 15px 28px;
    margin: 15px 0;
    transition: 800ms background;
    transition-timing-function: ease-out;
}

.content article a:hover, .goto-publish:hover {
    background: var(--blue);
}

.content article div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content article .article-img {
    width: 920px;
    height: 550px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.content .article-rows {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-column-gap: 20px;
}

.content .article-rows .column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--darkblue);
    text-align: justify;
    padding-bottom: 80px;
}

.content .article-rows .column h2 {
    font-size: var(--big-h2);
    text-align: left;
}

.content .article-rows .column a {
    align-self: end;

}

.content .article-rows .column .cover-img {
    width: 450px;
    height: 370px;
    background-position: center;
    background-size: cover;
}

.txt-inside {
    display: flex;
    align-items: end;
    justify-content: end;
}

.txt-inside h2 {
    background: var(--low-pink);
    padding: 8px;
}

/* END CONTENT */
/* SIDEBAR */

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;
    color: var(--darkblue);
    padding: 50px 0;
    grid-area: sidebar;
}

.sidebar > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    border: 2px solid var(--darkblue);
    padding: 20px 15px 40px;
    font-size: 18px;
    line-height: 1.2;
}

.sidebar > div span {
    color: var(--darkblue);
    font-size: 20px;
    padding: 0 0 16px;
}

.sidebar > div .pirate-img {
    width: 300px;
}

.sidebar > div form {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar > div form input {
    padding: 10px;
    text-align: center;
}

.sidebar .login-form :is(#username, #password) {
    text-align: left;
}

.sidebar .login-form :is(#username, #password)::placeholder {
    text-align: center;
}

.sidebar :is(#profile, #profile-index) {
    display: flex;
    flex-direction: row;
    padding: 20px 15px;
    font-size: 19px;
}

.sidebar :is(#profile, #profile-index) img {
    width: 40px;
}

.sidebar #profile-index a {
    color: var(--darkblue);
    text-decoration: none;
    padding: 0;
}

.sidebar #profile span {
    width: 90%;
    padding: 0;
}

.sidebar #profile form {
    width: auto;
}

.sidebar #profile form input {
    width: 80px;
    align-self: end;
}

.sidebar :is(input[type=submit],#send) {
    background: var(--darkblue);
    color: var(--low-pink);
    border: none;
    cursor: pointer;
    transition: 800ms background;
    transition-timing-function: ease-out;
}

.sidebar :is(input[type=submit],#send):hover {
    background: var(--blue);
}

/* END SIDEBAR */
/* NEW POSTS */
.post {
    background: var(--brown);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--darkblue);
    padding: 20px;
}


.post #form-article {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.post #article-title {
    font-size: 21px;
    padding: 5px;
}

.post .permalink {
    height: 25px;
    display: flex;
    align-items: center;
    gap: 5px;

}

.post .permalink input {
    padding: 5px;
}

.post .perma-btn {
    background: var(--darkblue);
    color: var(--low-pink);
    padding: 3px 5px;
    transition: 700ms background;
}

.post .perma-btn:hover {
    background: var(--blue);
}

.post textarea {
    font-size: 18px;
    font-family: "Roboto Slab", serif;
    resize: vertical;
    min-height: 500px;
    padding: 5px;
    border: none;
}

.post textarea:focus-visible {
    outline: 0;
}

.post .counter {
    background: var(--low-pink);
    display: flex;
    flex-direction: column;
}
.post .counter div {
    box-shadow: 1px 5px 9px 5px rgba(0, 0, 0, .2);
    padding: 5px;
}

.post :is(input,textarea):focus:invalid {
    background: #f6b1b1;
}

#perma-chg {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/* PUBLISH STATUS | BUTTONS */

#publish-sidebar {
    align-items: start;
    gap: 8px;
    color: var(--darkblue);
    user-select: none;
    padding: 20px 15px;
}

#publish-sidebar h2 {
    width: 100%;
    text-align: center;
}

#publish-sidebar hr {
    width: 100%;
    margin-bottom: 10px;
}

#publish-sidebar nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#publish-sidebar nav div,#publish-article {
    background: var(--darkblue);
    color: var(--low-pink);
    padding: 5px 8px;
    cursor: pointer;
}

#publish-sidebar > div {
    display: flex;
    align-items: end;
    gap: 5px;
}

#publish-sidebar .publish-bolt {
    font-weight: bold;
    padding: 0;
}

#publish-sidebar .publish-edit {
    text-decoration: underline;
    color: var(--blue);
    cursor: pointer;
}

#publish-sidebar .publish-btns {
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

#publish-sidebar .publish-btns div:first-child {
    color: var(--red);
    cursor: pointer;
}

#publish-sidebar .publish-btns a {
    color: var(--red);
    text-decoration: none;
}

#publish-sidebar .publish-btns input {
    background: var(--blue);
    color: var(--low-pink);
    font-size: 18px;
    padding: 5px 14px;
    cursor: pointer;
    border: none;
}

/* END PUBLISH STATUS */
/*END NEWPOSTS*/
/* ARTICLES */

.single-article {
    color: var(--darkblue);
    display: flex;
    flex-direction: column;
    gap: 12px;
    line-height: 1.4;
    font-size: 21px;
}

.single-article .img-article {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 920px;
    height: 520px;
}

.single-article .article-info {
    font-size: 16px;
}

.box-comments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--darkblue);
}

.box-comments > div:first-child {
    background: var(--low-pink);
    border-width: 2px 0;
    border-color: grey;
    padding: 12px;
    font-size: 19px;
    font-weight: 600;
}

.box-comments div:first-child span {
    color: var(--red);
}

.box-comments .comment {
    display: flex;
    gap: 5px;
    padding: 10px 0;
    width: 100%;
}

.box-comments img {
    width: 40px;
    height: 40px;
}

.box-comments .comment .info-comment {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.box-comments .comment .info-comment .info-user-comment {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.box-comments .comment .info-comment span {
     font-size: 16px;
     font-weight: bold;
     color: #000;
     padding: 0;
}

.box-comments .comment .info-comment .user-creator {
    color: var(--red);
}

.box-comments .comment .info-comment .content-comment {
    line-height: 1.3;
}

form #log-out-comments {
    padding: 10px;
    border: none;
    background: var(--darkblue);
    color: var(--low-pink);
    font-size: 13px;
    margin-left: 5px;
    font-weight: 500;
}

form.send-comment {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0 0 60px;
}

form.send-comment textarea {
    padding: 5px 12px;
    font-family: "Roboto Slab", serif;
    font-size: 18px;
    height: 220px;
    resize: none;
    box-shadow: 0 0 2px 0 var(--darkblue);
}

form.send-comment input {
    width: 60%;
    align-self: flex-end;
    padding: 10px 0;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--low-pink);
    background: var(--darkblue);
    border: none;
}

/* END ARTICLES */
/* AUTHOR */
.show-article-h1 {
    text-align: center;
    color: var(--darkblue);
}

.show-article {
    display: flex;
    gap: 20px;
    color: var(--darkblue);
}

.show-article img {
    width: 450px;
}

.show-article h2 {
    padding: 10px 0;
}

/* END AUTHOR */
/* FAQS */
.faqs h1 {
    padding: 0 0 10px;
}

.faq-box {
    background: #0f0;
    font-size: 24px;
}

.q-box,.a-box {
    padding: 15px;
}

.faq-box .q-box {
    background: grey;
    cursor: pointer;
}

.faq-box .a-box {
    background: var(--low-pink);
    display: none;
}

/* END FAQS */
/* CONTACT FORM */
#contact-form {
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
}

#contact-form :is(div,form) {
    display: flex;
    flex-direction: column;
}

#contact-form > div {
    background: var(--blue);
    color: var(--low-pink);
    position: relative;
    width: 500px;
    padding: 20px 30px;
    gap: 18px;
}

#contact-form > div form {
    gap: 5px;
}

#contact-form :is(input,textarea) {
    padding: 10px;
    margin-bottom: 10px;
    border: none;
}

#contact-form textarea {
    min-height: 150px;
    max-height: 500px;
    resize: vertical;
}

#contact-form div form input:last-child {
    background: var(--darkblue);
    color: var(--low-pink);
    font-weight: 900;
    margin-bottom: 0;
    cursor: pointer;
}

#contact-form #close-contact-form {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    user-select: none;
    font-size: 22px;
}

/* END CONTACT FORM */
/* FOOTER */

footer {
    background: var(--darkblue);
    color: var(--low-pink);
    display: flex;
    justify-content: center;
    grid-area: footer;
    font-size: 18px;
}

footer .wrapper {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
}

footer .wrapper div:last-child {
    justify-self: end;
    font-size: 13px;
}

footer .wrapper div author-name {
    font-size: 18px;
}

/* END FOOTER */