body {
	font-family: sans-serif;
}

.title {
	margin-right: 16px;
	font-size: 42px;
	font-weight: 700;
	padding: 24px 12px;
}

.instructions {
	height: 2em;
	/*flex-direction: column;*/
	justify-content: center; /*space-around;*/
	align-items: center;
	padding: 3px;
	font-size: 18px;
	display: flex;
}

#no_guesses { text-align: center; }

.grid td {
    width: 22.5vw;
    max-width: 22.5vw;
    min-width: 20px;
    min-height: 70px;
    height: 22.5vw;
    max-height: 22.5vw;
    background-color: #efefe6;
    color: #000;
    text-align: center;
    z-index: 0;
    border-radius: 6px;
    outline: none;
    font-size: 15px;
    font-weight: 700;
    transition: opacity .4s;
	 cursor: pointer;
	/* overflow-wrap: break-word;
	 hyphens: auto; */
}

.all-solved td {
	width: 92vw !important;
	max-width: 92vw !important;
}

.grid td.guess-words {
	width: 68vw;
	max-width: 68vw;
	font-weight: normal;
}

#guesses td {
	height: 10vw !important;
	max-height: 10vw !important;
}

.solved-words {
	font-weight: normal !important;
}

.selected {
	color: white !important;
	background-color: #5a594e !important;
}

#marker_selected {
	color: white !important;
	background-color: #96968e !important;
}

.level-0 {
	background-color: #fbd400 !important;
}

.level-1 {
	background-color: #b5e352 !important;
}

.level-2 {
	background-color: #729eeb !important;
}

.level-3 {
	background-color: #bc70c4 !important;
}

#mistakes {
	display: flex;
   justify-content: center;
   margin-top: 16px;
}

.mistake-counter, .solved-counter {
	width: 118px;
   justify-content: space-evenly;
	align-items: center;
	display: flex;
}

.solved-counter .bubble {
	color: black;
}

.bubble {
	opacity: 100;
	width: 16px;
	height: 16px;
	border-radius: 9999px;
	border-color: black;
	border-width: 1px;
	border-style: solid;
	text-align: center;
	padding-bottom: 3px;
/*	background-color: #efefe6;*/
	color: white;
	background-color: #5a594e;
}

.destroyed {
	animation: destroy 1s;
}

@keyframes destroy {
	0% { 
		opacity: 1;
/*		background-color: #5d594e; */
	}
	50% { 
		opacity: 1;
		background-color: red;
	}
	100% {
		opacity: 0;
		background-color: red;
	}
}

.solved {
 	display: none;
}

.buttons {
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 16px 0 0 0;
	display: flex;
}

.buttons span {
    width: fit-content;
    min-width: 5.5em;
    height: 2em;
    text-align: center;
    max-width: 80vw;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 32px;
    justify-content: center;
    align-items: center;
    padding: 8px 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5em;
    display: flex;
}

.buttons.marker-buttons {
	margin: 0 0 8px 0;
}

.buttons.marker-buttons span {
	min-width: 3.5em;
	height: 1em;
	border: 3px solid #fff;
}

.picked {
	border: 3px solid #000 !important;
}

.grid td.red, #marker_red {
	background-color: #f7b5b5;
}

.grid td.blue, #marker_blue {
	background-color: #b5def7;
}

.grid td.yellow, #marker_yellow {
	background-color: #f5f7b5;
}

.grid td.blue.yellow {
	background-color: #bdf7b5;
}

.grid td.red.blue {
	background-color: #cbb5f7;
}

.grid td.red.yellow {
	background-color: #f7cbb5;
}

.grid td.red.blue.yellow {
	background-color: #cf8357;
}

.grid td.red_border, #marker_red_border {
	box-shadow: inset 0px 0px 0px 6px red;
}

.grid td.blue_border, #marker_blue_border {
	box-shadow: inset 0px 0px 0px 6px blue;
}

.grid td.yellow_border, #marker_yellow_border {
	box-shadow: inset 0px 0px 0px 6px yellow;
}

.grid td.red_border.blue_border {
	box-shadow: inset 0px 0px 0px 6px purple;
}

.grid td.red_border.yellow_border {
	box-shadow: inset 0px 0px 0px 6px orange;
}

.grid td.blue_border.yellow_border {
	box-shadow: inset 0px 0px 0px 6px green;
}

.grid td.red_border.blue_border.yellow_border {
	box-shadow: inset 0px 0px 0px 6px brown;
}

.deselect {
	width: 120px;
}

.buttons span#submit {
	border: 1px solid #7f7f7f;
	color: #7f7f7f;
	pointer-events: none;
}

.enabled {
	border: 1px solid black !important;
	background-color: black !important;
	color: white !important;
	pointer-events: all !important;
}

#results_section {
	display: none;
}

#results tr {
	display: none;
}

.show-table {
	display: table !important;
}

.show-row {
	display: table-row !important;
}

#results.grid td {
	cursor: auto;
}

.show-block {
	display: block !important;
}

.hide {
	display: none !important;
}

.hidden {
	visibility: hidden;
}

#guesses tr {
	display: none;
}

#toast {
    visibility: hidden;
    color: #fff;
    opacity: 1;
    z-index: 100;
    text-align: center;
    background-color: #000;
    border: none;
    border-radius: 4px;
    margin: 30px;
    padding: 13px;
    font-size: 14px;
    line-height: 16px;
    position: fixed;
    left: 50%;
    transform: translate(calc(-50% - 30px));
	 transition: opacity 0.5s ease-in-out;
}

.visible {
	visibility: visible !important;
}

#toast.fade {
	opacity: 0;
}

#date {
	text-align: center;
	display: block;
}
#previous {
	text-decoration: none;
}
#next {
	text-decoration: none;
	text-align: right;
	display: block;
}

.previous-guess {
	box-shadow: inset 0px 0px 0px 4px magenta !important;
}