#post-div {
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#delete-post-form,
#edit-post-form,
#edit-comment-post-form,
#report-post-form,
#create-post-form {
    height: auto;
    width: 680px;
    padding: 20px;
    gap: 10px;
    max-height: 90%;
    overflow: auto;
}

#post-entries {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 360px 250px;
    grid-template-rows: 1fr;
    gap: 20px;
    grid-template-areas:
    "input rules";
}

#post-data {
    grid-area: input;
    gap: 10px;
}

#post-image-div {
    height: 192px;
}

#attached-file:empty {
    display: none;
}

#attached-file:not(:empty) ~ #select-file {
    display: none;
}

#attached-file {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    gap: 10px;
    background: var(--text-box);
}

.file-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: var(--background);
}

.file-container > img,
.file-container > video {
    width: 100%;
    height: 100%;
}

#select-file {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 3px dashed var(--main);
    gap: 10px;
    align-items: center;
    justify-content: end;

    transition: background-color 133ms;
}

.file-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 10px;
}

.create-post-info {
    min-width: 128px;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.create-post-input:not(:checked) + .create-post-label {
    color: var(--text);
    background: var(--button);
}

.create-post-input {
    position: absolute;
}

.create-post-label {
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.post-note {
    text-align: center;
    color: #919797;
    font-size: 11px;
    font-weight: bold;
    margin: 18px 0;
}

#post-description {
    height: 76px;
}

#post-buttons {
    align-self: end;
    justify-self: end;
    gap: 10px;
}

#post-rules {
    grid-area: rules;
    background: var(--text-box);
    padding: 10px;
    box-shadow: var(--search-box-shadow);
    border-radius: 10px;
    gap: 4px;
}

#post-rules > span {
    font-size: 24px;
    font-weight: bold;
}

#post-rules > a {
    margin-top: auto;
    text-decoration: underline;
    color: var(--link);
    font-size: 13px;
}

.select-file-hover {
    background: var(--background);
}