@import url("reset.css");

body {
    background-color: aliceblue;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
}

/* header sec */

.header {
    background-color: black;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.headLinks {
    font-weight: 500;
    font-size: 1.2rem;
    display: flex;
    gap: 40px;
}


.headLinks a:hover {
    color: aqua;
}

.username {
    color: rgb(78, 204, 204);
}

.logo {
    text-align: center;
}

/* Show sec */

.createBut {
    background-color: black;
    color: white;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
}

.createBut:hover {
    color: aqua;
}


.showSec {
    margin-top: 30px;
    margin-bottom: 30px;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 700px);
    justify-content: center;

}

.post {
    display: flex;
    flex-direction: column;
    max-height: min-content;
    padding: 20px 30px;
    border: solid 1px aqua;
    border-radius: 5px;

    /* جلوگیری از بیرون زدن متن */
    word-wrap: break-word;
    /* نسخه قدیمی‌تر */
    overflow-wrap: break-word;
    /* نسخه مدرن */
    white-space: normal;
    /* مطمئن میشه متن می‌شکنه */
}

.bold {
    font-size: 1.2rem;
    font-weight: 500;
}

/* form sex */

.formMain {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    padding: 0px 20px;
    gap: 20px;
    align-items: center;
}

.form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    gap: 5px;
}

.form label {
    font-weight: 500;
}

.subBtn {
    background-color: black;
    color: white;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 15px;
}

.error {
  color: red;
  font-size: 0.9rem;
  margin: 4px 0 12px;
}

.delBtn{
    background-color: rgb(203, 46, 46);
    color: white;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 10px;
}



/* footer sec */

.footer {
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
}


@media (max-width: 490px) {
    .header {
        flex-direction: column;
    }
}