@charset "utf-8";

:root
{
    --page-bg: var(--brand-yellow);    
    --text: var(--screen-black);
}


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

    body
    {
        padding-top: 14rem;
    }
}

@media screen and (min-width: 670px)
{
    body
    {
        padding-top: 5.5rem;
    }
}

h1
{
    padding: 8rem 0 16rem 0;
    font-size: 1.8em;
	position: relative;
    font-weight: 700;
    text-align: center;
    margin-top: 0;
}

nav
{
    --page-bg: var(--psd-mid-gray);    
    --text: var(--white);
}

#update-oct nav
{
    --page-bg: var(--purple);    
    --text: var(--white);
}

#update header
{
    margin-top: 0;
    position: relative;
    border-bottom: 1px solid;
    background-color: var(--psd-mid-gray);
}

#update-oct header
{
    background-color: var(--purple);
    position: relative;
}

header h1
{
    color: var(--white);
}

#update-oct nav.top a
{
    background-image: url("../images/playdate-logo-white.916601128b08.svg");
}

#update-oct nav.top a::before
{
    color: white;
}

@media screen and (min-width: 480px)
{ 
    #checklist h3
    {
        padding-left: 0;
        left: -2rem;
        position: relative;
    }
}

#checklist h3:before
{
    content: "✔︎";
}

#update-oct em
{
    font-weight: 700;
    font-style: normal;
}

header:after
{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: -0.1rem;
    right: 0;
    background-image: url("../images/update-dec/UpdateDecember2019Header.46bdb130b8ca.svg");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 75rem;
    opacity: 0.65;
}

#update-oct header:after
{
    background-image: url("../images/update-oct/UpdateOctober2020Header.a141db4a47a9.svg");
}

figure#rf-testing img
{
    height: auto;
    width: auto;
    position: static;
}

figure#jp
{
    background-image: url("../images/update-dec/jp.18b8edb0f7ae.jpg");
    background-size: contain;
    height: 60rem;
}

figure#devs
{
    background-image: url("../images/update-dec/devs.6971a09e8bfe.jpg");
    background-size: contain;
    height: 60rem;
}

figure#s1
{
    background-image: url("../images/update-oct/s1.f5b26944fdd9.png");
    background-size: contain;
    height: 30rem;
}

figure#hardware
{
    background-image: url("../images/update-oct/Playdate-hardware.933a1b18fde4.png");
    background-size: contain;
    height: 60rem;
}

figure#certs
{
    background-image: url("../images/update-oct/cert-logos.fea383f1bdb0.svg");
    background-size: contain;
    height: 14rem;
}

figure#packaging
{
    background-image: url("../images/update-oct/packaging.1a37efcc085c.jpg");
    background-size: contain;
    height: 60rem;
}

figure#packaging-open
{
    background-image: url("../images/update-oct/packaging-open.6eb8e43bac9d.jpg");
    background-size: contain;
    height: 60rem;
}

figure#sdk
{
    background-image: url("../images/update-oct/sdk-screenshot.74dc5018a37d.png");
    background-size: contain;
    height: 60rem;
}

figure#sample-1,
figure#sample-2,
figure#sample-3,
figure#sample-4
{
    background-size: contain;
    height: 48rem;
    max-width: 80rem;
    image-rendering: -webkit-crisp-edges;
    image-rendering: crisp-edges;
    background-color: black;
    padding: 2rem;
    background-size: 80rem 48rem;
    border-radius: 0.8rem;
    cursor: pointer;
}

#update-oct figure figcaption
{
    position: relative;
    top: 50rem;
    font-size: 0.65em;
}

#update-oct figure#sample-2 figcaption
{
    top: 0.5rem;
}

figure#sample-1
{
    background-image: url("../images/update-oct/nightmare-death.3c5a0b42a73d.gif");
}

figure#sample-2 video
{
    height: 48rem;
    border-radius: 0;
}

figure#sample-3
{
    background-image: url("../images/update-oct/final_roly.9c6f9c9359c4.gif");
}

figure#sample-4
{
    background-image: url("../images/update-oct/octOK.opt.1c5c44a44e25.gif");
}

.reduce-motion figure#sample-1,
figure#sample-1.still
{
    background-image: url("../images/update-oct/still-nightmare-death.90f938f6472c.gif") !important;
}

.reduce-motion figure#sample-3,
figure#sample-3.still
{
    background-image: url("../images/update-oct/still-final_roly.a521e7689794.gif") !important;
}

.reduce-motion figure#sample-4,
figure#sample-4.still
{
    background-image: url("../images/update-oct/still-driver.54f7ade8b1d4.gif") !important;
}

figure#wired
{
    background-image: url("../images/update-oct/wired-2020.11adede4fb40.png");
    background-size: contain;
    height: 60rem;
}

figure#rf-testing video
{
    height: 54rem
}

figure#case video
{
    height: 54rem;
}

figure#factory video
{
    height: 54rem;
}

span.trademark
{
	margin-right: -0.1em;
}