Feed {
	position: absolute;
	top: 96px;
	right: 96px;
	flex-direction: column;
	align-items: flex-end;
	font-size: 22px;
	font-family: Open Sans;
	font-weight: bold;
	color: radial-gradient( #FFEB00, #E4AB17 );
	text-shadow: 0px 0px 5px rgba( black, 0.2 );
	gap: 8px;
	margin: auto;
}


Feed > * {
	padding: 0px 16px;
	top: 0px;
	left: -16px;
	height: 50px;
	transition: all 0.1s ease-out;
	opacity: 1;
	transform: scale( 1 );
	position: relative;
	gap: 16px;
	align-items: center;
	backdrop-filter: blur( 50px );
	background-color: rgba( black, 0.25 );
	border: 0.5px solid rgba( black, 0.6 );

	&:before {
		left: 0;
		top: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #00000050;
		mask-position: center;
		mask-size: 32px;
		mask-image: url( ui/diag_line_mask.png );
	}

	.icons {
		gap: 0px;
	}

	.icon {
		transition: all 0.1s ease-in;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		background-tint: #fc5;
		height: 75%;
		transform: rotateY( 180deg );
	}

	&:intro {
		transform: scale( 0.7 );
		left: 200px;
		height: 0px;
		opacity: 0;
	}

	&:outro {
		left: 300px;
		height: 0px;
		opacity: 0;
		transition: all 0.2s ease-in;
	}

	&.is-me {
		border: 1px solid #e6ad12;
		background-color: #ffcc550a;
		background-image: radial-gradient( #ffc94400, #f4ab2cc6 );
		box-shadow: 0px 0px 50px #f802;
	}

	&.important {
		position: relative;
	}
}