html 
{
    height: 100%;
}

body
{   
    box-sizing: border-box;
    color: #fff5d5;
    text-shadow: 2pt 2pt #00000033;
    text-align: left;
    font-family: 'Palanquin', sans-serif;
    font-weight: 700;
    line-height: 1.3;
    background: #1c1c22;
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;
    width: 100%;
    height: 100%;
    padding: 10pt 20pt 10pt 20pt;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
}

div.pageHeader
{
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    align-content: flex-start;
    padding: 20pt 0pt 4pt 0pt;
    margin: 0pt;
    flex-shrink: 0;
}

div.header
{
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    padding: 20pt 0pt 4pt 0pt;
    margin: 0pt;
}

div.content
{
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex-direction: column;
    align-content: stretch;
    flex-wrap: wrap;
    padding: 0;
}

div.projects
{
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    align-content: center;
    flex-grow: 0;
    flex-wrap: wrap;
    padding: 0pt;
    margin: 0pt;
}

div.project
{
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    flex-direction: column;
    align-content: stretch;
    flex-grow: 0;
    flex-wrap: nowrap;
    padding: 0pt;
    margin: 0pt;
    max-width: 560pt;
}

div.projectContent
{
    box-sizing: border-box;
    background: #2c2e55;
    padding: 5pt;
    margin: 5pt;
    box-shadow: 12pt 18pt 15pt #10111f;
}

div.cell
{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-grow: 1;
    padding: 5pt;
    margin: 0pt;
}

div.cellText
{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-grow: 1;
    padding: 0pt 10pt 0pt 10pt;
    margin: 0pt;
}

div.cellSpace
{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    flex-grow: 0;
    height: 20pt;
    padding: 0pt;
    margin: 0pt;
}

h1 
{
    display: block;
    font-size: 35pt;
    padding: 0;
    margin: 0;
}

h2 
{
    display: block;
    font-size: 28pt;
    padding: 20pt 0pt 0pt 0pt;
    margin: 0;
	color: #ABCCFF;
}

h3
{
    display: block;
    font-size: 20pt;
    padding: 0;
    margin: 0;
	color: #ABCCFF;
}

img 
{
    display: block;
    padding: 0;
    margin: 0;
    max-width:100%;
    max-height:100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    flex-shrink:  1;
}


iframe 
{
    display: block;
    padding: 0;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}

p
{
    padding: 0;
    margin: 0pt 0pt 0pt 0pt;
    font-size: 14pt;
}

p.about
{
    max-width: 650pt;
    padding: 0;
    margin: 5pt 0pt 5pt 0pt;
    font-size: 14pt;
}

p.annotation
{
    padding: 0;
    margin: 5pt 0pt 5pt 0pt;
    font-size: 12pt;
}

ul
{
    padding: 0;
    margin: 10pt 20pt 10pt 40pt;
    font-size: 14pt;
}

span.line 
{
    display: inline-block;
}

a
{
    text-decoration: none;
    color: #FFDFBB;
}

a:hover 
{
    color: #A478FF;
    text-shadow: 2pt 2pt #000000;
}

a.mainlink
{
    text-decoration: none;
    color: #FFDFBB;
    display: block;
    font-size: 20pt;
    padding: 0;
    margin: 0;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a.mainlink:link a.mainlink:visited a.mainlink:active 
{
    color: #FFDFBB;
}

a.mainlink:hover 
{
    color: white;
    text-shadow: 2pt 2pt #00000077;
}