dbpc/style.css

/* 

Daily Blackout Poetry Challenge

style.css

license GPLv3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
Code repository: https://code.jacobhaddon.com/jake/dbpc
Written by Jacob Haddon https://jacobhaddon.com

 */

@font-face {
	font-family: "lora";
	src:	url("fonts/Lora/webfonts/Lora-Regular.woff2")   format('woff2'),
			url("fonts/Lora/variable/Lora-VariableFont_wght.ttf")  format('truetype');
	font-style: normal;
	font-weight: normal;
}

@font-face {
	font-family: "lora";
	src:	url("fonts/Lora/webfonts/Lora-Italic.woff2")   format('woff2'),
			url("fonts/Lora/variable/Lora-Italic-VariableFont_wght.ttf")format('truetype');
	font-style: italic;
	font-weight: normal;
}

body {
	margin: 40px auto;
	max-width: 750px;
	font: 18px/1.6 lora, Baskerville, TimesNewRoman, Times New Roman, Times, Georgia, serif;
	padding: 0 10px:
	word-break: break-word;
}

a {
	text-decoration: none;
	color: RebeccaPurple;
}

a:hover {
	text-decoration: underline;
}

.purple {
	color: RebeccaPurple;
}

.help {
	display: none;
}

/* Styles for the help section of the site */

#help {
	background-color: black;
	color: white;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
}

#help a {
	color: white;
}

.helpwords {
	margin: 40px auto;
	max-width: 650px;
}

/* styles for the 'page */

#spina {
	max-width: 100%;
	margin: 0;
	padding: 10%;
	border-style: solid;
	border-width: 1px;
}

#byline {
	font: italic 14px/1.1 lora, Baskerville, TimesNewRoman, Times New Roman, Times, Georgia, serif;
	padding: 0 25px 25px 25px;
}

#poem_list {
	min-height: 75px;
	border: 2px solid RebeccaPurple;
	padding: 50px 5% 5%;
}

#copy_buttons {
	float: right;
}

.click {
	background-color: Plum;
}

/* Styles for the buttons */

/* all buttons have this */
.btn {
	-webkit-appearance: none;
	appearance: none;
	font: 18px lora, Baskerville, TimesNewRoman, Times New Roman, Times, Georgia, serif;
	padding: 8px;
	border-style: none;
	-webkit-appearance: none;
}

.btn-mn {
	background-color: RebeccaPurple;
	color: #ffffff;
}

.btn-mn:hover {
	background-color: black;
	color: white;
}

.btn-hlp-bx {
	position: fixed;
	top: 40px;
	right: 10%;
	z-index: 10;
	float: right;
}

.btn-hlp {
	background-color: white;
}

.btn-hlp:hover {
	background-color: silver;
}

/* Styles for the blacked-out page */

.clickDone {
	background-color: white;
	padding: 2px;
	color: black;
}

.done {
	background-color: black;
	/*border: 10px solid black;*/
}