::-webkit-scrollbar {
    background-color: darkgray;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar {
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background-color: #888;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}
::-webkit-scrollbar-corner {
    background-color: #ccc;
}


body {
  background-color: black;
  color: silver;
  font-family: sans-serif;
  margin: 0;
}

textarea {
	background: floralwhite;
	font-size:20px;
	font-weight: bold;
	padding: 10px;
	border-radius: 12px;
	width:100%;
}

input{
	background: floralwhite;
	font-size:15px;
	padding: 5px;
	border-radius: 12px;
	padding: 10px;
	margin:1em;
}
h2 {
	font-family: cursive, serif;
}
button {
	cursor:pointer;
	padding: 10px;
	font-size:16px;
	background-color: darkgreen;
	color:ghostwhite;
	border-radius:12px;
	margin: 1em;
}

.container {
  width: 85%;
  margin: 0 auto;
  text-align:center;
  padding: 15px;
  box-sizing:border-box;
}
.helpHint {
	padding:0.2em 0.3em;
	border-radius:0.5em;
	background-color:darkgreen
}
.wordDisplay {
	font-size:16px;
	font-weight:bold;
	width: 90%;
    margin: 0 auto;
}
#metaInfo {
	width: 80%;
	margin: 0 auto;
	line-height:1.5em;
	display:none;
}
#flow {
	padding:10px;
	border: 2px solid greenyellow;
	border-radius: 14px;
	max-height: 200px;
	min-height:50px;
	overflow:auto;
}
#flow p {
	font-size: 14px;
	text-align: left;
    margin-bottom: 1em;
}
#last-word-stress, .stressed {
	color:deeppink;
}
#last-word, .rhymed {
	color: greenyellow;
}
#last-word-random {
	color: red;
}
#last-word-alliteration, .allitered {
	color: cyan;
}
#last-word-syn, .synned{
	color:darkgoldenrod;
}
#defsP {
	display:none;
	font-size:14px;
}
#showHelp {
	position:absolute;
	left:5px;
	top:5px;
	font-size:1.2em;
	padding:0.4em 0.6em;
	border-radius:0.6em;
	background-color:darkgreen;
	cursor:pointer;
}

@media (min-width: 600px) {
  .container {
    width: 50%;
	margin: 0 auto;
  }
  #metaInfo {
	  display: block;
  }
}

@media (max-width: 1200px) {
	.container {
		padding: 30px;
		width: 65%;
	}
	#metaInfo p {
		text-align:justify;
	}
}