@charset "utf-8";

@font-face
{
	font-family: 'Chrono';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebLight.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: 'Chrono';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebLightItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebLightItalic.woff') format('woff');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face
{
	font-family: 'Chrono';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebRegular.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebRegular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: 'Chrono';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebRegularItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebRegularItalic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face
{
	font-family: 'Chrono';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebMedium.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebMedium.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: 'Chrono';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebMediumItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebMediumItalic.woff') format('woff');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face
{
	font-family: 'Chrono';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebBold.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: 'Chrono';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebBoldItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebBoldItalic.woff') format('woff');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

@font-face
{
	font-family: 'Chrono';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebBlack.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebBlack.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	font-family: 'Chrono';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebBlackItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/ChronoWeb_WOFF/ChronoWebBlackItalic.woff') format('woff');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

/* 200 - Thin */
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-Thin.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-Thin.woff') format('woff'),
		url('/fonts/Hellix/Hellix-Thin.woff2') format('woff2');
	font-display: fallback;
	font-style: normal;
	font-weight: 200;
}
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-ThinItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-ThinItalic.woff') format('woff'),
		url('/fonts/Hellix/Hellix-ThinItalic.woff2') format('woff2');
	font-display: fallback;
	font-style: italic;
	font-weight: 200;
}
/* --- */

/* --- */
/* 300 - Light */
@font-face
{
		font-family: 'Hellix';
		src:
		url('/fonts/Hellix/Hellix-Light.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-Light.woff') format('woff'),
		url('/fonts/Hellix/Hellix-Light.woff2') format('woff2');
		font-display: fallback;
		font-style: normal;
		font-weight: 300;
}
@font-face
{
		font-family: 'Hellix';
		src:
			url('/fonts/Hellix/Hellix-LightItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-LightItalic.woff') format('woff'),
		url('/fonts/Hellix/Hellix-LightItalic.woff2') format('woff2');
		font-display: fallback;
		font-style: italic;
		font-weight: 300;
}
/* --- */

/* --- */
/* 400 - Regular */
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-Regular.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-Regular.woff') format('woff'),
		url('/fonts/Hellix/Hellix-Regular.woff2') format('woff2');
	font-display: fallback;
	font-style: normal;
	font-weight: 400;
}
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-RegularItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-RegularItalic.woff') format('woff'),
		url('/fonts/Hellix/Hellix-RegularItalic.woff2') format('woff2');
	font-display: fallback;
	font-style: italic;
	font-weight: 400;
}
/* --- */

/* --- */
/* 500 - Medium */
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-Medium.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-Medium.woff') format('woff'),
		url('/fonts/Hellix/Hellix-Medium.woff2') format('woff2');
	font-display: fallback;
	font-style: normal;
	font-weight: 500;
}
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-MediumItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-MediumItalic.woff') format('woff'),
		url('/fonts/Hellix/Hellix-MediumItalic.woff2') format('woff2');
	font-display: fallback;
	font-style: italic;
	font-weight: 500;
}
/* --- */

/* --- */
/* 600 - SemiBold */
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-SemiBold.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-SemiBold.woff') format('woff'),
		url('/fonts/Hellix/Hellix-SemiBold.woff2') format('woff2');
	font-display: fallback;
	font-style: normal;
	font-weight: 600;
}
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-SemiBoldItalic.woff') format('woff'),
		url('/fonts/Hellix/Hellix-SemiBoldItalic.woff2') format('woff2');
	font-display: fallback;
	font-style: italic;
	font-weight: 600;
}
/* --- */

/* --- */
/* 700 - Bold */
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-Bold.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-Bold.woff') format('woff'),
		url('/fonts/Hellix/Hellix-Bold.woff2') format('woff2');
	font-display: fallback;
	font-style: normal;
	font-weight: 700;
}
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-BoldItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-BoldItalic.woff') format('woff'),
		url('/fonts/Hellix/Hellix-BoldItalic.woff2') format('woff2');
	font-display: fallback;
	font-style: italic;
	font-weight: 700;
}
/* --- */

/* --- */
/* 800 - Extra Bold */
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-ExtraBold.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-ExtraBold.woff') format('woff'),
		url('/fonts/Hellix/Hellix-ExtraBold.woff2') format('woff2');
	font-display: fallback;
	font-style: normal;
	font-weight: 800;
}
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-ExtraBoldItalic.woff') format('woff'),
		url('/fonts/Hellix/Hellix-ExtraBoldItalic.woff2') format('woff2');
	font-display: fallback;
	font-style: italic;
	font-weight: 800;
}
/* --- */

