@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;
}

/* 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;
}

@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;
}

.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;
	text-transform: lowercase;
	color: #ff034a;
}

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);
	}
}

header p a
{
	text-decoration: underline;
	border-bottom: 0 !important;
}

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

}


header h1 {
/*
	background-image: url(/images/big-logo.svg);
	background-repeat: no-repeat;
	background-position: 50% 5.0rem;
	-webkit-background-size: 22.6rem 23.3rem;
	-moz-background-size: 22.6rem 23.3rem;
	background-size: 22.6rem 23.3rem;
	height: 31.0rem;
*/
	color: transparent;
	font-size: 0;
	position: relative;
	text-align: center;
	padding: 4rem 0;
}

header h1
{
	position: relative;
}

/* header h1::after
{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(transparent, #000);
	opacity: .35;
	content: "";
	mix-blend-mode: overlay;
	-webkit-mask-image: url(/images/big-logo.svg);
	-webkit-mask-size: 22.3rem 23.0rem;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
} */

/* Feature banner */

div.featured
{
	margin: -8% auto -5% auto;
	display: grid;
	width: 100%;
	overflow: hidden;
	padding: 10% 0;
	align-content: center;
}

div.featured.nova
{
	--purple: rgb(161, 59, 255);
	font-family: "Hellix", sans-serif;
	font-weight: 300;
	color: white;
}


div.featured.nova dl
{
	margin: 0 -5%;
	padding: .5em 0 1em 0;
	background-color: var(--purple);

	width: 110%;
	
	transform: skew(0deg, -10deg);
	transition: .2s all ease;
}

@supports (color: color(display-p3 1 1 1 / 1)) {
:root
{
	div.featured.nova
	{
		--purple: color(display-p3 0.631 0.231 1);
	}
}

div.featured.nova dt
{
	font-size: 7.2rem;
	letter-spacing: -0.0325em;
	line-height: 1.2em;
	text-transform: uppercase;
	text-align: center;
}

div.featured.nova dt b
{
	font-weight: 900;
}

div.featured.nova dd
{
	text-align: center;
	text-transform: lowercase;
	font-size: 2.4rem;
	line-height: 1.2em;
	padding: 0;
	font-weight: 400;
	/* font-style: italic; */
}

div.featured.nova a:hover dl
{
	transform: skew(0deg, -11deg) scale(1.03);
}


/* Sections */

section
{
	margin: 3rem auto 0 auto !important;
	/* transform: skewY(-10deg); */
}

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#blog 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
{
	width: 100%;
	height: 15rem;
	content: "";
	background-color: #171717;
	display: block;
	margin-bottom: -3rem;
	clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* ! Navbar stuff */

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

nav ul li
{
	display: inline-block;
	position: relative;
	/* outline: .1rem solid red; */
}

nav ul li>a
 {
	display: inline-block;
	width: 23.4rem;
	height: 23.4rem;
	color: transparent;
	text-indent: -999.9rem;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 4.2rem;
}
nav ul li>a,
nav ul li em /* bangs, alerts, and callout on icons */
{
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}

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

nav ul li#app_coda>a     {
	background-image: url(images/icon-coda27.png);
	-webkit-background-size: 19.7rem 19.2rem;
	background-size: 19.7rem 19.2rem;
}
nav ul li#app_coda:hover>a {
	-webkit-background-size: 23.4rem 23.1rem;
	background-size: 23.4rem 23.1rem;
}

nav ul li#icon_playdate>a     {
	background-image: url(images/icon-playdate@2x.png);
	-webkit-background-size: 18.7rem 22rem;
	background-size: 18.7rem 22rem;
}
nav ul li#icon_playdate:hover>a {
	-webkit-background-size: 20.6rem 24.2rem;
	background-size: 20.6rem 24.2rem;
}

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

nav ul li#app_prompt>a   {
	background-image: url(images/icon-prompt2@2x.png);
	-webkit-background-size: 18rem 18.1rem;
	background-size: 18rem 18.1rem;
}
nav ul li#app_prompt:hover>a {
	-webkit-background-size: 20.9rem 20.9rem;
	background-size: 20.9rem 20.9rem;
}
nav ul li#app_code-editor>a   {
	background-image: url(images/icon-code-editor.png);
	-webkit-background-size: 18.1rem 18.1rem;
	background-size: 18.1rem 18.1rem;
}
nav ul li#app_code-editor:hover>a   {
	-webkit-background-size: 20.9rem 209rem;
	background-size: 20.9rem 20.9rem;
}
nav ul li#app_code-editor .popover h3
{
	font-size: 4.4rem;
}



nav ul li#app_statusboard>a   {
	background-image: url(images/icon-statusboard2.png);
	-webkit-background-size: 18.1rem 18.1rem;
	background-size: 18.1rem 18.1rem;
}
nav ul li#app_statusboard:hover>a   {
	-webkit-background-size: 20.9rem 20.9rem;
	background-size: 20.9rem 20.9rem;
}

nav ul li#app_transmit-ios>a   {
	background-image: url(images/icon-transmit-ios.png);
	background-image: url(images/icon-transmit-ios-2016.png);
	-webkit-background-size: 18.1rem 18.1rem;
	background-size: 18.1rem 18.1rem;
}
nav ul li#app_transmit-ios:hover>a   {
	-webkit-background-size: 20.9rem 20.9rem;
	background-size: 20.9rem 20.9rem;
}

