@import url(css/grid_layout.css);
@import url(css/overlay.css);
@import url(css/main_menu.css);



body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: var(--background_1);
	transition-duration: 0.2s;
	visibility: hidden;
}

#content {
	width: 95dvw;
	max-width: 500px;
	height: 100%;
	justify-content: center;
}
#footer {
	color: var(--txt_color_1);
}

#header_menu {
	width: 90dvw;
	max-width: 500px;
	display: grid;
	grid-template-columns: 10% auto 10%;
	grid-template-areas: 			
		"helpbtn timer setbtn";
}
#header_help {
	grid-area: helpbtn;
}
#header_help img {
	width: 100%;
	border-radius: 40%;
}
#header_timer {
	color: var(--txt_color_1);
	grid-area: timer;
}
#header_settings {
	grid-area: setbtn;
}
#header_menu button {
	padding: 0;
	height: 15dvw;
	width: 15dvw;
	max-width: 50px;
	max-height: 50px;
	position: relative;
	border: 2px solid var(--cell_border);
	color: var(--txt_color_1);
	display: flex;
	border-radius: 40%;
	font-size: 2em;
	font-weight: bolder;
	margin: 0;
	justify-content: center;
	align-items: center;
	background-color: var(--background_1);
/* 	box-shadow:  0px 1px 1px var(--cell_border), 0px -1px 1px var(--cell_border), 1px 0px 1px var(--cell_border), -1px 0px 1px var(--cell_border); */
	box-shadow: 0px 0px 2px var(--cell_border);
}
span {
	display: inline-flex;	
	justify-content: space-around;
    align-items: center;
	font-weight: bold;
}
#board {
	display: inline-flex;
    flex-wrap: wrap;
}
#board span {
	width: 10.6%;
	box-sizing: border-box;
	aspect-ratio: 1/1;
	font-size: 2.5em;
	font-weight: normal;
	display: block;
	cursor: pointer;
}


/* lines between cells */
.v-divider{
	display: block;
	width: 0.5%;
	background-color: var(--cell_border);
}
.iv-divider{
	width: 0.5%;
	background-color: var(--dividers);
	border-color: var(--background_1);
	border-top-width: 0.5em;
	border-bottom-width: 0.5em;
	border-left-width: 0px;
	border-right-width: 0px;
	border-style: solid;
	box-sizing: border-box;
}
.h-divider{
	display:block;
	width: 100%;
	aspect-ratio: 200/1;
	background-color: var(--cell_border)
}
.ihg-divider{
	display:flex;
	width: 100%;
	aspect-ratio: 200/1;
	background-color: var(--background_1);
	
}
.ih-divider{
	display: flex;
	width: 32.8%;
	
}
.hi-divider{
	background-color: var(--dividers);
	display: block;
	width: 33%;
	/* border-inline: 15px solid var(--background_1); */
	border-color: var(--background_1);
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0.5em;
	border-right-width: 0.5em;
	border-style: solid;
	box-sizing: border-box;
}

.offc {
	background-color: var(--offcolor_board);
}
.offv {
	border-color: var(--offcolor_board);
}

.offc div {
	border-color: var(--offcolor_board);
}

#board span p {
	display: block;
	margin: auto;
	height: 100%;
	color: var(--txt_color_1);
}


#game_container {
	aspect-ratio: 1/1;
	overflow: hidden;
	background-color: var(--background_1);
	transition-duration: 0.5s;
/* 	outline: 3px solid var(--cell_border);
	border: 2px solid var(--cell_border);
	outline-offset: -3px; */
}

.locked p {
	color: var(--txt_color_2) !important; 
	cursor: default !important;
}
.highlighted {
	/* text-shadow: var(--highlight_text_shadow); */
	color: var(--txt_color_n);
	align-items: center;
}

.highlighted p {
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-radius: 50%;
	color: var(--txt_color_n) !important;
	background-color: var(--highlight_circle);
	animation: grow .2s forwards ease-in !important;
}
p {
	text-align: center;
	justify-content: space-around;
	align-content: center;
}

.offcolor {
	background-color: var(--offcolor_board);
}

.picked {
	background-color: var(--cell_picked);
	outline: 3px outset var(--highlight_circle);
	outline-offset: 0px;
	z-index: 3;
}
.picked p {
	animation: none;
	color: var(--txt_color_n) !important;
	text-shadow:  1px 1px 1px var(--txt_color_2), -1px -1px 1px var(--txt_color_1), -1px 1px 1px var(--txt_color_1), 1px -1px 1px var(--txt_color_1);
}
.comparing {
	box-shadow: inset 0px 0px 30px var(--cell_picked);
}

.conflict {
	background-color: var(--cell_conflict);
}

.locked {
	cursor: default !important;
}
.highlighted.locked:not(.picked) p {
	color: var(--txt_color_2) !important;
}


.noted {
	position: relative;
}
.noted::after {
	content: attr(noted-val);
	position: absolute;
	color: var(--txt_color_2);
	font-weight: normal;
	opacity: 0.6;
	font-size: 40%;
	line-break:anywhere;
	letter-spacing: 0.3em;
	border: none;
	background: none;
	width:80%;
	top: 0;
	
}

.solved {
	color: rgb(252, 252, 252);
}

#keypad {
	position: fixed;
	bottom: 10vh;
	display: flex;
	flex-wrap: wrap;
	width: 450px;
	max-width: 95dvw;
}

.keypadselected {
	background-color: var(--cell_picked) !important;
}
.keypadselected p {
	color: var(--txt_color_n) !important;
}
.keypadfinished {
	color: var(--txt_color_n) !important;
	background-color: var(--highlight_circle) !important;
}
.numberin {
	width: 14%;
	margin-left: 2%;
	margin-bottom: 2%;
	position: relative;
	aspect-ratio: 1/1; 	
	cursor: pointer;
}

.numberin p {
	border: 2px solid var(--cell_border);
	color: var(--txt_color_2);
	display: flex;
	border-radius: 40%;
	font-size: 2.5em;
	font-weight: bolder;
	position: relative;
	width: 95%;
	height: 95%;
	margin: 0;
	justify-content: center;
	align-items: center;
	background-color: var(--background_1);
	box-shadow:  1px 1px 1px var(--cell_border), -1px -1px 1px var(--txt_color_1), -1px 1px 1px var(--cell_border), 1px -1px 1px var(--txt_color_2);
}


.iteration_counter {
	position: absolute;
	color: var(--txt_color_2);
	font-weight: bold;
	font-size: 130%;
	border: none;
	background: none;
	top: 10%;
	right: 10%;
}
#hintsbtn::after {
	content: attr(val);
	position: absolute;
	color: var(--txt_color_2);
	font-weight: bold;
	font-size: 130%;
	border: none;
	background: none;
	top: 10%;
	left: 10%;
}

.keypad_icon {
	width: 70%;
	height: 70%;
	filter: var(--icon_filter);
}

*{
	user-select: none;
}

@keyframes grow {
	0% {transform: scale(0.1); opacity: 0.1;}
	100% {width: 100%; height: 100%; opacity: 0.9;}
}

@media (max-width: 500px) {
	#board span {
	font-size: 8dvw;
}
}