/* --- */
/* 900 - Black */
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-Black.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-Black.woff') format('woff'),
		url('/fonts/Hellix/Hellix-Black.woff2') format('woff2');
	font-display: fallback;
	font-style: normal;
	font-weight: 900;
}

@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix/Hellix-BlackItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix/Hellix-BlackItalic.woff') format('woff'),
		url('/fonts/Hellix/Hellix-BlackItalic.woff2') format('woff2');
	font-display: fallback;
	font-style: italic;
	font-weight: 900;
}

/* Saans */

@font-face
{
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-Light.woff2') format('woff2'),
		url('/fonts/Roobert/Roobert-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}

@font-face
{
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-Regular.woff2') format('woff2'),
		url('/fonts/Roobert/Roobert-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face
{
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-Medium.woff2') format('woff2'),
		url('/fonts/Roobert/Roobert-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face
{
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-SemiBold.woff2') format('woff2'),
		url('/fonts/Roobert/Roobert-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}

@font-face
{
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-Bold.woff2') format('woff2'),
		url('/fonts/Roobert/Roobert-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face
{
	font-family: 'Saans';
	src: url('/fonts/saans/Saans-Heavy.woff2') format('woff2'),
		url('/fonts/Roobert/Roobert-Heavy.woff') format('woff');
	font-weight: 800;
	font-style: normal;
}

/* Roobert for Playdate */

@font-face
{
	font-family: 'Roobert';
	src: url('/fonts/Roobert/Roobert-SemiBold.woff2') format('woff2'),
		url('/fonts/Roobert/Roobert-SemiBold.woff') format('woff'),
		url('/fonts/Roobert/Roobert-SemiBold.eot') format('embedded-opentype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
    --yellow: rgba(255,205,63,1);
    --lightyellow: rgba(255,248,178,1);
    --purple: rgba(120,0,255,1);
    --lightpurple: rgba(120,0,255,0.25);
    --gray: rgba(121,127,132,1);
    --lightgray: rgba(200,200,200,1);
    --darkgray: rgba(97,97,99,1);
    --white: rgba(255,255,255,1);
    --lightwhite: rgba(255,255,255,0.25);
    --black: rgba(0,0,0,1);

    --purple1: rgba(84,64,135,1);
    --purple2: rgba(131,103,201,1);
    --teal1: rgba(68,185,208,1);

	--pink: rgb(255,0,72);

	--playdate-yellow: #ffc833;

	--logo-middle: white;
	--logo-top: var(--teal1);
	--logo-bottom: var(--pink);

	--herdling-red: #a12e32;

	--blippo-darkgray: #312f28;
	--blippo-lightgray: #b1afa8;
	
	--ratcheteer-blue: #0852ff;
}

@supports (color: color(display-p3 1 1 1 / 1))
{
    :root
    {
        --yellow: color(display-p3 1 0.80 0.25 / 1);
        --lightyellow: rgba(255,248,178,1);
        --purple: color(display-p3 0.47 0 1 / 1);
        --lightpurple: color(display-p3 0.47 0 1 / 0.25);
        --gray: color(display-p3 0.48 0.50 0.52 / 1);
        --lightgray: color(display-p3 0.78 0.78 0.78 / 1);
        --darkgray: color(display-p3 0.39 0.39 0.39 / 1);
        --white: color(display-p3 1 1 1 / 1);
        --lightwhite: color(display-p3 1 1 1 / 0.25);
        --black: color(display-p3 0 0 0 / 1);

        --purple1: color(display-p3 0.33 0.25 0.53 / 1);
        --purple2: color(display-p3 0.51 0.40 0.78 / 1);
        --teal1: color(display-p3 0.27 0.75 0.82 / 1);

		--pink: color(display-p3 1 0 0.2823 / 1);

		--playdate-yellow: color(display-p3 1 0.784 0.2);
    }
}

html
{
		font-size: 2.4px;
}

body
{
		font-size: 4rem;
}

@media screen and (min-width: 240px)
{
		html
		{
				font-size: 1vw;
		}
}

@media screen and (min-width: 1000px)
{
		html
		{
				font-size: 10px;
		}
}

* {
	margin: 0;
	padding: 0;
	outline: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

html
{
	background: #ebebeb;
	background-image: linear-gradient(#202428 0%, #202428 50%, #ebebeb 50%, #ebebeb 100%);
}

a {
	text-decoration: none;
	color: inherit;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}

body {
	background: #1c1c1c;
	font-family: "Chrono";
	font-weight: 400;
	padding: 0px;
	margin: 0px;
	}

#above-support {
	top: 0;
	left: 0;
	background: #ebebeb;
	overflow: hidden;
}

.contentwidth {
	margin: 0 auto;
	/* outline: 1px solid green; */
}

.hidetext {
	color: transparent;
	text-indent: -999.9rem;
}

.hidden
{
	display: none !important;
}


/* ! Header stuff */

header {

}

em.nova,
#app_nova .popover h3
{
	font-family: "Hellix", "Chrono", sans-serif;
	font-weight: 700;
	font-size: 4.8em;
	margin-bottom: .4em;
	text-transform: lowercase;
	color: #ff034a;
}

#app_prompt .popover h3
{
	background-image: url("/prompt/img/prompt-title-clean.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	color: transparent;
	font-family: monospace;
	pointer-events: none;
	font-size: 1em;
	height: 2em;
	margin: .5em auto 1em auto;
}

p.playdate
{
	font-family: "Roobert", "Chrono", sans-serif;
	color: #ffc833;
}

@supports (color: color(display-p3 1 1 1 / 1))
{
	p.playdate
	{
		color: color(display-p3 1 0.784 0.2);
	}
}

em.nova
{
	font-size: 1.1em;
	font-style: normal;
}

#panic-logo {
	color: transparent;
	font-size: 0;
	position: relative;
	text-align: center;
	padding: 4rem;
	z-index: 100;
}

/* Feature/takeover banner */

.takeover
{
	position: relative;
	margin: 0 auto;
	padding: 0 0 72rem 0;
	overflow: clip;
	color: white;
}

.takeover::after
{
	position: absolute;
	content: "";
	display: block;

	width: 120vw;
	height: 6vw;
	bottom: 0%;
	left: 50%;
	background-color: #ebebeb;
	transform: rotate(-3deg) translate(-50%, 0%);
}

.takeover .feature
{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.feature::before
{
	position: absolute;
	content: "";
	display: block;

	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: var(--banner-bg);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
}

.feature .title
{
	width: 100%;
	top: 30rem;
	height: 10rem;
	position: relative;
	color: transparent;

	margin: 0 auto;
	padding: 0;

	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: contain;

	transition-property: transform;
	transition-duration: .4s;
	transition-timing-function: ease-in;
}

.feature .title a::after
{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	content: "";
}

.feature .title:hover
{
	transform: scale(1.05);
}

.feature
{
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 350ms linear;
}

[data-takeover="showcase"] #showcase-takeover,
[data-takeover="herdling"] #herdling-takeover,
[data-takeover="arco"] #arco-takeover,
[data-takeover="tgyh"] #tgyh-takeover,
[data-takeover="blippo-plus"] #blippo-plus-takeover,
[data-takeover="despelote"] #despelote-takeover,
[data-takeover="time-flies"] #time-flies-takeover,
[data-takeover="ratcheteer"] #ratcheteer-takeover
{
	opacity: 1;
	pointer-events: all;
}

/* Time Flies Takeover */

/* canvas
{
	opacity: 0;
}

[data-takeover="time-flies"] canvas
{
	opacity: 1;
} */

[data-takeover="time-flies"]
{
	--banner-bg: white;
	--logo-top: black;
	--logo-middle: white;
	--logo-bottom: black;
}

[data-takeover="time-flies"] .takeover
{
	padding: 0 0 32rem 0;
}

#time-flies-takeover.feature::before
{
	background-color: white;
	/* background-image: url("/fly/screenshot-02.png");
	background-position: bottom; */
}

#time-flies-takeover.feature .title
{
	background-image: url("/fly/timeflies-logo-2880x592.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;

	height: 20rem;
}


/* Despelote Takeover */

[data-takeover="despelote"]
{
	--banner-bg: #7A2259;
	--logo-top: #000;
	--logo-bottom: #000;
}

#despelote-takeover.feature::before
{
	background-image: url("/images/banner-game-despelote-noball.png");
}

#despelote-takeover.feature::after
{
	position: absolute;
	content: "";
	display: block;

	z-index: 400;

	width: 12rem;
	height: 12rem;
	bottom: 6rem;
	left: calc(50% - 6rem);
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("/images/banner-game-despelote-ball.png");

	animation-name: moveBall;
	animation-duration: 1000ms;
	animation-timing-function: ease-out;
	animation-delay: 0;
	animation-direction: normal;
	animation-fill-mode: forwards;
	transform-origin: center center;
}

@keyframes moveBall
{
	from
	{
		transform: scale(0.9) rotateZ(0deg) translate(-1rem,-1rem)
	}
	to
	{
		transform: scale(1.1) rotateZ(40deg) translate(2rem, 2rem);
	}
}

#despelote-takeover.feature .title
{
	background-image: url("/images/banner-game-despelote-title.png");
}

/* Blippo Plus Takeover */

[data-takeover="blippo-plus"]
{
	--banner-bg: #fff;
	--logo-top: #555FAA;
	--logo-middle: #fff;
	--logo-bottom: #7FBFAA;
}

#blippo-plus-takeover.feature::before
{
	background-color: var(--blippo-lightgray);

	background-image:  url("/images/blippo-graph-paper-tile.jpg");
	background-repeat: repeat;
	background-position: center;
	background-size: 1em;
}

#blippo-plus-takeover.feature .title
{
	/* -webkit-mask-image: url("/images/blippo-tv-frame.svg");
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center; */

	/* background-color: var(--blippo-darkgray); */

	background-image: url("/images/blippo-color-key-art.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	margin-top: 5rem;
	height: 50rem;
}

/* Herdling Takeover */

[data-takeover="herdling"]
{
	--banner-bg: #29768a;
	--logo-top: #a12e32;
	--logo-bottom: #00556b;
}

#herdling-takeover.feature::before
{
	background-image: url("/images/banner-game-herdling.jpg");
}

#herdling-takeover.feature .title
{
	background-image: url("/images/title-game-herdling.svg");
}

/* Showcase Takeover */

[data-takeover="showcase"]
{
	--banner-bg: #30046d;
	--logo-top: #da1cbd;
	--logo-middle: #30046d;
	--logo-bottom: white;
}

#showcase-takeover.feature::before
{
	background-image: url("/images/banner-showcase.jpg");
}

#showcase-takeover.feature .title,
#showcase-takeover.feature .details

{
	position: relative;
	color: white;
	font-family: "Saans";
	font-size: 1.8em;
	line-height: 1;
	font-weight: 700;
	text-align: center;
}

#showcase-takeover.feature .title
{
	top: 30rem;
}

#showcase-takeover.feature .details
{
	top: 46rem;
}

#showcase-takeover.feature span
{
	opacity: 0.5;
}

#showcase-takeover.feature .details a::after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* Arco Takeover */

[data-takeover="arco"]
{
	--banner-bg: #004b8c;
	--logo-top: #fabe6a;
	--logo-bottom: #b33433;
	--logo-middle: white;
}

#arco-takeover.feature::before
{
	background-image: url("/images/banner-game-arco.jpg");
}

#arco-takeover.feature .title
{
	background-image: url("/images/banner-game-arco-title.png");
	top: 29rem;
}

/* TGYH Takeover */

[data-takeover="tgyh"]
{
	--banner-bg: #f15a4a;
	--logo-top: #8ec5ed;
	--logo-bottom: #ffa0a0;
	--logo-middle: white;
}

#tgyh-takeover.feature::before
{
	background-image: url("/images/banner-game-tgyh.png");
}

#tgyh-takeover.feature .title
{
	background-image: url("/images/banner-game-tgyh-title.png");
	height: 33rem;
	top: 25rem;
}

/* Sections */

section
{
	margin: 3rem auto 0 auto !important;
}

section h2
{
	margin: 0 auto;
	text-align: center;
	font-weight: 200;
	font-size: 4.2rem;
	line-height: 4.5rem;
	letter-spacing: -.1rem;
	display: flex;
	justify-content: center;
	color: var(--purple);
}

section#follow h2
{
	display: block;
}

section#apps h2::before,
section#games h2::before,
section#game-consoles h2::before
{
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	margin-right: 0.25em;
	background-color: var(--purple);
	-webkit-mask-size: 93%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

section#apps h2::before
{
	-webkit-mask-image: url("images/homepage-work.svg");
}

section#games h2::before
{
	-webkit-mask-image: url("images/homepage-play.svg");
}

section#game-consoles h2::before
{
	-webkit-mask-image: url("images/homepage-playdate.svg");
}



div#above-support::after
{
	height: 15rem;
	content: "";
	background-color: #171717;
	display: block;
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* ! Navbar stuff */

nav {
	padding-top: 2rem;
	text-align: center;
	z-index: -10;
}

nav ul
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-width: 105rem;
	margin-left: auto;
	margin-right: auto;
}


nav ul li
{
	display: inline-block;
	position: relative;
}

nav ul li>a
 {
	display: inline-block;
	width: 22rem;
	height: 22rem;
	color: transparent;
	text-indent: -999.9rem;
	background-position: center center;
	background-repeat: no-repeat;
	/* border-radius: 4.2rem; */
	background-size: contain;
	transform: scale(.9) rotate(0deg) translateY(0);
}

nav ul li#game_firewatch h3,
nav ul li#game_goose h3,
nav ul li#game_nour h3,
nav ul li#game_despelote h3,
nav ul li#game_arco h3,
nav ul li#game_tgyh h3,
nav ul li#game_timeflies h3,
nav ul li#game_bigwalk h3,
nav ul li#game_herdling h3,
nav ul li#game_ratcheteer h3,
nav ul li#game_blippo_plus h3,
nav ul li#icon_playdate h3
{
	color: transparent;
	text-indent: -99999px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 90% auto;
}

nav ul li>a,
nav ul li em /* bangs, alerts, and callout on icons */
{
	-webkit-transition: transform .15s ease-in-out;
	-moz-transition: transform .15s ease-in-out;
	transition: transform .15s ease-in-out;
}

nav ul a
{
	background-size: contain;
	transform: scale(.9) rotate(0deg) translateY(0);
}

nav ul li:hover a
{
	transform: scale(1) rotate(0deg) translateY(-1.0rem);
}

nav ul li#app_nova>a
{
	background-image: url(images/icon-nova-11.png);
}

nav ul li#icon_playdate>a
{
	background-image: url(images/icon-playdate@2x.png);
}

nav ul li#app_transmit>a
{
	background-image: url(images/icon-transmit-bigsur.png);
}

nav ul li#app_prompt>a
{
	background-image: url('prompt/img/prompt-icon-dark.png');
}

/* Firewatch */

nav ul li#game_firewatch h3
{
	background-image: url('images/title-game-firewatch.png');
	height: 1.4em;
}

nav ul li#game_firewatch>a
{
	background-image: url(images/icon-game-firewatch.png);
}

nav ul li#game_firewatch:hover .popover
{
	top: -20rem;
	left: -1.75rem;
}

nav ul li#game_firewatch .note.action
{
	background-color: #f3b13e;
	color: black;
}

/* Goose */

nav ul li#game_goose:hover .popover
{
	width: 26rem;
	top: -20rem;
	left: -4rem;
}

nav ul li#game_goose h3
{
	background-image: url('images/title-game-goose.png');
	height: 2em;
}

nav ul li#game_goose>a     {
	background-image: url(images/icon-goose@2x.png);
}

nav ul li#game_goose em
{
	position: absolute;
	width: 86%;
	top: 4.2rem;
	left: .0rem;
	margin: 0 7%;
	text-align: center;
	white-space: nowrap;
	padding: .5rem 0 .2rem 0;
	background: #fff332;
	font-size: 2.4rem;
	line-height: 3.0rem;
	font-weight: 600;
	color: black;
	transform: rotate(-3deg);
	box-shadow: .0rem .1rem .4rem rgba(0, 0, 0, 0.4);
	z-index: 99999;
}
nav ul li#game_goose:hover em
{
	transform: scale(.5) rotate(0deg) translateY(-3.0rem);
	opacity: 0;
}

nav ul li#game_goose .note.action
{
	background-color: #ea3327;
}

/* Nour */

nav ul li#game_nour h3
{
	background-image: url('images/title-game-nour.png');
	height: 2em;
}

nav ul li#game_nour>a	 {
	background-image: url("https://food.game/images/emoji/emoji-donut.png");
	-webkit-background-size: 24.0rem auto;
	background-size: 24.0rem auto;
	top: -2.0rem;
	position: relative
}

@media (prefers-reduced-motion) {
	nav ul li#game_nour>a	 {
		background-image: url("https://food.game/images/emoji/emoji-donut.png");
	}
}

nav ul li#game_nour:hover>a {
	background-image: url("https://food.game/images/emoji/emoji-donut.gif");
}
nav ul li#game_nour em
{
	position: absolute;
	width: 86%;
	top: 4.2rem;
	left: .0rem;
	margin: 0 7%;
	text-align: center;
	white-space: nowrap;
	padding: .5rem 0 .2rem 0;
	background: #fff332;
	font-weight: 600;
	font-size: 2.4rem;
	line-height: 3.0rem;
	color: black;
	transform: rotate(-3deg);
	box-shadow: .0rem .1rem .4rem rgba(0, 0, 0, 0.4);
	z-index: 99999;
}
nav ul li#game_nour:hover em
{
	transform: scale(.5) rotate(0deg) translateY(-3.0rem);
	opacity: 0;
}

nav ul li#game_nour .note.action
{
	background-color: #f2819e;
}

/* Blippo+ */

nav ul li#game_blippo_plus
{
	top: -.5rem;
}
nav ul li#game_blippo_plus h3
{
	background-image: url('images/blippo.svg');
	background-size: 5em auto;
	background-position: center;
	height: 3.5em;
}

nav ul li#game_blippo_plus .popover
{
	width: 19em;
	left: -7rem;
}

nav ul li#game_blippo_plus>a
{
	background-position: center 45%, center center;
	background-size: 92%, contain;
	background-repeat: no-repeat, no-repeat;
	background-image: url("images/blippo-glitch2.gif"), url("images/icon-game-blippo-plus-sticker.png");
}

nav ul li#game_blippo_plus .note.action
{
	background-color: var(--blippo-darkgray);
}

/* Herdling */


nav ul li#game_herdling h3
{
	background-image: url('images/title-game-herdling.svg');
	background-size: 6em auto;
	background-position: center;
	height: 2em;
}

nav ul li#game_herdling .popover
{
	width: 19em;
	left: -6rem;
}

nav ul li#game_herdling>a	 {
	background-image: url("images/icon-game-herdling.png");
	}

nav ul li#game_herdling .note.action
{
	background-color: var(--herdling-red);
}

/* Ratcheteer */

nav ul li#game_ratcheteer h3
{
	background-image: url('images/title-game-ratcheteer-dx.svg');
	background-size: contain;
	height: 2.2em;
}

nav ul li#game_ratcheteer .popover
{
	width: 22em;
	left: -8rem;
}

nav ul li#game_ratcheteer>a	 {
	background-image: url("images/icon-game-ratcheteer-dx.png");
	}

nav ul li#game_ratcheteer .note.action
{
	background-color: var(--ratcheteer-blue);
}

/* Arco */

nav ul li#game_arco h3
{
	background-image: url('images/title-game-arco.png');
	background-size: 4em auto;
	background-position: 40% center;
	height: 2.2em;
}

nav ul li#game_arco>a	 {
	background-image: url("images/icon-game-arco.png");
	}

nav ul li#game_arco .note.action
{
	background-color: #f27e18;
}


/* Despelote */

nav ul li#game_despelote h3
{
	background-image: url('images/title-game-despelote.png');
	height: 1.8em;
}

nav ul li#game_despelote .popover
{
	width: 20em;
	left: -7rem;
}

nav ul li#game_despelote>a	 {
	background-image: url("images/icon-game-despelote.png");
	}

nav ul li#game_despelote .note.action
{
	background-color: #852a66;
}



/* Thank Goodness */

nav ul li#game_tgyh h3
{
	background-image: url('images/title-game-thankgoodness.png');
	height: 3em;
}

nav ul li#icon_playdate>a

nav ul li#game_tgyh .popover
{
	width: 29rem;
	left: -6rem;
	top: -12.0rem;
}

nav ul li#game_tgyh>a	 {
	background-image: url("images/icon-game-tgyh.png");
}

nav ul li#game_tgyh .note.action
{
	background-color: #3257a0;
}

/* Time Flies */

nav ul li#game_timeflies h3
{
	background-image: url('images/title-game-timeflies.png');
	height: 2.2em;
}

nav ul li#game_timeflies>a	 {
	background-image: url("images/icon-game-time-flies.png");
	}

nav ul li#game_timeflies .note.action
{
	background-color: black;
}



/* Big Walk */

nav ul li#game_bigwalk h3
{
	background-image: url('images/title-game-bigwalk.svg');
	background-size: contain;
	height: 3.7em;
	margin-bottom: 0;
}

nav ul li#game_bigwalk>a
{
	background-image: url("images/icon-game-bigwalk.png");
}

nav ul li#game_bigwalk .popover
{
	left: -4rem;
}

nav ul li#game_bigwalk .note.action
{
	background-color: #5371ab;
}

/* Playdate */

nav ul li#icon_playdate .popover
{
	top: -15rem;
}
nav ul li#icon_playdate:hover .popover
{
	top: -20rem;
}

nav ul li#icon_playdate h3
{
	background-image: url('images/playdate-logo.svg');
	height: 1.5em;
}

/* Popover */

nav ul li .popover,
div#serial-alert
{
	position: absolute;
	width: 22.0rem;
	top: -9.0rem;
	left: -2rem;
	background: white;
	border-radius: 1.0rem;
	padding: 2.0rem;
	font-size: 1.6rem;
	line-height: 2.0rem;
	font-weight: 400;
	color: #444;
	opacity: 0;
	transition-property: top, opacity;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
	z-index: -1;
}

nav ul li .popover h3,
div#serial-alert h3 {
	font-weight: 600;
	font-size: 4.8rem;
	line-height: 4.8rem;
	letter-spacing: -.1rem;
	margin-bottom: 1.0rem;
	color: #1f95c1;
}

/* Popover Notes */

nav ul li .popover .note
{
	display: block;
	font-size: 1.5rem;
	font-weight: 400;
}

nav ul li .popover .description
{
	font-size: 1.1em;
}

nav ul li .popover .sync
{
	color: #41bb9c;
	margin-top: .5em;
}

nav ul li .popover .platform
{
	margin-top: .5em;
	font-weight: 600;
}

nav ul li .popover .action
{
	display: inline-block;

	margin-top: .6em;
	margin-bottom: .25em;
	padding: .5em 1.5em .4em 1.4em;
	border-radius: 1.5em;

	background: #9844f6;
	color: white;
	font-weight: 600;
}

nav ul li:hover .popover,
form.sent div#serial-alert {
/* 	visibility: visible; */
	opacity: 1;
	top: -12.0rem;
	z-index: 10;
}

nav ul li#game_nour .popover,
nav ul li#game_despelote .popover,
nav ul li#game_arco .popover,
nav ul li#game_tgyh .popover,
nav ul li#game_herdling .popover,
nav ul li#game_blippo_plus .popover,
nav ul li#game_timeflies .popover,
nav ul li#game_bigwalk .popover,
nav ul li#game_ratcheteer .popover
{
	top: -20rem;
}

nav ul li#game_nour:hover .popover,
nav ul li#game_despelote:hover .popover,
nav ul li#game_arco:hover .popover,
nav ul li#game_tgyh:hover .popover,
nav ul li#game_herdling:hover .popover,
nav ul li#game_blippo_plus:hover .popover,
nav ul li#game_timeflies:hover .popover,
nav ul li#game_ratcheteer:hover .popover,
nav ul li#game_bigwalk:hover .popover
{
	top: -25rem;
}

nav ul li#game_blippo_plus .popover
{
	top: -30rem;
}

nav ul li#game_blippo_plus:hover .popover
{
	top: -35rem;
}

div#serial-alert h3 {
	font-size: 2.4rem;
	line-height: 2.4rem;
}

div#serial-alert p {
	margin-top: 1em;
}

#support form
{
	position: relative;
}

div#serial-alert
{
	position: absolute;
	width: 36.0rem;
	top: -16.8rem;
	right: -13.0rem;
	font-weight: 400;
	text-shadow: none;
	text-align: center;
}

div#serial-alert a
{
	color: #1f95c1;
}

form.sent div#serial-alert
{
	top: -19.8rem;
}

/* "Coming Soon" is a long name; instead of wrapping it, try fitting on one line */
nav ul li#app_teaser3 .popover  {
	width: 30.0rem;
}

.popover
{
	box-shadow: 0 .5rem 2.0rem rgba(0,0,0,.2);
	position: relative;
	z-index: 3;
}

.popover:before,
div#serial-alert:before
{
	content: "";
	position: absolute;
	bottom: 0;
	left: 2.0rem;
	right: 2.0rem;
	height: 2.2rem;
	background: white;
}

.popover:after,
div#serial-alert:after {
	content: "";
	z-index: -1;
	width: 1.6rem;
	height: 1.6rem;
	background: #fff;
	margin-left: -1.0rem;
	position: absolute;
	bottom: -.8rem;
	left: 50%;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	box-shadow: .0rem .5rem 2.0rem rgba(0,0,0,.5);
}

