:root {
  --hue: 300;
  --color-1: oklch(99% 0.04 var(--hue));
  --color-2: oklch(90% 0.08 var(--hue));
  --color-3: oklch(80% 0.12 var(--hue));
  --color-4: oklch(70% 0.16 var(--hue));
  --color-5: oklch(60% 0.18 var(--hue));
  --color-6: oklch(48% 0.16 var(--hue));
  --color-7: oklch(36% 0.12 var(--hue));
  --color-8: oklch(20% 0.06 var(--hue));
  --color-9: oklch(14% 0.02 var(--hue));
  --color-10: oklch(8% 0.06 var(--hue));
}

html {
	background: var(--color-8);
}

body {
	color: var(--color-1);
	max-width: 950px ;
	margin: auto ;
	margin-bottom: 150px;
	padding: 0 16px ;
	font-family: sans-serif ;
	font-size: 18px;
}

::-webkit-scrollbar {
	width: .66vw;
	background-color: var(--color-4);
}
::-webkit-scrollbar-thumb {
	background-color: gray;
	border-radius: 5px;
}

a, a:visited {
	color: var(--color-4);
	text-decoration: none ;
}

a:hover {
	color: var(--color-3) ;
	text-decoration: underline ;
}

#tagcloud {
	list-style: none ;
	text-align: center ;
	padding: 0 ;
}

#tagcloud li {
	display: inline-block ;
}

#tagcloud a {
	margin: .1em .25em ;
}

h1 {
  color: var(--color-4);
	border-style: solid ;
	border-width: 0px 0px 2px 0px ;
	text-align: center ;
	margin-bottom: 32px ;
}

h2 {
	color: var(--color-3) ;
	text-align: center ;
	border-style: solid ;
	border-width: 0px 0px 2px 0px ;
	text-align: center ;
}

h3 {
  color: var(--color-2) ;
  text-align: center ;
}

code {
	overflow-wrap: break-word ;
	color: var(--color-5) ;
	display: block ;
	font-size: 16px ;
}

.taglist {
	text-align: center ;
	margin-bottom: 2em ;
	margin-top: 2em ;
	border-top: solid 2px var(--color-3);
	padding-top: 16px ;
}


@media (pointer: coarse) {
	li > a {
	    display: inline-block;
		padding: 0.2em 0;
	}
}

@media print {
	a[href] {
		text-decoration: none ;
		color: black ;
	}

}

.older-article {
	display: none ;
}

.hidden {
	display: none !important ;
}

#artlist {
	font-size: large ;
}

#artlist li {
	padding: .25em ;
}

@media (min-width: 55em) {
	#artlist { column-count: 2 ;}
}

@media (min-width: 100em) {
	#artlist { column-count: 3 ;}
}


input#search {
  all: unset;
  background: var(--color-8);
  color: var(--color-2);
  padding: 0.7rem 1rem;
  border: 2px solid var(--color-7);
  border-radius: 5px;
  width: 100%;
}

.search {
  width: 400px;
  max-width: 85vw;
  position: relative;
  margin: 0.5rem auto 1.2rem;
  display: flex;
}

button#clear-search {
  all: unset;
  position: absolute;
  right: 10px;
  top: 10px;
  height: 30px;
  width: 30px;
  color: var(--color-4);
  cursor: pointer;
  transition: color 180ms ease-in-out;
}
button#clear-search:hover {
  color: var(--color-2);
}

button#clear-search:focus, a:focus   {
  outline: 2px solid var(--color-4);
  border-radius: 0.25rem;
}

.matched-recipe {
	font-size: x-large ;
	display: list-item !important ;
}

.list-searched {
	column-count: 1 !important ;
	list-style: decimal ;
	max-width: 600px ;
	margin: auto ;
}
.js-only { display: none ; }