/*	Grocery Checklist WEbsite	*/


* {	scroll-behavior: smooth;}
body {background: linear-gradient(to right, #777, #fff8ea);}
	@media only screen and (min-width: 601px) {
		main, header {width: 550px;}
				}
	@media only screen and (max-width: 600px) {
		.checkbox {width: 37%;}
				}
header b {font-size: 1.5rem;}
td {border: black 1px solid; height: 1.4rem;}
.checkbox {font-size: 0.8rem; text-align: center;}
.checkbox input {outline: #000 solid 2px; border-radius: 50%; padding:1px;}
section details summary {font-weight: 800; outline: solid black 1px; padding: .15rem;
				-webkit-user-select: none; -ms-user-select: none; user-select: none;}
	summary b {font-size: .8rem;}
	section details[open] summary {background: white;}
	section details[open] table {padding:.5rem; margin: 1rem; outline: solid 2px black;}
.main-item	{text-align: center; font-weight: 700;}
.item {padding-left: 1rem; text-align: left;}
section details table, section details table td, section details table td input {animation: aniop .5s;}
@keyframes aniop {0%{opacity: 0.0; height: 0rem; font-size: 0px;} 50%{height: 0px;}}
.xbutton:checked {accent-color: red; outline: #900 solid 2px;}
	td:has(.xbutton:checked)+td {background: #fcc;}
.checkbutton:checked {accent-color: blue; outline: #000 solid 3px;}
	td:has(.checkbutton:checked)+td {background:#ccf;}
.disbutton:checked {accent-color: #575; outline: #333 solid 1px;}
footer {padding: 10px; position: fixed; bottom: 10px; left: 10px; color: #444;font-size:.8rem; white-space:pre; z-index: -1;}
#meat table {background: url(grocimg/bg-meat2.png) fixed;}
#veggies table {background: url(grocimg/bg-veg2.png) fixed;}