nav ul li#app_teaser3>a   {
	background-image: url(images/icon-teaser3.png);
	-webkit-background-size: 19.2rem 18.8rem;
	background-size: 19.2rem 18.8rem;
	/* The teaser ison sits too high up */
	background-position: center 2.6rem;
}
nav ul li#app_teaser3:hover>a   {
	-webkit-background-size: 20.9rem 20.9rem;
	background-size: 20.9rem 20.9rem;
	background-position: center 1.6rem;
}

nav ul li#app_firewatch>a     {
	background-image: url(images/icon-firewatch.png);
	-webkit-background-size: 19.7rem 19.2rem;
	background-size: 19.7rem 19.2rem;
}
nav ul li#app_firewatch:hover>a {
	-webkit-background-size: 23.4rem 23.1rem;
	background-size: 23.4rem 23.1rem;
}

nav ul li#app_goose
{
}

nav ul li#app_goose>a     {
	background-image: url(images/icon-goose@2x.png);
	-webkit-background-size: 19.6rem 17.6rem;
	background-size: 19.6rem 17.6rem;
}
nav ul li#app_goose:hover>a {
	-webkit-background-size: 23.5rem 21.1rem;
	background-size: 23.5rem 21.1rem;
}
nav ul li#app_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#app_goose:hover em
{
	transform: scale(.5) rotate(0deg) translateY(-3.0rem);
	opacity: 0;
}

nav ul li#app_nour
{
}

nav ul li#app_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#app_nour>a	 {
		background-image: url("https://food.game/images/emoji/emoji-donut.png");
	}
}

nav ul li#app_nour:hover>a {
	background-image: url("https://food.game/images/emoji/emoji-donut.gif");
	-webkit-background-size: 28.0rem auto;
	background-size: 28.0rem auto;
}
nav ul li#app_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#app_nour:hover em
{
	transform: scale(.5) rotate(0deg) translateY(-3.0rem);
	opacity: 0;
}

nav ul li .popover,
div#serial-alert
{
	position: absolute;
	width: 25.0rem;
	top: -9.0rem;
	background: white;
	border-radius: 1.0rem;
	padding: 2.0rem;
	font-size: 1.6rem;
	line-height: 2.0rem;
	font-weight: 200;
	color: #444;
/* 	visibility: hidden; */
	opacity: 0;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s 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;
}

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

nav ul li .popover p.sync {
	font-size: 1.4rem;
	line-height: 2.4rem;
	color: #41bb9c;
	font-weight: 200;
}

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

nav ul li#app_nour .popover
{
	left: -2.5rem;
}

nav ul li#app_nour:hover .popover
{
	top: -13.0rem;
}


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;
}

nav ul li#app_nova .popover { left: -2.4rem; }
nav ul li#app_goose .popover { left: -2.6rem; }
nav ul li#app_firewatch .popover { left: -2.6rem; }
nav ul li#app_coda .popover     { left: -3.0rem; }
nav ul li#app_transmit .popover { left: -2.0rem; }
nav ul li#app_candybar .popover { left: -4.0rem; }
nav ul li#app_prompt .popover   { left: -2.7rem; }
nav ul li#app_code-editor .popover { left: -2.7rem; }
nav ul li#app_transmit-ios .popover { left: -4.2rem; width: 28.0rem;}
nav ul li#app_statusboard .popover { left: -5.0rem; }
nav ul li#app_teaser3 .popover { left: -5.4rem; }
nav ul li#icon_playdate .popover { left: -5.1rem; }

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

/* "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
{
}

/* Blog stuff */

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

section#blog h2
{
	color: #44b9d0;
    color: var(--teal1);

}
section#blog a {
	color: #127093;
	/* border-bottom: .2rem solid #127093; */
	text-decoration: underline;
}

/* ! Support stuff */

section#support
{
	float: left;
	width: 100%;

	padding-top: 1em;

	background: #171717;
	color: #808080;

	z-index: 10;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);}

section#support h2 {
	text-align: center;
	margin-top: -3rem;
	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_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;
	line-height: 4.6rem;
}

footer p
{
	line-height: 1em;
}

/* Retina */

#t5-teaser {
	position: relative;
	margin-top: 3.2rem;

	width: 100%;
	height: 33rem;

	display: flex;
	align-items: center;
	justify-content: center;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#252730+0,2c2f3b+50 */
	background: #252730; /* Old browsers */
	background: -moz-linear-gradient(top, #252730 0%, #2c2f3b 50%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #252730 0%,#2c2f3b 50%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #252730 0%,#2c2f3b 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252730', endColorstr='#2c2f3b',GradientType=0 ); /* IE6-9 */

	overflow: hidden;
}

#t5-truck {
	background-image: url(../images/teaser-truck.png);
	background-size: 40.9rem 28.9rem;
	background-position: center;
	background-repeat: no-repeat;

	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;

	z-index: 2;

	transition: all 1s ease-in;
}

#t5-truck.blurred {
	-webkit-filter: blur(4rem);
	filter: blur(4rem);
	opacity: 0;
}

#t5-truck.not-blurred {
	-webkit-filter: blur(.0rem);
	filter: blur(.0rem);
	opacity: 1;
}

#t5-text {
	transition: all 1s ease-in;
	opacity: 0;

	text-align: center;
	font-style: italic;
	font-weight: 200;
	color: #767a84;

	z-index: 3;

	-webkit-font-smoothing: antialiased;
}

#t5-text.blurred {
	opacity: 1;
}

#t5-text.not-blurred {
	opacity: 0;
}

@media (-webkit-min-device-pixel-ratio:2) {
	#t5-truck {
		background-image: url(../images/teaser-truck@2x.png);
	}
}