.post {
    display: flex;
    flex-direction: column;
	gap: 10px;
    
    .postbit-head {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 15px 30px;
        background-color: var(--color-background-user-header);

        .title {
            align-self: center;
            text-align: center;
            font: 8px 'Montserrat';
            text-transform: uppercase;
            letter-spacing: 4px;
            color: var(--color-text);
            opacity: 0.9;
        }

        .character-info {
            display: flex;
            flex-direction: column;
            padding: 5px 180px;

            .name {
                font: 25px 'Quicksand';
                text-transform: uppercase;
                letter-spacing: 1px;
                text-align: left;
            }

            .user {
                font: 20px "Montserrat";
                text-transform: uppercase;
                letter-spacing: 2px;
                color: var(--color-text);
                opacity: 0.1;
                margin-left: 40px;
            }
        }

        .character-shortfacts {
            display: flex;
            gap: 40px;

            .shortfact {
                display: flex;
                align-items: center;
                gap: 10px;

                font: 400 8.5px 'Montserrat';
                text-transform: uppercase;
                letter-spacing: 1.5px;
                color: var(--color-text);
                white-space: nowrap;
            }
        }

        .spacer {
            height: 1px;
            background: var(--color-border);
            opacity: 0.2;
        }

        .ticon {
            position: absolute;
            right: 50px;
            top: 50%;
			transform: translateY(-50%) rotate(45deg);
        }
    }

    .postbit-main {
        display: flex;
		gap: 40px;

        .post-author {
			display: flex;
            flex-direction: column;
            gap: 20px;
			flex: 0 0 300px;
			
			.clickable-avatar {
				border: none;
				padding: 0;
				cursor: pointer;
			}
        }

        .post-content {
            flex: 1;
			display: flex;
			flex-direction: column;
			gap: 20px;
			
			.post-head {
				display: flex;
				gap: 20px;
				max-width: 610px;
				
				.posturl {
					font-weight: 600;
				}
				
				.post-info {
					flex: 1;
					font: 9px 'Quicksand';
					letter-spacing: 0.3px;
					color: var(--color-postbit-info);
				}
				
				i {
					font-weight: 500;
					font-size: 12px;
					color: var(--color-postbit-info);	
				}
			}
			
			.post_body {
				flex: 1;
				max-width: 610px;
				font: 12px 'Quicksand';
				letter-spacing: 0.1px;
				line-height: 150%;
				padding-right: 20px;
				text-align: justify;
			}
			
			.signature {
				display: flex;
				align-items: center;
				justify-content: center; 
			}
			
			b {
				font-weight: 500;
				letter-spacing: 1px;
				color: var(--color-text-accent);
			}

			i {
				font-style: italic;
				font-weight: 500;
				color: var(--color-text-accent);
			}

			u {
				border-bottom: 1px solid var(--color-text-accent);
				text-decoration: underline;
				color: var(--color-text-accent);
			}

			s {
				text-decoration: line-through;
				color: var(--color-text-accent);
			}
        }
    }

    .postbit-footer {
		display: flex;
		justify-content: flex-end;
        background-color: var(--color-background-user-header);
		padding: 10px 15px;
		
		.post-meta {
			flex: 1;
			color: var(--color-postbit-icons);
			
			a {
				color: var(--color-postbit-icons);
			}
		}
		
		.post-controls {
			display: flex;
			align-items: center;
			gap: 12px;
			
			a {
				color: var(--color-postbit-icons);
				font: 500 13px 'Quicksand';
				letter-spacing: 2px;
				display: inline-block;
				text-transform: uppercase;
			}
		}
    }
	
	&.deleted_post .postbit_mirage {
		display: none;
	}
	
	&:not(.deleted_post) {
		.status_type,
		.postbit-footer .postbit_qrestore {
			display: none;
		}
	}
}

.ticon {
	width: 130px;
	height: 130px;
	transform: rotate(45deg);
	border: 1px double var(--color-border);
	padding: 5px;
	
	&.small {
		width: 50px;
		height: 50px;
		padding: 3px;
	}
	
		.ticon-image {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
			
			&:before {
			content: "";
			position: absolute;
			width: 150%;
			height: 150%;
			top: -25%;
			left: -25%;
			background: var(--icon-url) 25% 30%/120%;
			transform: rotate(-45deg);
		}
	}
}

/****** CHARAKTER INFO POPUP ******/

.info-popup.active {
	/* display: flex;
	opacity: 1; */
	display: flex;
	opacity: 1;
}

.info-popup {
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-background-overlay);
    z-index: 9999;
    display: none;
	opacity: 0;
    align-items: center;
    justify-content: center;
	transition: 
		display 0.25s allow-discrete,
		opacity 0.25s;
}

@starting-style {
	.info-popup.active {
		display: flex;
		opacity: 0;
	}
}

.character-info-popup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
    width: 600px;
	
	font 10.5px 'Quicksand';
	letter-spacing: 0.1em;
	color: var(--color-text);
	padding: 20px;
	background-color: var(--color-background-main);
	border: 1px solid var(--color-text);
	box-shadow: 0px 0px 10px 0px var(--color-background-overlay);
	
	.character-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		isolation: isolate;
		
		.name {
			font: italic 45px Times New Roman;
			letter-spacing: 3px;
			text-transform: lowercase;
		}
		
		.usertitle {
			color: var(--color-text);
            font: 500 8px / 30px 'Quicksand';
            letter-spacing: 5px;
            text-transform: uppercase;
            line-height: 1;
            transform: translateY(-10px);
            z-index: 10;
		}
	}
	
	.character-info {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		width: 100%;
		
		> div {
			max-height: 90vh;
			overflow: auto;
			scrollbar-width: thin;
		}
	}
	
	.popup-right .profile-fact:first-child {
		margin-bottom: 10px;
	}
}