/*** Color definitions ***/
:root {
    --deep-purple: #874c98;
    --pale-purple: rgba(219, 199, 227, 0.85);
    --darker-purple: #4c115d;
    --alien-green: #83d496;
    --darker-green: #70b580;
    --gold: #a5937b;
    --font-border-width: 4px;
}

/*** Reset ***/
html, body, div, main, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, input, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

header {
    clear:both;
}

.hero {
  margin: auto auto 0;
  min-height: 20rem;
  width: 100%;
  position: relative;
  background-color: #dde5ea;
  background-repeat: no-repeat;
  background-position: 50% 35%;
  background-size: cover;
}
@media (max-width: 767px) {
	.hero {
		width: 105%;
	}
}

.hero__wrap {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -34%);
  text-align: left;
  /*color: rgba(255, 255, 255, 0.8);*/
  width: 62%;
  max-width: 90%;
  z-index: 1;
}

.hero__wrap hgroup {
  text-align: right;
}

.hero__wrap h2 {
	margin-right: 1rem;
}

.hero__meta a {
	padding-right: 0.8rem;
	background: var(--deep-purple);
}

body {
	line-height: 1;
}
ol, ul {
	list-style: bullet;
	display: flex;
	flex-wrap: wrap;
}

blockquote, q {
	quotes: none;
    font-family: 'Press Start 2P', cursive;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/*** Basics ***/
body {
	font-family: 'Akatab-Regular', Calibri, fantasy, serif;
 /* font size should be set by the browser, not our site */
	line-height: 1.7;
}

form, input, textarea {
    width:100%;
	padding: 0px;
    font-family: 'Akatab-Regular', Calibri, fantasy, serif;
}

p, pre { margin-bottom: 15px; }
pre { white-space: pre-wrap; }
ul, ol { padding: 0 0 18px 30px; }
ol li, ul li { margin-top: 10px; margin-bottom: 10px; }
em, i { font-style: italic; }
strong, b { font-weight: bold; }
small { font-size: 0.85em; }
sup { vertical-align: super; font-size: 0.85em; }
sub { vertical-align: sub; font-size: 0.85em; }

code {
    font: 0.85em Monaco, Courier, Monospace;
}

blockquote {
    margin: 22px 22px;
    padding: 0 20px;
    border-left: 2px solid #000000;
    font-size: 1.2em;
    font-style: italic;
    line-height: 1.5em;
}

acronym, abbr {
	cursor: help;
	letter-spacing: 1px;
	border-bottom: 1px dashed;
}


h1 {
	font-size: 4.2rem;
	font-family: 'Carter One', cursive;
	margin: 0 0 4px 0;
}
@media (max-width: 767px) {
	h1 {
		font-size: 3.5rem;
	}
}
h2 {
	font-size: 2rem;
	margin: 0 0 0.5rem 0;
}
h3 {
	font-size: 1.7rem;
	margin: 0 0 0.5rem 0;
}



/*** Useful Classes ***/
.clear { clear: both; }
.float-left { float: left; }
.float-right { float: right; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.img-left { float: left; margin: 4px 10px 4px 0; }
.img-right { float: right; margin: 4px 0 4px 10px; }
.img-middle { vertical-align: middle; }
.nopadding { padding: 0; }
.nounderline { text-decoration: underline; }



/*** Structure ***/
#page {
	width: 600px;
	margin: 0 auto;
	position: relative;
}

#header {
  width: 100%;
  margin: 0;
  text-align: right;
}
.hero__wrap {
	margin: 0px auto 3.5rem auto;
}
#header h1 a {
	border: none;
}

#footer {
	padding-top: 10px;
	padding-left: 1rem;
	font-size: 0.85em;
	border-top: 1px solid #073642;
}

#content {
	width: 100%;
	margin: 3.75rem auto;
}

#sidebar {
	position: absolute;
	text-align: right;
	width: 160px;
	top: 0;
	left: -240px;
}

#sidebar li {
	list-style: none;
    font-family: 'Cartor One', cursive;
	margin: 2px 0;
}

#sidebar a {
	border: none;
	font-family: 'Carter One', fantasy;
    font-size: 2.2em;
	padding: 2px 4px;
}

/** Linked accounts - typicall 'social' accounts
https://jekyllthemes.dev/personal-portfolio-to-play-with-jekyll-and-github-pages/
**/

.socials {
	display: flex;
	list-style: none;
}

ul.socials {
	justify-content: center;
	padding: 0px;
}

.socials li {
	margin: 5px;
	text-align: center;
}

.socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--alien-green);
	-webkit-transition: all 0.1s ease;
	padding: 0rem;
	border-width: 0rem;
}

.socials li a svg * {
    fill: var(--deep-purple);
}

.socials li:hover a:hover svg:hover * {
    fill: var(--gold);
    color: var(--gold);
}

a:hover {
    background-color: #839496;
    color: #000000;
}

a, a:active, a:visited {
	text-decoration: none;
	border-bottom: 1px solid #839496;
	padding-bottom: 2px;
}

div .horizontal-container {
    display: inline-block;
}

.mascot {
    /*align-content: left;*/
    float: left;
}

/*** Posts ***/
article {
	margin-top: 2rem;
}

article h1 {
	font-size: 20px;
	margin: 0 0 2rem 0;
}
article h1 a {
	border: none;
}
article h1 a.anchor {
	margin-left: 8px;
}

article img {
	display: block;
	text-align: center;
	margin: 0 auto 1em auto;
}

article .meta {
	padding-top: 6px;
	font-size: 0.85em;
	font-style: italic;
}

img.left {
	float: left;
	margin: 0 1em 1em 0;
}
img.right {
	float: right;
	margin: 0 0 1em 1em;
}
img.center {
	display: block;
	text-align: center;
	margin: 0 auto 1em auto;
}



/*** Pagination ***/
.postnavigation {
	padding-top: 10px;
    text-align: center;
    font-size: 0.85em;
}

.postnavigation .left {
	float: left;
}

.postnavigation .right {
	float: right;
}

.kw-alert {
	padding-left: 0px !important;
	padding-right: 0px !important;
}


/*** Media Queries ***/
@media all and (max-width: 870px) {
	#page {
		width: 100%;
	}

	#content {
		width: 95%;
		padding-left: 2.5%;
		padding-right: 2.5%;
		margin: 0px;
	}

	.hero__wrap {
		left: 57%;
		width: 100%;
	}

	#sidebar {
		position: relative;
		text-align: left;
		width: 80%;
		left: 0;
		margin: 10px 10px 20px 10px;
	}

	#sidebar nav select.mnav {
        display: block;
        margin-bottom: 15px; /* Margin is outside the border */
    }
    .mnav {
		background-color: var(--alien-green);
		color: var(--deep-purple);
        font-weight: bold;
        font-size: 1rem;
	}

}


@font-face {
	font-family: 'Akatab-Regular';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/Akatab-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Carter One';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/carter_one_latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  /*font-weight: 400;*/
  src: url('../fonts/press_start_2p_latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.intl-tel-input {
    width: 100%; /* ensure consistency with other input forms */
}