@font-face { font-family: "nyt-karnakcondensed"; src: url("assets/fonts/karnakcondensed-normal-700.woff2") format("woff2"), url("assets/fonts/karnakcondensed-normal-700.woff") format("woff"); font-style: normal; font-weight: 700; }

body {
	background: white;
	color: rgb(18, 18, 19);
}
table {
	border-spacing: 5px;
}

h1 {
	font-size: 44px;
	text-align: center;
	font-family: 'nyt-karnakcondensed', sans-serif;
}
.word {
	
}

.letter {
	width: 62px;
	height: 62px;
	text-align: center;
	font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	font-size: 2rem;
	color: white;
	background: #787c7e;
}
.blank {
	border: 2px solid #d3d6da;
}

/* Wordle ships two tile palettes. These are the light-theme values; the
   darker set below is what the board had been using in both themes. */
.incorrect {
	background: #787c7e;
}
.correct {
	background: #6aaa64;
}
.misplaced {
	background: #c9b458;
}

.dark-mode .letter,
.dark-mode .incorrect {
	background: #3a3a3c;
}
.dark-mode .blank {
	border-color: #3a3a3c;
}
.dark-mode .correct {
	background: #538d4e;
}
.dark-mode .misplaced {
	background: #b59f3b;
}

.center {
	margin-left: auto;
	margin-right: auto;
  }

  button {
	background-color: #818384; /* Green */
	border-radius: 10px;
	border: none;
	color: white;
	padding: 15px 25px;
	text-align: center;
	text-decoration: none;
	/* display: inline-block; */
	/* font-family: "Lato", sans-serif; */
	font-size: 16px;
	/* margin: 5px; */
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
  }
  
  button:hover {
	background-color: dimgray; /* Green */
	color: white;
  }
  
  button:active {
	background-color: black;
	color: white;
  }

  .dark-mode {
	background-color: rgb(18, 18, 19);
	color: white;
  }

  #SidebarBtn {
	position: fixed;
	top: 6px;
	left: 6px;
	color: currentColor;
	font-size: 2em;
	cursor: pointer;
	transition: 0.3s;
}


#gear {
	position: fixed;
	top: 10px;
	right: 10px;
	/* color: #999;
	font-size: 2em; */
	cursor: pointer;
	transition: 0.3s;
	color: currentColor;
}

#gear a {
    text-decoration: none;
    color: currentColor;
}
#SidebarBtn a {
    text-decoration: none;
    color: currentColor;
}

#SidebarBtn a:hover {
    color: darkgrey;
}

#gear a:hover {
    color: darkgrey;
}
#about {
	/*   width: 75%; */
	font-size: 1.2rem;
	margin: auto;
	line-height: 1.5rem;
	text-align: left;
	color: inherit;
}

#aboutTitle {
	font-size: 1.5rem;
	font-weight: bold;
	padding-bottom: 10px;
	color: inherit;
	text-align: center;
	font-family: 'nyt-karnakcondensed', sans-serif;
}

#aboutDescription {
	font-size: 1.2rem;
	line-height: 1.5rem;
	text-align: left;
	color: inherit;
	font-family: Arial, Helvetica, sans-serif;
}

/* jquery-modal hardcodes background:#fff on .modal, so without this the About
   panel stayed glaring white in dark mode. */
.dark-mode .modal {
	background-color: rgb(18, 18, 19);
	color: white;
}

.dark-mode .modal a {
	color: #8ab4f8;
}

#controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 20px auto;
	padding: 0 10px;
}

/* Keeps the row from jumping when the label swaps to "Copied!". */
#share,
#copytext {
	min-width: 140px;
}