:root {
	--background: #191724;
	--foreground: #e0def4;
	--cursor: #e0def4;
	--color0: #302d3f;
	--color1: #eb6f92;
	--color2: #f6c177;
	--color3: #ebbcba;
	--color4: #31748f;
	--color5: #c4a7e7;
	--color6: #9ccfd8;
	--color7: #6e6a86;
	--color8: #45415a;
	--color9: #eb6f92;
	--color10: #f6c177;
	--color11: #ebbcba;
	--color12: #31748f;
	--color13: #c4a7e7;
	--color14: #9ccfd8;
	--color15: #908caa;
}

::selection {
	background: var(--color0);
	color: var(--color2);
}

:target {
    animation: highlight 1s ease-in-out;
}

@keyframes highlight {
    from { background-color: rgba(255, 255, 255, 0.3); }
    to { background-color: transparent; }
}

html, body {
	color: var(--foreground);
	background: var(--background);
	margin: 0;
	padding: 0;
	font-size: 1.1em;
	font-family: 'Noto Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', sans-serif;
	line-height: 1.5;
}

a {
	text-decoration: none;
	transition: all 0.1s ease;
}

/* unvisited link */
a:link {
  color: var(--color15);
}

/* visited link */
a:visited {
  color: var(--color7);
}

/* mouse over link */
a:hover {
  color: var(--color2);
}

/* selected link */
a:active {
  color: var(--color2);
  background: var(--color0);
}

.container {
	margin: 0 auto;
	max-width: 800px;
	padding: 0 1em;
}

header {
	margin: 0 0 2em 0;
	padding: 0 1em;

	place-items: center;
}

header h1 {
	margin: 0;
	padding: 1em 0 0.7em 0;
	font-size: 2em;
	line-height: 1.2;
	font-weight: 200;

	background: linear-gradient(to right, var(--color2), var(--color1));
	background-clip: text;
	color: transparent;
}

article {
	position: relative;

	border-radius: 0.5em;
	padding: 1em;
	margin: 0 0 2em 0;

	border-style: solid;
	border-width: 3px;
	border-image: linear-gradient(to right, var(--color2), var(--color1)) 1;

	transition: all 0.1s ease;

	overflow: hidden;
}

article:hover {
	border-style: solid;
	border-width: 5px;
	border-image: linear-gradient(to right, var(--color1), var(--color2)) 1;
}

article a {
	text-decoration: none;
	padding: 0 0;
	margin: 0 0;

}

article h1 {
	margin: 0;
	/* padding: 0.5em 0; */
	padding: 0.3em 0 0.6em 0;
	font-size: 1.5em;
	line-height: 1.2;
	color: var(--color3);
}

article img {
	position: absolute;
	right: 8px;
	top: 8px;
	max-width: 32px;
}