/*
 * Pizza Theme CSS
 * Author: Presto Bunny
 * Version: 1.0.0
 * License MIT License
 */

/* minireset.css © 2016 Jeremy Thomas under MIT License */

html, body, div, 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, 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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.6em;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
button {
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr {
	border: 0;
	border-top: 2px dashed #ffc0fd;
	overflow: visible;
	padding: 0;
	text-align: center;
}

hr::after {
	background: #ffdbf0;
	color: #ffc0fd;
	content: '\2665';
	display: inline-block;
	font-size: 2em;
	padding: .3em;
	position: relative;
	top: -29px;
}


/* Font Declarations */

@font-face {
	font-family: Halogen;
	src: url("../fonts/halogen.woff") format("woff");
}


@font-face {
	font-family: "SP Aftershock";
	src: url("../fonts/sp-aftershock.woff") format("woff");
}

@font-face {
	font-family: "Futura";
	src: url("../fonts/futura.woff") format("woff");
	src: url("../fonts/futura.woff2") format("woff2");
}


/* Helper Classes */

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.flex-1 {
	flex: 1;
}

.flex-acenter {
	align-items: center;
}

.flex-aend {
	align-items: flex-end;
}

.flex-jcenter {
	justify-content: center;
}

.flex-jbetween {
	justify-content: space-between
}

.flex-jaround {
	justify-content: space-around
}

.flex-o1 {
	order: 1;
}

.flex-o2 {
	order: 2;
}

.flex-img {
	-ms-grid-row-align: center;
	align-self: center; /* Fix for image stretching */
}

.screenreader {
	height:1px;
	left:-10000px;
	overflow:hidden;
	position:absolute;
	top:auto;
	width:1px;
}

.screenreader-skip:focus {
	background: white;
	border: 2px dashed #1dcca2;
	left: 0;
	height: initial;
	padding: 1em;
	width: initial;
	z-index: 99;
}


/* Body */

.site__main {
	background: #ffdbf0;
	padding: 36px;
}

.site__main a:hover,
.site__main a:focus {
	background: #f5ff95;
}

.page-regular,
.page-fullwidth .main__content {
	margin: 0 auto;
}

.page-regular {
	max-width: 800px;
}

.page-fullwidth .main__content {
	max-width: 1000px;
}

.hero {
	background-size: cover;
	background-position: center;
	overflow: hidden;
	width: calc(100% + 72px);
}

.hero-top {
	margin: -36px -36px 36px;
	min-height: 500px;
	position: relative;
}

.hero-middle {
	margin: 0 -36px;
}

.cta {
	position: absolute;
	text-align: center;
}

.cta__title {
	color: white;
	font-family: Futura, Helvetica, Calibri, sans-serif;
	font-size: 3rem;
	text-transform: uppercase;
}

.cta__button {
	background: #b80aab;
	background: linear-gradient(to bottom, #ea4fa6 0%,#c8167a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea4fa6', endColorstr='#c8167a',GradientType=0 );
	border-radius: .3em;
	box-shadow: 0px 5px 0 #a6137a;
	color: white;
	display: inline-block;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	line-height: 1em;
	margin: 1rem 0;
	padding: .3em .5em;
	font-size: 1.5em;
}

.cta__button:hover,
.cta__button:focus {
	background: linear-gradient(to bottom, #f078e7 0%,#bd22b7 100%) !important;
}

.cta__button-disabled {
	background: #8d7df8b8;
	box-shadow: none;
	color: #221f3699;
}

/* Header/Footer */
.site__footer,
.site__header {
	background: #6953ff;
	color: white;
	z-index: 1;
}

.site__header a,
.footer__bottom a {
	color: white;
	text-decoration: none;
}

.footer__bottom a:hover,
.footer__bottom a:focus {
	color: #ecf291;
}

.footer__bottom a:focus {
	border-bottom: 2px dashed #ecf291;
	outline: 0;
}

.navbar__logo {
	background: #806dff;
	left: 50%;
	margin: 0 0 0 -100px;
	padding: 6px 3px 0;
	position: absolute;
	z-index: 2;
}

.navbar__logo::after,
.navbar__logo::before {
	border-top: 53px solid #806dff;
	content: "";
	height: 0;
	position: absolute;
	top: 0;
	width: 0;
}

.navbar__logo::after {
	border-right: 15px solid transparent;
	left: 100%;
}

.navbar__logo::before {
	border-left: 15px solid transparent;
	right: 100%;
}

.navbar {
	font-size: 1.3rem;
}

.navbar-main__button {
	padding: .5em .5em .1em;
}

.navbar-main__svg:hover,
.navbar-main__svg:focus {
	fill: yellow;
}

.navbar__link {
	transition: .2s ease all;
}

.navbar__link {
	cursor: pointer;
	font-weight: bold;
}

.navbar__link:hover,
.navbar__link:focus {
	background: #7460ff;
	outline: 0 !important;
}

.navbar__link-active {
	background: #4d38df;
	color: #818dff;
}

.navbar__blank {
	width: 210px;
}

.header__buy {
	background: #604ce8;
	display: none;
	padding: 2em 1em 1em;
}

.header__buy div {
	text-align: center;
}

.buy__option a {
	display: inline-block;
}

.buy__option + .buy__option {
	margin-left: 1em;
}

.nav-buy {
	display: inline-block;
	line-height: 3;
	margin: 1rem 0 2rem;
}

.buy__button {
	border-radius: .5rem;
	padding: 1rem;
}

.buy__button:not(:last-child) {
	margin-right: 1rem;
}

.buy__button-primary {
	background: #9373ee;
	color: white;
	font-size: 1.5rem;
}

a.buy__button-steam:hover,
a.buy__button-steam:focus {
	background: #2c2e35;
}

.buy__button-secondary {
	border: 1px solid #9373ee;
	color: #9373ee;
	font-size: 1.3rem;
}

a.buy__button-itch:hover,
a.buy__button-itch:focus {
	background: #fa5c5c;
	color: white;
}

a.buy__button-gj:hover,
a.buy__button-gj:focus {
	background: #ccff00;
	color: #1f1f1f;
}

.buy__os {
	margin: 1rem 0;
}

.buy__os img {
	height: 32px;
	margin-right: .5rem;
	width: 32px;
}

.footer__widgets {
	background: #f791cc;
}

.footer__twitter {
	color: #312a64;
}

.footer__twitter-profile {
	flex: .3;
}

.footer__twitter a:hover,
.footer__twitter a:focus {
	background: pink;
	outline: 0;
}

.profile__img {
	border: 1px solid black;
	border-radius: 50%;
	flex: 0 0 auto;
	margin: 0 .5rem 1rem 0;
}

.profile__name {
	font-size: 1.5rem;
}

.profile__bio {
	margin: 1rem 0;
	font-weight: bold;
}

a.profile__button {
	background: #1da1f2;
	border-radius: 36px;
	color: white;
	padding: 10px 20px 7px;
}

a.profile__button:focus,
a.profile__button:hover {
	background: #4bbbff;
	color: white;
}

a.tweet__icon:focus,
a.tweet__icon:hover {
	fill: #4bbbff;
}

.footer__twitter-tweet {
	background: #fff;
	border: 2px solid #c634a8;
	border-radius: 10px;
	color: #000;
	padding: 1rem;
	margin-left: 1rem;
}

.footer__twitter-tweet.tweet-retweeted {
	background: #e1f5ee;
	border-color: #aee4d5;
}

.tweet__icon {
	float: right;
}

.tweet__content {
	font-size: 1.2rem;
	margin: 1rem 0;
}

.tweet__content img {
	margin-top: .5em;
}

.tweet__original {
	background: #fffaef;
	border-radius: .2em;
	margin-top: .4em;
	padding: .1em .3em;
}

.profile__meta,
.tweet__meta {
	font-size: 1rem;
}

.tweet__meta {
	color: #a5a097;
}

.site__footer svg {
	margin-bottom: .2em;
	vertical-align: middle
}

.footer__twitter,
.footer__bottom {
	margin: 0 auto;
	max-width: 1200px;
	padding: 1em;
}

.nav__item {
	display: inline;
}

.nav__item:not(:last-child)::after {
	content: '|';
	margin: 0 .3em;
}

.footer__email {
	text-align: right;
}

.form-email {
	margin-bottom: 18px;
}

.form-email p {
	margin-bottom: 1em;
}

.form-email__submit {
	background: purple;
	border: 2px dashed #8a098a;
	border-left: 0;
	border-radius: 0 .3em .3em 0;
	color: white;
	cursor: pointer;
	font-family: Montserrat, Futura, "Segoe UI", Calibri, Arial, sans-serif;
	padding: 0 1em .2em;
	transition: .2s ease all;
}

.form-email__submit:hover,
.form-email__submit:focus {
	background: #a943a9;
}

#form-email__input {
	border: 2px dashed #ff98ff;
	border-radius: .3em 0 0 .3em;
	border-right: 0;
	font-family: Montserrat, Futura, "Segoe UI", Calibri, Arial, sans-serif;
	padding: 1em;
	transition: .2s ease all;
}

#form-email__input:focus {
	box-shadow: inset 2px 3px 1px grey;
	outline: 0;
}

.faq__circle {
	background: #644fff;
	border-radius: 50%;
	padding: .1rem .4rem .1rem .37rem;
	text-align: center;
	color: white;
	font-size: 1rem;
}

a.press__button {
	background: #493bb0;
	border-radius: .3rem;
	color: white;
	display: inline-block;
	margin-bottom: 1rem;
	padding: .5rem 1rem;
	text-align: right;
}

a.press__button:hover,
a.press__button:focus {
	background: #6450f4;
}

/* Typography */
body {
	color: #463034;
	font-family: Calibri;
	font-size: 1.2rem;
	min-height: 99vh;
}

a {
	color: #b55bff;
	font-weight: bold;
	text-decoration: none;
	transition: .2s ease all;
}

ins {
	text-decoration: none;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

h1 {
	color: #6953ff;
	font-family: "SP Aftershock";
	font-size: 4rem;
	line-height: 1;
	margin: 1rem 0;
}

h2 {
	color: #877ee5;
	font-family: "SP Aftershock";
	font-size: 2.5rem;
	line-height: 1;
	margin: 1rem 0;
}

h3 {
	font-family: Futura, Helvetica, Calibri, sans-serif;;
	font-size: 1.2rem;
	text-transform: uppercase;
}

.site__main p,
.site__main ul,
.site__main ol {
	margin-bottom: 1em;
}

.site__main ul li {
	list-style: disc;
	margin-left: 2em;
}

.footer__twitter__title {
	font-size: 2.7rem;
}


/* Media */

img {
	max-width: 100%;
}

video {
	margin-bottom: 1rem;
	max-width: 89vw;
}

*[data-lightbox],
.slick-active {
	cursor: pointer;
}

.lity-active {
	overflow: hidden;
}

.lity__caption {
	color: white;
	margin: 1rem 0;
}
.slick-arrow {
	font-size: 2em;
}

.slick-arrow:hover,
.slick-arrow:focus,
.slick-arrow:active {
	color: #f5ff95;
	outline: 0;
	text-shadow: 2px 2px 0px #6953ff;
}

.slick-slide:focus {
	border-bottom: 4px dashed #ecf291;
	outline: 0;
}

.sidebar-gallery__carousel {
	width: 750px;
}

.sidebar-gallery img {
	height: 250px;
	-o-object-fit: cover;
	   object-fit: cover;
	width: 250px;
}

.sidebar-discord {
	height: 300px;
	margin: 0 -36px -36px;
}

.content__row {
	margin: 0 auto;
	padding: 2rem 0;
	max-width: 1200px;
	width: 90vw;
}

.row-dark {
	color: white;
}

.row-dark h1 {
	color: pink;
}


/* Media Queries */

@media screen and (min-width: 1001px) {

	.content__row div:first-child {
		margin-right: 1em;
	}

	.content__row__content {
		width: 54%;
	}

	.content__row__img {
		width: 40%;
	}

	.content__buy .content__row__content {
		text-align: right;
	}

	.footer__twitter,
	.sidebar-gallery,
	.footer__bottom {
		padding: 1em 6em 2em;
	}
}

@media screen and (min-width: 701px) {
	.navbar__hamburger {
		display: none;
	}

	.navbar {
		height: 40px;
	}

	.navbar ul {
		display: table;
	}

	.navbar__item,
	.navbar__link {
		display: table-cell;
		height: 40px;
		vertical-align: middle;
	}

	.navbar__link {
		padding: 0 1em;
	}

	.header__buy {
		left: 0;
		position: absolute;
		top: 40px;
		width: 100%
	}

	.char__image:first-child {
		margin-right: 1em;
	}

	.char__image {
		flex: 0 0 auto;
	}
}

@media screen and (min-width: 501px) {
	.hero {
		background-attachment: fixed;
	}
}

@media screen and (max-width: 1000px) {
	.lity-image img {
		max-width: 100% !important;
	}

	.content__buy .content__row__content,
	.content__buy .content__row__img {
		text-align: center;
	}
}

@media screen and (max-width: 880px) {
	.flex-wrap-md {
		flex-wrap: wrap;
	}

	.flex-jcenter-md {
		justify-content: center;
	}

	.stop-flex-md {
		display: block;
	}

	.stop-padding-md {
		padding: 1rem;
	}

	#navbar-main {
		background: #5742e8;
		display: none;
	}

	.navbar__item {
		display: block;
	}

	.navbar__link {
		display: block;
		padding: .5rem 1rem;
		text-align: left;
		width: 100%;
	}

	.header__buy {
		padding: 0;
	}

	.hero-top {
		margin: -16px -36px 0;
	}

	.sidebar-discord {
		margin: 0 -20px -36px;
		max-width: 110%;
	}

	.footer__copyright {
		order: 2;
	}

	.footer__email {
		order: 1;
	}

	.footer__email p,
	.footer__email h2 {
		text-align: center;
	}

	.footer__twitter-profile,
	.footer__twitter-tweet {
		margin: 10px 0;
	}

	.cta {
		padding: 0 20px;
	}

	.cta__button {
		font-size: 5vw;
	}
}

@media screen and (max-width: 545px) {
	.buy__option,
	.buy__option a {
		width: 100%;
	}
	.buy__option + .buy__option {
		margin: 0;
	}
}