@charset "utf-8";

/* BLACK */

nav,
#main,
body.paused figure#device-demo:after,
button#pdt_submit,
#media body,
#media header,
#excerpt body,
#excerpt header,
#excerpt a#readmore:hover,
#excerpt footer
{
    color: rgba(0,0,0,1);
}

hr,
#excerpt #main a:hover
{
    border-bottom-color: rgba(0,0,0,1);
}

nav
{
    border-color: rgba(0,0,0,.2);
}

/* ---------- */



/* WHITE */

body,
body:after,
section#conclusion,
a#jumper
{
    color: rgba(255,255,255,1);
}

body.paused figure#device-demo:after,
button#pdt_submit:active,
html#media,
#media body,
#media header,
#media #main,
#media footer,
#excerpt body,
#excerpt #main
{
    background-color: rgba(255,255,255,1);
}

form#pdt_form
{
    border-color: rgba(255,255,255,1); 
}

footer
{
    color: rgba(255,255,255,0.65);
}

/* ---------- */



/* LIGHTGRAY */

#main img#hero,
#ar img.ar
{
    border-color: rgba(200,200,200,1);
}

::placeholder
{
    color: rgba(200,200,200,1);
}

/* ---------- */



/* GRAY */

body,
header,
button#pdt_submit[disabled],
#excerpt footer
{
    background-color: rgba(121,127,132,1);
}

h1#logotype:before,
h1#logotype:after,
#media footer,
#media body
{
    color: rgba(121,127,132,1);
}

/* ---------- */



/* YELLOW */

header,
#excerpt a#readmore
{
    color: rgba(255,205,63,1);
}

#pitch,
button#pdt_submit,
#excerpt header
{
    background-color: rgba(255,205,63,1);
}

input:focus,
button:focus,
#excerpt #main a
{
    border-color: rgba(255,205,63,1);
}

/* ---------- */



/* DARK YELLOW */

p.alert,
#media h2
{
    color: rgba(241,174,50,1);
}

a.download:hover,
#faq article:target
{
    border-color: rgba(241,174,50,1);
}

/* ---------- */



/* PURPLE */

footer,
section#conclusion,
a#jumper
{
    background-color: rgba(120,0,255,1);
}

button
{
    border-color: rgba(120,0,255,1);
}

/* ---------- */



/* RED */

body:after
{
    background-color: rgba(255,0,0,0.85);
}

/* ---------- */



/* GRADIENTS AND SHADOWS */

a#jumper
{
    box-shadow: 0 1rem 3rem rgba(120,0,255,0.25);
}

body.paused figure#device-demo:after
{
    box-shadow: 0 1rem 3rem rgba(0,0,0,.5);
}

#teaser header
{
    background-image: radial-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25), rgba(121,127,132,1));
}

#excerpt footer
{
    background-image: url("/edge/waves.png"), radial-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65), rgba(121,127,132,1));
}

/* ---------------------------------------------------------------- */
/*                          BEGIN P3 COLORS                         */
/* ---------------------------------------------------------------- */

@supports (color: color(display-p3 0 0 0 / 1)) {
    
    /* BLACK */
    
    nav,
    #main,
    body.paused figure#device-demo:after,
    button#pdt_submit,
    #media body,
    #media header,
    #media #main,
    #excerpt body,
    #excerpt header,
    #excerpt #main,
    #excerpt a#readmore:hover,
    #excerpt footer
    {
        color: color(display-p3 0 0 0 / 1);
    }
    
    hr,
    #excerpt #main a:hover
    {
        border-bottom-color: color(display-p3 0 0 0 / 1);
    }
    
    nav
    {
        border-color: color(display-p3 0 0 0 / 0.2);
    }
    
    /* ---------- */
    
    
    
    /* WHITE */
    
    body,
    body:after,
    section#conclusion,
    a#jumper
    {
        color: color(display-p3 1 1 1 / 1);
    }
    
    body.paused figure#device-demo:after,
    button#pdt_submit:active,
    html#media,
    #media body,
    #media header,
    #media #main,
    #media footer,
    #excerpt body,
    #excerpt #main
    {
        background-color: color(display-p3 1 1 1 / 1);
    }
    
    form#pdt_form
    {
        border-color: color(display-p3 1 1 1 / 1); 
    }
    
    #teaser footer
    {
        color: color(display-p3 1 1 1 / 0.65);
    }
    
    /* ---------- */
    
    
    
    /* LIGHTGRAY */
    
    #main img#hero,
    #ar img.ar
    {
        border-color: color(display-p3 0.78 0.78 0.78 / 1);
    }
    
    ::placeholder
    {
        color: color(display-p3 0.78 0.78 0.78 / 1);
    }
    
    /* ---------- */
    
    
    
    /* GRAY */
    
    body,
    header,
    button#pdt_submit[disabled],
    #excerpt footer
    {
        background-color: color(display-p3 0.48 0.50 0.52 / 1);
    }
    
    h1#logotype:before,
    h1#logotype:after,
    #media body,
    #media footer
    {
        color: color(display-p3 0.48 0.50 0.52 / 1);
    }
    
    /* ---------- */
    
    
    
    /* YELLOW */
    
    #teaser header,
    #excerpt a#readmore
    {
        color: color(display-p3 1 0.80 0.25 / 1);
    }
    
    #pitch,
    #teaser button#pdt_submit,
    #excerpt header
    {
        background-color: color(display-p3 1 0.80 0.25 / 1);
    }
    
    #teaser input:focus,
    #teaser button:focus,
    #excerpt #main a
    {
        border-color: color(display-p3 1 0.80 0.25 / 1);
    }
    
    /* ---------- */
    
    
    
    /* DARK YELLOW */
    
    #media p.alert,
    #media h2
    {
        color: color(display-p3 0.95 0.68 0.17 / 1);
    }
    
    a.download:hover,
    #faq article:target
    {
        border-bottom-color: color(display-p3 0.95 0.68 0.17 / 1);
    }
    
    /* ---------- */
    
    
    
    /* PURPLE */
    
    footer,
    section#conclusion,
    a#jumper
    {
        background-color: color(display-p3 0.47 0 1 / 1);
    }
    
    button
    {
        border-color: color(display-p3 0.47 0 1 / 1);
    }
    
    /* ---------- */
    
    
    
    /* RED */
    
    body:after
    {
        background-color: color(display-p3 1 0 0 / 0.85);
    }
    
    /* ---------- */
    
    
    
    /* GRADIENTS AND SHADOWS */
    
    a#jumper
    {
        box-shadow: 0 1rem 3rem color(display-p3 0.47 0 1 / 0.25);
    }
    
    body.paused figure#device-demo:after
    {
        box-shadow: 0 1rem 3rem color(display-p3 0 0 0 / 0.5);
    }
    
    #teaser header
    {
        background-image: radial-gradient(color(display-p3 1 1 1 / 0.25), color(display-p3 1 1 1 / 0.25), color(display-p3 0.48 0.50 0.52 / 1));
    }
    
    #excerpt footer
    {
        background-image: url("/edge/waves.png"), radial-gradient(color(display-p3 1 1 1 / 0.65), color(display-p3 1 1 1 / 0.65), color(display-p3 0.48 0.50 0.52 / 1));
    }
}