:root {
	--action: 	var(--cafe);
	--main: 	var(--cafli);
}


.wide > * 	{ width: 100%; max-width: inherit; }

h1.quote  	{ font-size: 2em; }

h4 			{ font-family: Oswald; opacity: 0.7; font-size: 0.95em; font-variation-settings: "wght" 350; }

.ctn.cards                         { text-align: left; grid-gap: 0.5em; margin: 2em auto; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); max-height: calc(100vh - 28em); overflow: scroll; }
.ctn.cards > *                     { place-content: start; grid-template-rows: 1.5em 1fr auto; grid-gap: 0.5em; padding: 1em 1em 1em; background-color: rgba(0,0,0,0.15); }
.ctn.cards h5                      { display: block; margin: 0; text-align: right; padding: 0 !important; font-variation-settings: "wght" 600; opacity: 0.4; }
.ctn.cards p                       { display: block; margin: 0 0 auto; text-align: left; padding: 0 !important; }
.ctn.cards p::first-letter         { font-family: Love light; font-size: 3em; text-transform: capitalize; color: var(--main); }
.ctn.cards :last-child p           { grid-column: 1 / -1; text-align: center; padding: 2em; aspect-ratio: unset; }
.ctn.cards .tools svg              { color: white; }


.switcher        				   { background-color: rgba(0,0,0,0.15); }
.switcher svg    				   { top: 0; }

.tools svg:first-child:last-child  { top: 0; margin: auto; }

.ctn.cards + svg              	   { display: block; width: 1em; margin: 0; position: relative; top: -1em; }

main .stack > div 					   { grid-gap: 1em; height: fit-content; }
main .stack > div > div				   { background-color: rgba(0, 0, 0, 0.1); padding: 1em; height: fit-content; width: 100%; margin: 0 auto; max-width: 36rem; }

div.main 						   { font-size: 1.3em; }
p.main 							   { font-size: 1.2em; font-family: Annie; line-height: 0.9em; padding: 0.3em 0; margin: unset; }
.main h4  						   { font-size: 0.7em; }

.oneline button[type]              { background-color: rgba(0, 0, 0, 0.3); border: none; }


.itemlist li h3 				   { color: var(--main); font-size: 1.5em; font-family: Annie; padding: 0.3em 0 !important; }
.itemlist li h3 + p				   { margin-top: 0.5em; }
.itemlist li div.grid  			   { grid-template-columns: auto auto auto 1fr auto auto; max-width: 24em; margin: 0 auto 0 0; grid-gap: 1.2em; }

.checklist input + label 	 	   			{ display: inline-block; }
.checklist input + label svg 	   			{ border: none; background-color: transparent; }
.checklist input:checked + label svg 		{ background-color: transparent; opacity: 1; }
.checklist input + label svg[nn=trash] 		{ opacity: 0.5; }
.checklist :checked + label svg[nn=star]    { color: var(--yellow); padding: 0; font-size: 1.2em; top: 0; }


@media only screen and (max-width: 609px) { 
  	.ctn.cards 		{ max-height: calc(100vh - 24em); }
  	h1.quote  		{ font-size: 1.5em; }

}


@media only screen and (max-width: 421px) { 
  	.ctn.cards 		{ max-height: calc(100vh - 18em); margin: 1em 0; }

}