/* common */
@font-face {
  font-family: 'Fira Mono';
  font-style: normal;
  font-weight: 500;
  font-display: auto;
  src: url('../fonts/fira.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/fira') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/fira.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/fira.woff') format('woff'), /* Modern Browsers */
       url('../fonts/fira.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/fira.svg#FiraMono') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Amatic SC';
  font-style: normal;
  font-weight: 700;
  font-display: auto;
  src: url('../fonts/amatic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/amatic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/amatic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/amatic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/amatic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/amatic.svg#AmaticSC') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'PT Sans Narrow';
  font-style: normal;
  font-weight: 700;
  font-display: auto;
  src: url('../fonts/narrow.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/narrow.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/narrow.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/narrow.woff') format('woff'), /* Modern Browsers */
       url('../fonts/narrow.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/narrow.svg#PTSansNarrow') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Classical';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/Classical Bold.otf') format('opentype'),
       url('../fonts/Classical Bold.ttf') format('truetype'),
       url('../fonts/Classical Bold.woff2') format('woff2'), 
       url('../fonts/Classical Bold.woff') format('woff');
}
@font-face {
  font-family: 'Because';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('../fonts/because.otf') format('opentype'),
       url('../fonts/because.ttf') format('truetype'),
       url('../fonts/because.svg') format('svg');
}
@font-face {
	font-family: 'OpenSans';
	font-style: normal;
	font-weight: normal; 
	src: url('../fonts/OpenSans.ttf') format('truetype');
}
@font-face {
	font-family: 'Capture';
	font-style: normal;
	font-weight: normal; 
	src: url('../fonts/Capture_it.ttf') format('truetype');
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: normal; 
	src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'YanoneKaffeesatz';
	font-style: normal;
	font-weight: normal; 
	src: url('../fonts/YanoneKaffeesatz.ttf') format('truetype');
}
@font-face {
	font-family: 'Kartoon';
	font-style: normal;
	font-weight: normal; 
	src: url('../fonts/karton.otf') format('opentype');
}
@font-face {
	font-family: 'BadScript';
	font-style: normal;
	font-weight: normal; 
	src: url('../fonts/BadScript-Regular.ttf') format('truetype');
}
:root {
	--chief: #E4E0DD;
	--black: #4b4e4a;
	--paleblack: #b3b3b3;
	--grey: #e7e7e7;
	--mint: #598986;
	--brightgreen: #86D5B0;
	--green: #b3e4cd;
	--white: #F7F9F9;
	--palegreen: #EAF2EF;
	--melon: #F5B29F;
	--honeydew: #E5F4E3;
	--red: #EB6B47;
	--orange: #f8b93a;
	--serif: sans-serif;
	--fira: 'Fira Mono', monospace;
	--narrow: 'PT Sans Narrow', sans-serif;
	--amatic: 'Amatic SC', cursive;
	--sans: 'OpenSans';
	--capture: 'Capture';
	--oswald: 'Oswald';
	--yanone: 'YanoneKaffeesatz';
	--kartoon: 'Kartoon';
	--because: 'Because';
	--classical: 'Classical';
	--badscript: 'BadScript';
	--1vh: 1vh;
	--scrollwidth: 15px;
	--transfunc: cubic-bezier(0.215, 0.61, 0.355, 1);
    --rainbow: repeating-linear-gradient(
        100deg,
        #EAF2EF 10%,
        #b3e4cd 20%,
        #EAF2EF 30%,
        #b3e4cd 40%,
        #EAF2EF 50%
    );
	--gradient: radial-gradient(circle, var(--brightgreen) 0%, var(--mint) 100%);
}
::selection {
    color: #fff;
    background: var(--chief)
}
::-moz-selection {
    color: #fff;
    background: var(--chief)
}
::-webkit-scrollbar {
	width: var(--scrollwidth);
    height: var(--scrollwidth);
}
::-webkit-scrollbar-thumb {
	min-height: calc(var(--scrollwidth) * 2);
    min-width: calc(var(--scrollwidth) * 2);
    background-color: var(--grey);
    background-clip: content-box;
    border: 5px solid transparent;
	border-radius: 5px;
}
*,
*:after,
*:before {
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    user-select: none;
}
html {
    font-size: 62.5%;
}
a, input, button, select, textarea {
    appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
	outline: none;
}
input, button, select, textarea{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
ul, ol {
    list-style: none;
	padding-left: 0;
}
textarea {
    resize: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
a {
    vertical-align: baseline;
    margin: 0;
    padding: 0;
    font-size: 100%;
    color: inherit;
    background: rgba(0, 0, 0, 0)
}
button {
    padding: 0;
    background: inherit;
    border: inherit;
    text-transform: inherit;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
    touch-action: manipulation;
    cursor: pointer;
}
body {
	line-height: 1;
	overflow: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-size: calc(var(--fsize) * 1.8);
	word-break: break-word;
    height: var(--vh, 100vh);
	margin: 0;
	background: var(--chief);
	font-family: var(--serif);
	--offset: 6rem;
	--indent: 40%;
	--fsize: 1rem;
	--btnsize: 4rem;
	--maph: min(350px, calc(100vh - var(--offset)*4));
}
.fill {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.fit {
    width: 100%;
    height: 100%;
}
.flex__center {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.flex__stretch__row {
	display: flex;
    flex-direction: row;
    align-items: stretch;
}
.visible {
	opacity: 1;
	visibility: visible;
}
.invisible {
	opacity: 0;
	visibility: hidden;
	display: none;
}
/* Loader */
.loading::before,
.loading::after {
    content: '';
    position: fixed;
    z-index: 1000;
}
.loading::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--palegreen);
}
.loading::after {
    top: 50%;
    left: 50%;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	transform: translate(-4.375em);
	box-shadow: 1.375em 0em var(--brightgreen), 1.375em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.29721em var(--orange), 2.75em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.18368em var(--palegreen), 4.125em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.18368em var(--red), 5.5em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.29721em var(--mint), 6.875em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
	animation: snake 2s linear infinite;
}
@keyframes snake {
	0% {
		box-shadow: 1.375em 0em var(--brightgreen), 1.375em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.29721em var(--orange), 2.75em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.18368em var(--palegreen), 4.125em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.18368em var(--red), 5.5em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.29721em var(--mint), 6.875em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
	}
	20% {
		box-shadow: 1.375em 0.29721em var(--orange), 1.375em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.18368em var(--palegreen), 2.75em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em -0.18368em var(--red), 4.125em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.29721em var(--mint), 5.5em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em 0em var(--brightgreen), 6.875em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
	}
	40% {
		box-shadow: 1.375em 0.18368em var(--palegreen), 1.375em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em -0.18368em var(--red), 2.75em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em -0.29721em var(--mint), 4.125em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em 0em var(--brightgreen), 5.5em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em 0.29721em var(--orange), 6.875em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
	}
	60% {
		box-shadow: 1.375em -0.18368em var(--red), 1.375em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em -0.29721em var(--mint), 2.75em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0em var(--brightgreen), 4.125em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em 0.29721em var(--orange), 5.5em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em 0.18368em var(--palegreen), 6.875em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
	}
	80% {
		box-shadow: 1.375em -0.29721em var(--mint), 1.375em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0em var(--brightgreen), 2.75em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.29721em var(--orange), 4.125em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em 0.18368em var(--palegreen), 5.5em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.18368em var(--red), 6.875em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
	}
	100% {
		box-shadow: 1.375em 0em var(--brightgreen), 1.375em 0em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 2.75em 0.29721em var(--orange), 2.75em -0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 4.125em 0.18368em var(--palegreen), 4.125em -0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 5.5em -0.18368em var(--red), 5.5em 0.18368em 0.625em -0.3125em rgba(0, 0, 0, 0.52), 6.875em -0.29721em var(--mint), 6.875em 0.29721em 0.625em -0.3125em rgba(0, 0, 0, 0.52);
	}
}