body {
	--accent-color: #0cac00;;
	background-color: var(--accent-color);
	background-image: url("./img/miiverse_background.png");
	background-repeat: repeat;
	background-blend-mode: multiply;

	main {
		background-image:
			radial-gradient(circle at 15% 10%, transparent, oklch(90% 0 0 / 0.5)),
			url("../img/miiverse_background.png");
		background-repeat: repeat;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: max(1cqi, 1cqb) 2cqw 0;

		.wrap {
			writing-mode: horizontal-tb;
		}
		section {
			> header {
				background-color: var(--accent-color);
				background-image: url("../img/miiverse_background.png");
				background-size: 5%;
				background-blend-mode: multiply;

				padding: 0.2cqh 1cqw;
				color: #fff;
				font-size: 2.7cqh;
				font-weight: 700;
				border-radius: 1cqh;
				line-height: 5.4cqh;
				display: none;
			}
		}
		#new_communities {
			ul {
				display: flex;
				padding: 1cqw 1cqh;
				gap: 1.8cqw;
				flex-wrap: nowrap;
				overflow: hidden;
			}
		}
		#fav_communities {
			ul {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				padding: 1cqw 1cqh;
				gap: 1.5cqh 1.8cqw;
				max-height: 50cqh;
				overflow: hidden;
			}
		}
	}
}
.community-card {
	display: flex;
	align-items: flex-start;
	gap:1cqw;
	color: #000;
	flex-grow: 1;
	padding: 1cqh;
	border-radius: 1cqw;
	background-color: #fff;
	box-shadow:
		0 0.5cqh 0.5cqh oklch(0 0 0 / 0.15),
		0 0.5cqh 2.0cqh oklch(0 0 0 / 0.10);
	flex-shrink:0;
	max-width: 23cqw;
	align-items: center;

	img {
		flex-shrink: 0;
		width: 9cqh;
		border-radius: 0.5cqw;
		box-shadow: 0 0 0.5cqh oklch(0 0 0 / 0.3);
	}
	h3 {
		font-size: 2.3cqh;
		font-weight: 900;
		line-height: 3cqh;
	}
}
.post {
	display:flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;

	header {
		display: flex;
		background-color: #000;
		align-items: center;
		border-radius: 2cqw;
		padding:0 2cqh;
		gap:1cqw;
		font-weight: 700;
		color: #fff;
		position: relative;
		top: 0cqh;
		left: 0cqh;
		font-size: 2.2cqh;
		line-height: 2em;
		margin-bottom: 0.7cqh;

		&:after {
			content: "";
			width: 0;
			height: 0;
			position: absolute;
			border: 2cqh solid transparent;
			border-top: 0;
			border-bottom-color: #fff;
			bottom:-1.5cqh;
			z-index: 9;
			left:30%;
		}
	}
	.bubble {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-grow: 1;
		background-color: #fff;
		border-radius: 1.5cqw;
		position: relative;
		box-shadow: 0 0.2cqh 0.5cqh oklch(0 0 0 / 0.3);
		padding: 1cqh 1cqh 2cqh;
		gap:1cqh;
		width:100%;

		.content {
			width: 32cqw;
			font-size: 3cqh;

			p {
				line-height: 4cqh;
				margin: 0 1cqh 0.5cqh;
			}
			.attachment {
				position: relative;

				&::after {
					content: "";
					display: block;
					position: absolute;
					top:0;
					left:0;
					right:0;
					bottom:0;
					border-radius: inherit;
					box-shadow: inset 0 0 3cqh #fff, inset 0 0 1cqh #fff, inset 0 0 3cqh #fff;
					background-image: radial-gradient(transparent 50%, #fff 90%);
				}
				img {
					width:100%;
					display: block;
					border-radius: 0.7cqh;
					position: relative;
				}
			}
		}
		.community {
			display: flex;
			color: #000;
			gap:1.5cqh;
			border-radius: 1.8cqh;
			align-content: center;
			padding: 1cqh 0.5cqw 0.8cqh;
			background-color: oklch(0 0 0 / 0.05);

			img {
				width:2.7cqw;
				border-radius: 0.5cqw;
			}
		}
	}
	.userpic {
		width: 3.5cqw;

		img {
			width:100%;
			display:block;
		}
	}
}