:root {
			--background-color: darkblue;
			--text-color:		#121416d8;
			--button-text-color:#eee;
			--border-color:		lightgrey;
			--font-size:		80%;
			--cell-active:		darkblue;
		}
		html[data-cwtheme="cwlight"] {
			--background-color: darkblue;
			--text-color:		#eee; 
			--button-text-color:#eee;
			--border-color:		lightgrey;
			--cell-active:		darkblue;
		}
		html[data-cwtheme="cwdark"] {
			--background-color: #a67967;
			--text-color:		#6f3434;
			--button-text-color:#6f3434;
			--border-color:		lightgrey;
			--cell-active:		#638d6c;
		}
		:root {
			--keyboardWidth:100cqw;
			--puzSize: calc(( var(--puzWidth) - 20px) / var(--columns) - 4px);
		}
		body {
			background-color:var(--background-color);
			height:100svh;
			width:100vw; 
			margin:0;
			overflow:hidden;
			overscroll-behavior:none; 
		}
		.topPuzContainer {
			container: puz / size;
			height:calc(100svh - 10px); 
			width: 100vw;
			padding-top: 5px;
			overflow:hidden;
			background-color:darkblue;
		}
		.topBlockContainer {
			width:100vw;
			height:100svh;
			display:grid;
			align-items: center;
			grid-row-gap: 15px;
			grid-template-columns: 100cqw;
			grid-template-rows: 10svh 65svh 20svh;
			grid-template-areas:"in"
								"sa"
								"na";
			justify-items: center;
			overflow:hidden;
		}
		.infoBlock {
			grid-area:in;
			width:100%;
			height:100% !important;
			margin-left:2cqw;
			display:grid;
			justify-content: center;
			align-items: center;
			container-type: inline-size;
			font-size: 5vw; 
			color: var(--text-color);
		}
		.setBlocks {
			position:relative;
			grid-area:sa;
			display:grid;
			width:100%;
			height:100%;
			justify-content: center;
			align-items: center;
			container-type: size;
			container-name: setContainer; 
		}
		@container setContainer (width > 0px) {
			.setBlocksInner {
				width: calc(min(100cqw, 100cqh) - 8px);
				height: calc(min(100cqw, 100cqh) - 8px);
				grid-template-columns: repeat(8, 1fr);
				grid-template-rows:    repeat(8, 1fr);
			}
		}
		.setBlocksInner {
			border: 3px solid grey;
			display:grid;
			grid-area:sai;
			grid-gap: 1px;
			background-color: rgba(240, 255, 80, 0.4);
			justify-content: center;
			align-items: center;
			container-type: inline-size;
		}
		#fireworkCanvas {
			position:absolute;
			width: 100%;
			height:100%;
		}
		.newBlocks {
			grid-area:na;
			width:100%;
			height:100% !important;
			margin-left:2cqw;
			display:grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr;
			justify-content: center;
			align-items: center;
			justify-items: center;
			container-type: inline-size
		}
		.newItem {
			display: grid;
			grid-gap:1px;
			position: relative;
		}
		.newItem > div {
			width:100%;
			height:100%;
		}
		
		.setBlocksInner > .grid_item {
			background-color:var(--cell-active);
			width:100%;
			height:100%;
		}
		/* Hamburger menu styles */
		#hamburgerMenu {
			position: fixed;
			top: 10px;
			right: 10px;
			background: rgba(0,0,0,0.3);
			color: white;
			padding: 5px 10px;
			cursor: pointer;
			border-radius: 4px;
			font-size: 24px;
			z-index: 1000;
		}
		#menuDropdown {
			width: 110px;
			position: absolute;
			right: 0;
			top: 100%;
			background: #333;
			border: 1px solid #888;
		}
		#menuDropdown button {
			background: none;
			color: white;
			border: none;
			padding: 8px 12px;
			text-align: left;
			cursor: pointer;
		}
		#menuDropdown button:hover {
			background: rgba(255,255,255,0.1);
		}
		.hidden {
			display: none;
		}
	   @media (max-aspect-ratio: 4/3) {
			.topBlockContainer {
				--setSize: clamp(30svh, 100cqw, 65svh) ;
				grid-template-columns: 100cqw;		  /* CSS rules for aspect ratios narrower than or equal to 1:1 (square or portrait) */
				grid-template-rows: 10svh var(--setSize) 20svh;			
				grid-template-areas:"in"
									"sa"
									"na";
			}
		}
	   @media (min-aspect-ratio: 4/3) {
			.topBlockContainer {
				grid-template-columns: 65cqw 35cqw;		  
				grid-template-rows: 10svh 1fr;			
				grid-template-areas:"in in"
									"sa na"; 
		   }
		   .newBlocks {
			   grid-template-columns: 1fr;
			   grid-template-rows: 1fr 1fr 1fr;
		   }
	   }