/* ! Apps stuff */

section#apps {
}

section#apps h2 {
}

/* Games stuff */

section#games h2
{
}

section#game-consoles h2
{
}

/* follow stuff */

section#follow
{
	padding-bottom: 3.5rem;
}

section#follow h2
{
	color: #44b9d0;
    color: var(--teal1);
}
section#follow a {
	display: inline-block;
	color: #127093;
	line-height: .8em;
	padding-bottom: 0;
	border-bottom: .2rem solid #127093;
	/* text-decoration: underline; */
}

/* ! Support stuff */

section#support
{
	background: #171717;
	color: #808080;
	margin-top: 0 !important;
	padding-top: 3rem;
}

section#support h2 {
	text-align: center;
	color: #ffca10;
  color: var(--yellow);
}

section#support ul {
	margin: 3rem auto 0 auto;
	width: 58rem;
	padding-left: 2rem;
	font-weight: 400;
	font-size: 2.4rem;
	line-height: 4.6rem;
	text-shadow: .0rem .1rem .0rem rgba(0,0,0,.25);
	list-style-type: none;
}

section#support ul li {
	display: block;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 3.4rem;
	padding-left: 4.4rem;
}

section#support ul li#support_twitter       { background-image: url(images/mini-twitter.svg); }
section#support ul li#support_support       { background-image: url(images/mini-support.svg); }
section#support ul li#support_elist         { background-image: url(images/mini-elist.svg); }
section#support ul li#support_serial        { background-image: url(images/mini-serial.svg); }
section#support ul li#support_museum        { background-image: url(images/mini-museum.svg); }
section#support ul li#support_compatibility { background-image: url(images/mini-compatibility.svg); }
section#support ul li#support_library       { background-image: url(images/mini-library.svg); }
section#support ul li#support_sync          { background-image: url(images/mini-panic-sync.svg); }

