/* Flex and Aligning for Posts */

#loaded-content:not(#post-nav), #loaded-content:not(#profile-gallery), #profile-design-element-box, #loaded-watchers, #loaded-watching, .spotlight-element-body {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

#edit-profile-info {
    width: 100%;
}

fieldset {
    display: flex;
    flex-direction: column;
}

#form-post:not(#form-post) *, #login-page * {
    padding: 1.25%;
    float: right;
}

textarea, #login-page {
    resize: none;
}

@media screen and (min-width: 1536px) and (min-height: 864px) {
    textarea, #login-page {
        width: 700px;
        height: 600px;
    }
}

@media screen and (max-width: 1366px) and (max-height: 768px) {
    textarea, #login-page {
        width: 600px;
        height: 500px;
    }
}

@media screen and (max-width: 1375px) and (max-height: 667px) {
    textarea, #login-page {
        width: 300px;
        height: 400px;
    }
}

#add-new-comment textarea, #edit-comment textarea {
        height: auto;
}
    
#tags-input {
    height: 100px;
}

#loaded-content .post-block:not(.full-size) > div, #loaded-content .post-block:not(.full-size) > img {
    max-width: 500px;
    min-width: 200px;
    height: auto;
    font-size: 75%;
}

#post-options {
    display: flex;
    justify-content: center;
    margin-top: 0%;
    margin-bottom: 0%;
}

#post-options button, .comment-options button {
     padding: 7.5px;
     margin-right: 10px;
}

.submit, .action, .edit {
    font-weight: 700;
}

@media screen and (max-width: 1920px) and (max-height: 1080px) {
    .full-size > img:not(.profile-image), #file-display {
        max-width: 1750px;
        min-width: 250px;
    }
    
    .journal-content, :not(.spotlight-element).profile-design-element:not(.icon-mode),  #profile-id-element .post-block {
        max-width: 900px;
        min-width: 850px;
        min-height: 900px;
    }
}

@media screen and (max-width: 1536px) and (max-height: 864px) {
    .full-size > img:not(.profile-image), #file-display {
        max-width: 1400px;
        min-width: 150px;
    }

    .journal-content, :not(.spotlight-element).profile-design-element:not(.icon-mode),  #profile-id-element .post-block {
        max-width: 800px;
        min-width: 750px;
        min-height: 800px;
    }
}

@media screen and (max-width: 1366px) and (max-height: 768px) {
    .full-size > img:not(.profile-image), #file-display {
        max-width: 1300px;
        min-width: 150px;
    }

    .journal-content, :not(.spotlight-element).profile-design-element:not(.icon-mode),  #profile-id-element .post-block {
        max-width: 800px;
        min-width: 750px;
        min-height: 700px;
    }
}

.post-block {
    margin: 5px;
    white-space: pre-line;
    border: 3px solid rgba(164, 164, 164, 0.25);
}

:not(.post-block:first-child(img)) {
    min-width: 400px;
}

.post-block:only-child {
    padding: 1.25%;
    padding-top: 0.5%;
}

/* Metadata Settings */

#metadata .user-id img {
    width: 10%;
    height: 10%;
}

#metadata .user-id .user-name {
    align-self: center;
}

#submit-date {
    margin-bottom: 0;
    margin-left: 1%;
}

#tags {
    padding: 1%;
    padding-top: 0;
}

/* Profile Design */

#profile-design {
    display: grid;
    gap: 30px;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 1920px) and (max-height: 1080px) {
    .custom-design-element.display-mode, #profile-id-element.display-mode {
        min-width: 900px; 
    }
}

@media screen and (max-width: 1536px) and (max-height: 864px) { 
    .custom-design-element.display-mode, #profile-id-element.display-mode {
        min-width: 600px; 
    }
}

.custom-design-element.display-mode textarea {
    margin: 25%;
    margin-left: 15%;
}

.spotlight-element .post-block img {
    max-width: 875px;
    max-height: 875px;
}

#profile-design-element-box {
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    
    width: 20%;
    min-height: 250px;
    overflow-y: scroll;
    height: 600px;
}

.profile-image {
    min-width: 132px;
    max-width: 360px;
}

.mini-display {
    zoom: 25%;
}

/* Comment stack */

.reply {
    margin-left: 2%;
}

.comment .comment-text::before {
    content: '┖ ';
}

/* Post Feedback */

:root {
    --max-feedback-option-icon-size: 60px;
}

.post-feedback {
    justify-content: center;
    gap: 10px;
}

.post-feedback, .feedback-option, .star-rate-grid {
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-feedback .feedback-option img {
    max-width: var(--max-feedback-option-icon-size);
}

/* Star Rate */

button.feedback-option {
    background-color: rgba(0, 0, 0, 0);
}

:root {
    --star-rate-image-width: 322px;
    --star-rate-image-height: 42px; 
    --star-rate-background-size: calc(90% - 40px);
    --image-mask-url: url('../images/5-stars.webp');
    
    --gradient-percentage: 0%;
    --gradient-start: #FFD700;
    --gradient-end: #ddd;
}

.star-rate-grid span {
    opacity: 0;
    padding-right: calc(calc(var(--star-rate-image-width)/(8.55)));
    padding-bottom: calc(var(--star-rate-image-height)*0.7);
}

.star-rate-grid {
    gap: 4px;
}

.star-rate-grid {
    background-image: -webkit-linear-gradient(left, var(--gradient-start) var(--gradient-percentage), var(--gradient-end) var(--gradient-percentage) 100%);
    background-image: -moz-linear-gradient(left, var(--gradient-start) var(--gradient-percentage), var(--gradient-end) var(--gradient-percentage) 100%);
    background-image: -o-linear-gradient(left, var(--gradient-start) var(--gradient-percentage), var(--gradient-end) var(--gradient-percentage) 100%);
    background-image: linear-gradient(90deg, var(--gradient-start) var(--gradient-percentage), var(--gradient-end) var(--gradient-percentage) 100%);
    background-position: center;
    
    mask-image: var(--image-mask-url);
    -webkit-mask-image: var(--image-mask-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    
    width: var(--star-rate-image-width);
    height: var(--star-rate-image-height);
    
    opacity: 0.75;
}

.star-rate-feedback-count {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 3px;
}

.rate-value:after {
    content: "⭐";
}

.vote-value:after {
    content:  "🗳";
}

/* Note inbox */

#note-inbox {
    height: 795px;
    overflow: scroll;
}

#note-inbox li {
    padding: 3%;
    padding-left: 0.5%;
}

#note-text {
    min-width: 60%;
    max-width: 80%;
    min-height: 800px;
}