@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

body {
	background-color: #181414;
	color: #ddd;
	font-size: 1.2rem;
}

main {
	margin: 2em;
}

h1 {
	font-family: "Parkinsans", sans-serif;
	font-optical-sizing: auto;
	background: #f79f5c;
	background: linear-gradient(103deg, rgb(230, 52, 52) 0%, rgb(131, 58, 180) 10%, rgb(249, 186, 37) 25%);
	background-clip: text;
	color: #fff0;
	text-shadow: 1px 1px 50px #f147ffa3;
	font-size: 2.5rem;
}

.story-title {
	font-size: 1.3rem;
	font-family: "Parkinsans", sans-serif;
	font-optical-sizing: auto;
}

.story-title::before {
	font: var(--fa-font-solid);
	content: "\f518";
	margin: 1em;
}

.censored {
  background: black;
  color: black;
  border: 1px solid #2b2b2b;
}

form label{
	display: block;
	margin: 1em;
	font-family: "Parkinsans", sans-serif;
	font-optical-sizing: auto;
	}
	
form label input {
	display: block;
	margin-top: 0.5em;
	width: 30rem;
	max-width: 100%;
	background-color: #e8e8e8;
	border-radius: 10px;
	padding: 5px;
	color: black;
}

.complete {
	color: green;
	border-color: green;
}

.hide {
	display: none;
}

input[type="Submit"] {
	margin-left: 2.5em;
	margin-top: 1em;
	padding: 10px;
	border-radius: 10px;
	font-size: 1rem;
}

.story {
	font-family: "Nunito", sans-serif;
	font-optical-sizing: auto;
	margin: 1em;
}

.story span {
	font-weight: bold;
	color: #b4ff8a;
}

.story span.a-an {
	font-weight: normal;
	color: unset;
}

div.story.pharma span.adj1, div.story.pharma span.job1, div.story.pharma span.group1, div.story.pharma span.verbing2, div.story span.exc1, div.story.delphi span.prop-noun1, span.start {
	text-transform: capitalize;
}

a.reload {
	display: inline-block;
	margin: auto;
	margin-top: 1em;
	padding: 15px;
	background: #8c1d8c;
	color: white;
	border-radius: 15px;
	text-decoration: none;
}

a.reload:hover {
	background: #5c5151;
}

.blank-error {
	margin-left: 1em;
	color: #ffcece;
}

@media screen and (max-width: 768px) {
	main {
		margin: 0;
	}
	h1 {
		background: linear-gradient(103deg, rgb(230, 52, 52) 0%, rgb(131, 58, 180) 50%, rgb(249, 186, 37) 100%);
		background-clip: text;
		text-align: center;
	}
}