:root {
    color-scheme: light dark;
}

.page-main {
	padding: 15px 25vw;
	#tagStorage {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}
	.tag {
		display: flex;
		align-items: center;
		width: fit-content;
		border: 1px light-dark(#333, #ffffff) solid;
		border-radius: 999px;
		padding: 2px 10px;
		background-color: #ffffff00;
		color: light-dark(#333, #ffffff);
		font-weight: 500;
		font-size: 10px;
		text-decoration: none;
		cursor: pointer;
		&:active {
			color: light-dark(#333, #ddd);
			background-color: light-dark(#f5f5ff, #000000);
		}
		&::before {
			content: "#";
			display: block;
			padding-right: 4px;
			color: #7f7fff;
			font-weight: 600;
		}
	}

	h1 {
		margin: 0px;
		padding: 10px 0px;
		font-size: 22px;
		line-height: 1.4;
	}

	h2 {
		font-size: 18px;
		margin-top: 0;
		margin-bottom: 24px;
		padding-bottom: 4px;
		position: relative;
		&::after {
			display: block;
			content: "";
			width: 70%;
			height: 2px;
			background-color: #7f7fff;
			position: absolute;
			bottom: -4px;
		}
	}

	img {
		width: 100%;
		height: auto;
	}

	p {
		margin-top: 0;
		margin-bottom: 24px;
		white-space: pre-wrap;
	}
	
	font-bold {
		font-weight: 700;
	}
}

.author {
	font-size: 14px;
	color: #777;
	span {
		color: #7f7fff;
	}
}

.author,
.published {
	line-height: 1.2;
}

.published,
.updated {
	text-align: end;
	color: #777;
	font-size: 14px;
}

.updated {
	margin-bottom: 8px;
}

.photo-description {
	font-size: 12px;
	color: #777;
	margin-top: 0;
	line-height: 1.4;
}

@media screen and (max-width: 767px) {
	.page-main {
		padding: 15px;
	}
}