section#support select {
	-khtml-appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
 	width: 18.3rem;
	color: #ddd;
	border: .1rem solid rgba(255,255,255,.3);
	font-weight: 400;
	font-size: 2.4rem;
	line-height: 2.4rem;
	padding: .5rem 3.5rem .5rem .1rem;
	margin: 0;
	background-color: black;
	background-image: url(images/dropdown-arrow.svg);
	background-repeat: no-repeat;
	background-position: 97% center;
	background-size: 1.5rem 1.2rem;
	-webkit-border-radius: .4rem;
	-moz-border-radius: .4rem;
	-o-border-radius: .4rem;
	-ms-border-radius: .4rem;
	border-radius: .4rem;
}

section#support select option {
	font-size: 1.3rem;
	min-height: 2.5rem;
}

section#support input[type="text"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	width: 16.1rem;
	color: #ddd;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.6rem;
	padding: 1rem .0rem .2rem .5rem;
	margin: .2rem 0 0 .4rem;
	border: .1rem solid rgba(255,255,255,.3);
	background: black;
	-webkit-border-radius: .4rem;
	-moz-border-radius: .4rem;
	-o-border-radius: .4rem;
	-ms-border-radius: .4rem;
	border-radius: .4rem;
}
section#support input[type="text"]:focus {
	box-shadow: .0rem .0rem .0rem .2rem rgba(255,255,255,.3);
}

