@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&family=Roboto+Slab&display=swap');


/* Varaibles */
:root {
  --background-color: #0b1021;
  --link-color: #00CCB4;
  --header-border-color: #00CCB4;
  --header-author-name: #00CCB4;
  --header-listed-name: #00CCB4;
  --wordcount-color: #00CCB4;
  --body-text-color: #d8d8d8;
  --sn-stylekit-foreground-color: #00CCB4;
  --post-code-background-color: #141b33;
  --post-code-border-color: #00ccb438;
  --page-menu-link-color: #00CCB4;
  --more-posts-post-background-color: #060913;
  --callout-info-border-color: #00CCB4;
}

/* Basics */
body, div, p, span, a {
	font-family: 'Roboto Mono', monospace;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5 {
	font-family: 'Roboto Slab', serif;
}
h1, h1 a { font-size: 2.5rem; }
h2, .post-content .post-body h2 { font-size: 1.6rem; }
h3, .post-content .post-body h3 { font-size: 1.3rem; }

blockquote {
	border-left: 2px solid #00CCB4;
	border-radius: 3px;
	background: #ffffff0d;
  	padding-left: 1rem;
}

.page-header__container {
	padding: 1rem 0;
}

#page-header {
	max-width: 1200px;
    margin: 0 auto;
  	padding: 0;
}

#footer {
	background: #060913;
}

#footer .footer__container {
    padding: 0.5rem 0 0 0;
}
.button svg path { /* Burger menu icon */
	fill: #00CCB4;
}

.footer--blog-page {
	background: #060913;
    box-shadow: 0 1px 3px 3px #000000c4;
}

.scroll-to-top__container {
	background: #00CCB4;
}

ul {
    list-style: square;
  	margin-top: 0;
}

ul li {
	margin: 0;
	line-height: normal;
}
/*.post-content .post-body p:not(:last-child) {
	margin: 1rem 0 0 0;
}*/

svg path {
	fill: #00CCB4;
}

/* Home Page */

.page-header__container {
    background: #060913;
}

#author-profile {
	background: #0b1021;
  	padding: 0 4vw;
  	max-width: 1200px;
    margin: 0 auto;
}

#author-posts .author-post {
	background: #060913;
  	height: 10rem;
	box-shadow: 1px 1px 2px #000000cf;
  	transition: box-shadow 250ms;
  	border-color: #ffffff1a;
  	overflow: hidden;
}
#author-posts .author-post:hover,
#author-posts .author-post:focus {
	box-shadow: 1px 1px 6px #00ccb4;
}

@media screen and (max-width: 992px) {
	#author-posts .author-post {
  		height: auto;
	}
}

#author-posts .post-title {
	font-size: 1.2rem;
  	line-height: 1.8rem;
}

.header-author-info {
	display: none;
}

#author-profile .older {
	padding: 1rem 0;
}

.post-preview .read-more-link {
	display: none;
}

/* Post Page */

.single-post-show {
  background: #060913 !important;
  padding-top: 0.5rem;
}

.single-post-show .post-content {
  background: #0b1021;
  border-radius: 10px;
  border: 7px solid #141b33;
  padding: 1% 5%;
  max-width: 1200px;
  margin: 1rem auto;
  box-shadow: 1px 2px 4px 2px #000000cf;
}

.page-header__container--post {
	background: #060913;
}

.single-post-show, #single-post-footer {
	background: #0b1021;
	border-top: 1px solid #00CCB4;
}

h3.more-from .headline-separator {
	display: none;
}

@media (min-width: 992px) {
  .single-post-show {
      padding: 0 8vw 56px;
  }
}

.callout, .card {
	background: #060913;
  	color: #d8d8d8;
    box-shadow: 1px 2px 4px #000000cf;
}

/* Code Highlighting */
pre.highlight {
	background: #141b33;
}
code.prettyprint {
	background: #141b33 !important;
  	border-color: #00ccb438 !important;
}

.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf { color: #626483; }
.highlight .s, .highlight .s1, .highlight .sx { color: #00f769; }
.highlight .nb, .highlight .nx, .highlight .nc { color: #ea51b2; }
.highlight .kd, .highlight .ni { color: #b45bcf; }
.highlight .o, .highlight .m { color: #b45bcf; }
.highlight .nl, .highlight .na { color: #62d6e8; }
.highlight .k { color: #62d6e8; }
.highlight .nt { color: #b45bcf; }
.highlight .nv { color: #a1efe4; }
.highlight .err { color: #ff0073; background: #262e4c; }


input.text-field {
	background: #141b33;
  	color: #fff;
}

/* Post Page Mobile Adjustments */
@media screen and (max-width: 992px) {
	.single-post-show .post-content {
  		border: 0;
    	border-radius: 3px;
    	padding: 1rem;
	}
}

/* Scroll to top arrow */
.button.scroll-to-top__button {
	background: #00CCB4;
  	opacity: 0.8;
}
.button.scroll-to-top__button:hover {
  	opacity: 1;
}
.scroll-to-top__container {
	background: #141b33 !important;
}
.scroll-to-top__icon path {
	fill: #00CCB4 !important;
}

/* Horizontal Rule */
hr {
  	height: 0;
  	padding: 0;
  	margin: 1.5rem 0;
	border-bottom: 1px dashed #12cdd757 !important;
}
hr::before {
	content: none;
}

/* Thank Page */
.callout--success {
	border-left: 3px solid #00CCB4;
}

/* Guestbook Page */
.button--primary {
	background-image: linear-gradient(0deg, #9660ec 50%,var(--page-menu-link-color) 0);
}


/* Form Elements */
textarea.text-field:focus, input.text-field:focus  {
	border: 1px solid #00CCB4;
	outline: none;
	box-shadow: 1px 1px 6px #00ccb4;
}

textarea.text-field, input.text-field {
	background: #141b33;
}

.button--disabled {
	background: #272f4d;
  	cursor: not-allowed;
  	color: #d8d8d899;
}

/* Author Settings */
.my-posts__item,
a.my-posts__post,
.p3.post__details,
.resources__link,
.payment-details__credential,
.entry-details__item,
.entry__details--private strong {
	color: #d8d8d8 !important;
}
textarea#author-bio, button.button--no-fill {
	background: #141b33;
  	color: #d8d8d8 !important;
}
button.button--active {
	background: #00CCB4;
  	color: #060913 !important;
}

button.button--no-fill svg path {
	fill: #00CCB4 !important;
}
button.button--active svg path {
	fill: #0b1021 !important;
}


.my-posts__item a.my-posts__post .post__details .post-details__icon g path {
	fill: #00CCB4;
}
.hover-content .hover-content__icon-container {
	background: #00CCB4;
}

#resources .resources__list li, .my-posts__item {
	border-bottom: 1px dashed #12cdd757;
}

.error-message {
	color: #f80363;
}

li.section__container {
	box-shadow: 2px 2px 4px #000;
}

/* All Posts Page */
#author-all #author-posts {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
}

#author-all #author-posts .author-post {
  height: auto;
  padding: 1rem;
  margin: 0.5rem auto;
}

/* Text Highlight */
::selection {
    background-color: #00ccb4;
    color: #0b1021;
}