@import url('https://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400i,700,700i|Raleway:100,100i,200,200i,300,300i,400,400i,700,700i&display=swap');

body
{
    padding: 0px;
    margin: 0px;
    background: black;
    --main-font: 'Raleway', sans-serif;
}

main
{
    background: url('./header-planet-key.svg') no-repeat 10px 5px / 570px 48px, 
                url('./header-sun-moon-and-planet.jpg') no-repeat 0px 107px,
                url('./header-starfield.png') repeat-x, 
                black;
    
    
    
    
    --color-body: #93C4C2;
    --color-body-large: #40807d;
    --color-appname: #638faf;
    --color-label1: #ffcd70;
    --color-label2: #ffa600;
    --color-label3: #ffc640;
    
    /* De facto left margin */
    --article-padding-left: 10%;
    --article-padding-right: 2%;

    --header-height: 252px;
    
    font-family: var(--main-font);
    
    color: var(--color-body);
    font-size: 12px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: grid;
    grid-template: "header" var(--header-height) "body" auto "footer" auto / 100%;
}

header
{
    position: absolute;
    left: 0px; 
    max-width: calc( 800px + ( 100% - 800px ) * 0.5 );
    width: 100%;
    height: 100%;
    margin: 0px;
    grid-area: header;
}

@media (min-width: 700px) {
    main
    {
        --header-height: 220px;
    }
}

header h1 {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0px; 
}
    

header h1 img
{
    display: block;
    position: absolute;
    right: 10px;
    bottom: 63px;
}

#tagline
{
    position: absolute;
    left: calc( var(--article-padding-left) - 3px);
    right: 30px;
    bottom: 12px;
    margin: 0px; 
    /* margin: auto 0px 12px 203px; */
        
    font-variant: small-caps;
    color: #d1b268;
    font-family: 'Gentium Book Basic', serif;
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    text-align: right;
    padding-right: 10px;
    padding-bottom: 6px;   
    border-bottom: 4px dotted #d1b268;
}
    
@media (min-width: 700px) {
    #tagline
    {
        left: 203px;
    }
}

#tagline strong
{
    font-variant: normal;
    text-transform: uppercase;
    color: white;
    font-weight: normal;
    text-indent: none;
    margin: 0px;
    padding: 0px;
}


.articles {
    top: 0px;
    grid-area: body;
    position: relative;
    box-sizing: border-box;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--article-padding-left);
    padding-right: var(--article-padding-right);
}

@media (min-width: 700px) {
    .articles
    {
        padding-left: 360px;
    }
}



h1, h2, h3 , figcaption
{
    font-family: 'Gentium Book Basic', serif;
    font-variant: small-caps;
    color: #D1B268;
    color: #d1bd8e;
    font-size: 200%;
    letter-spacing: 2px;
    margin-bottom: 8px;
    font-style: normal;
    text-transform: capitalize;
}

#screenshot1 .screenshot-color1 
{
   fill: var(--color-label1);
   color: var(--color-label1);
}

#screenshot1 .screenshot-color2
{
   fill: var(--color-label2);
   color: var(--color-label2);
}

#screenshot1 .screenshot-color3
{
   fill: var(--color-label3);
   color: var(--color-label3);
}
 
#screenshot1
{
    width: 360px;
    height: 460px;
    margin: 0px;
    position: relative;
}

@media (min-width: 700px) {
    #screenshot1
    {
        position: absolute;
        top: 40px;
        left: -10px;
    }
}

@media (max-width: 380px) {
    #screenshot1
    {
        margin-left: auto;
        margin-right: auto;
        width: calc( 100vw - var(--article-padding-left) - var(--article-padding-right) );
    }
    #screenshot1 figcaption
    {
        width: 320px;
    }
}
    
#screenshot1 > svg
{
    display: block;
    position: absolute;
}
    
    

/* We can't do 3d tranforms of individual elements in SVG - even from CSS. Nor can we set a 3D matrix. So we have to do the whole thing. */
#screenshot1 #baseImage 
{
    transform-origin: center;
    transform: perspective(600px) rotateY(23deg) rotateX(40deg) ;
    top: -60px;
    right: 75px;
}

#screenshot1 #overlay
{
    /* I have no idea where these have come from */
    top: 0px;
    right: 5px;
}

#screenshot1 #overlay circle
{
    filter: url("#shadow");
    stroke: none;
}

#screenshot1 figcaption
{
    position: absolute;
    bottom: 0px;
    right: 15px;
    transform: scale(0.83);
    transform-origin: bottom right;
    margin-bottom: 0px;
}

#screenshot1 ol
{
    display: block;
    padding: 0px;
}
#screenshot1 li
{
    display: inline;
}
figcaption svg { vertical-align: bottom; }

section
{
    padding-top: 40px;
}

section:first-child
{
    padding-top: 0px;
}


.item text , #screenshot1 #overlay text
{
    font-family: 'Raleway', sans-serif;
    fill: #603913;
    fill: black;
    stroke: #603913;
    stroke: black;
    stroke-width: 0.5px;
    font-weight: 900;
    text-anchor: middle;
    dominant-baseline: middle;
    font-size: 12px;
}
figcaption .item text {
    font-size: 14px;
}

h1.summary, p.summary {
    font-family: var(--main-font);
    font-style: italic;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 15px;
    line-height: 30px;
    /*letter-spacing: .33px;*/
    text-transform: uppercase;
    color: var(--color-body-large);
    padding-left: 0px;
    font-style: normal;
}


p {
    font-style: italic;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 24px;
    letter-spacing: .4px;
}

p + p , h1.summary + p , figure + p {
   text-indent: 20px;
}


span.product
{
    text-transform: uppercase;
}
span.technical
{
    font-weight: 700;
}

span.informal::before
{
    content: '\002018';
}

span.informal::after
{
    content: '\002019';
}

footer
{
    position: relative;
    grid-area: footer;
    font-family: "Arial";
    font-weight: bold;
    font-size: 8px;
    background: linear-gradient( 0deg, #1B1464 0%, #91C2C1 84.84%, rgba(0,255,255,0.000) 100%);
    color: white;
    margin-top: 30px;
    padding-top: 16px;
    opacity: 0.9;
}

footer :first-child
{
    margin: 0px;
    padding: 0px;
    padding-bottom: 10px;
    padding-left: 10%;
    font-style: normal;
    line-height: 180%;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.66;

}