section#support input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	position: relative;
	top: -.2rem;
	width: 4rem;
	color: #ccc;
	border: 0.1rem solid rgba(255,255,255,.3);
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 2.4rem;
	text-align: center;
	padding: .5rem .4rem .5rem .4rem;
	margin: 0;
	background: black;
	-webkit-border-radius: .4rem;
	-moz-border-radius: .4rem;
	-o-border-radius: .4rem;
	-ms-border-radius: .4rem;
	border-radius: .4rem;
}
section#support input[type="submit"]:active {
	background: rgba(255,255,255,.1);
	color: white;
}

section#support #support_serial input[type="submit"] {
	line-height: 2.1rem;
	top: -.3rem;
}

section#support a:hover {
	text-decoration: underline;
}

footer {
	padding: 2.5rem 0 1rem 0;
	font-size: 1.6rem;
	line-height: 4.6rem;
	font-weight: 200;
	text-align: center;
	color: #666;
}

footer #japan {
	display: inline-block;
	padding-left: 2.4rem;
	text-align: right;
	background: url("/images/lang-jp.svg") left 1.3rem no-repeat;
	background-size: 2rem 1.6rem;
	line-height: 4.6rem;
}

footer #en {
	display: inline-block;
	padding-left: 2.4rem;
	text-align: right;
	background: url("/images/lang-en.svg") left 1.3rem no-repeat;
	background-size: 2rem 1.6rem;
	line-height: 4.6rem;
}

footer p
{
	line-height: 1em;
}