body {
	background-color: #fff;
	margin:0;
}

#author-wrapper,#work-wrapper {
	display: grid;
	justify-content: space-around;
	padding-bottom: 30px;
	border-bottom: 1px solid #83bc19;
}

#author-wrapper {
	grid-template-columns:50% 50%;
}

#work-wrapper {
	grid-template-columns:100%;
}

#newsletter-wrapper, #beta-reader-wrapper {
	padding:0px 40px 0px 20px;
}



#beta-reader-wrapper {
	padding-bottom: 30px;
	border-bottom:1px solid #83bc19
}

p {
	font-size:24px;
	font-family: "M PLUS Rounded 1c", "Arial", sans-serif;
	font-weight: 500;
	margin-top:0;
}

.grecaptcha-badge {
	position: relative !important;
    bottom: 15px !important;
    left: 30px !important;
}

.main-header {
	position:fixed;
	width: 100%;
	top:0px;
	background-color: #fff;
	z-index: 100;
	display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 4px 0px;
	transition: border-bottom 1s;
}

.main-header h1 {
	display: inline;
	margin:0;
	font-family: "M PLUS Rounded 1c", "Arial", sans-serif;
	font-weight: 800;
	line-height: 1em;
	font-size:24px;
	color:#0D3434;
	display: block;
	transition: font-size 1s
}

.has-bottom-border {
	border-bottom:1px solid #2D5A5A;
}

.content-warnings {
	margin-top:0;
	margin-bottom:0;
}

#themes ul{
	list-style-image: url("img/ferm-19px.png");
}

#what-to-expect ul, #details>ul {
	list-style-image: url("img/ferm-19px.png");
}

#main-title {
	padding-left:15px;
	display: flex;
	align-items: center;
}

#mobile-menu-button {
	display:none;
	font-size:30px;
	color:#333;
	background-color:#fff;
	border:none;
}

#menu-links {
	background: #222;
	z-index: 50;
	position: fixed;
    top: -500px;
    right: 0;
	opacity: 0;
	transition: all 1.5s ease;
}

#menu-links.visible {
	top: 44px;;
	opacity: 1;
	transition: all .8s ease;
}

#menu-links a {
	color: white;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
	display: block;
	font-family: Arial, sans-serif;
}

img.avatar.circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin-right:10px;
	float:left;
	transition: width 1s;
}

#page-content {
	max-width: 900px;
	display: grid;
	row-gap: 1ch;
	margin:60px auto;
}

.item-header {
	font-family: Arial, sans-serif;
    text-transform: uppercase;
	font-size:24px;
}

.no-style {
	list-style-type: none;
	display:contents;
}

.detail-group {
	display: grid;
	justify-content: left;
	padding:20px 40px;
	align-content: flex-start;
}

.detail-group li {
	padding-left: 15px;
	margin-bottom:15px;
	font-size:19px;
}

#main-portrait {
	width:268px;
	height: 319px;
	background-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(255,255,255,0) 50%), url(img/cameo-portrait-268w.jpg);
}

#portrait {
	justify-content: center;
}

.header {
	text-align:center;
	margin: 10px 0px 5px 0px;
	font-family: "M PLUS Rounded 1c", "Arial", sans-serif;
	font-weight: 800;
	line-height: 1em;
	font-size:34px;
	color:#0D3434;
	grid-column-start: 1;
  	grid-column-end: -1;
	margin-bottom:20px;
}

.subscribe-button {
	font-weight: 800;
}

hr {
	width:100%;
	border: 1px solid #0D3434;
}

.grid{
	display: grid;
	place-items:  center;
	font-size: 25px;
}

#content {
  display: flex;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  max-width: 450px;
}
#about>p {
	font-size: x-large;
    font-family: "M PLUS Rounded 1c", "Arial", sans-serif;
	padding:0px 10px;
	line-height: 1.2em;
	font-weight: 500;
}
#about {
	padding:10px 15px;
	color:#333;
	text-align: center;
}




.links {
    font-family: "M PLUS Rounded 1c", Arial, sans-serif;
    font-size:30px;
	padding-right:40px;
	transition: font-size 1s;
}
.links a {
	text-align: center;
	margin:5px;
	color:#0D3434;
}

p.contact-info {
	text-align: center;
	clear:both;
	padding:10px 0px 0px 0px;
}
p.contact-info>a {
	color:#0D3434;
}
p.message {
	color: black;
    padding: 5px;
	font-size: 18px;
    padding: 10px;
}
p.message.error {
	background-color: #ffdddd;
}
p.message.success {
	background-color: #ddffdd;
}

.fa {
	padding: 20px;
	font-size: 30px;
	width: 30px;
	text-align: center;
	text-decoration: none;
	border-radius: 50%;
  }

@media (max-width: 768px) {
    body {
        height:100vh;
    }
}


@media only screen and (max-width:800px) {
	#author-wrapper,#work-wrapper {
		grid-template-columns: none;
	}

	#main-header h1 {
		font-size:20px;
		width:200px;
	}
	#page-content {
		padding: 0 10px;
	}

	.links {
		font-size:20px;
	}

	img.avatar.circle {
		width:25px;
		height:25px;
	}
}

@media only screen and (max-width:550px) {
	.links {
		display:none;
	}
	#mobile-menu-button {
		display:block;
	}
}

@media (prefers-color-scheme: dark) {
	body {
	  background-color: #222;
	  color: #dcdcdc;
	}
	.main-header {
		background-color: #222;
		color:#2D5A5A;
	}
	#main-title>h1 {
		color:#2D5A5A;
	}
	.links>div>a {
		color:#2D5A5A;
	}
	.header {
		color:#2D5A5A;
	}
	#author-wrapper,#work-wrapper,#beta-reader-wrapper {
		border-color: #83bc19;
	}
	#newsletter-submit, #beta-reader-submit {
		background-color: #2D5A5A;
		color:#eee;
	}
	#mobile-menu-button {
		color: #2D5A5A;
    	background-color: #222;
	}
	.has-bottom-border {
		border-bottom:1px solid #83bc19;
	}

  }

form {
	/* This bit sets up the horizontal layout */
	display:flex;
	flex-direction:row;
  }
  
  input {
	/* Tell the input to use all the available space */
	flex-grow:2;
	/* And hide the input's outline, so the form looks like the outline */
	border:solid 2px #0D3434;
	padding: 10px 0px 10px 5px;
	font-family: Tahoma, Arial, sans-serif;
	font-size: large;
  }
  
  button {
	/* Just a little styling to make it pretty */
	border:1px solid #0D3434;
	background:#0D3434;
	color:white;
  }

  ul {
	font-family: "M PLUS Rounded 1c", "Arial", sans-serif;
  }

  #mushroom-list {
	list-style-image: none !important;
	list-style-type: "\1F344";
	text-align: left;
	font-size: larger;
    font-family: "M PLUS Rounded 1c", "Arial", sans-serif;
  }