:root
{
    --main-colour-plain: #009595;
    --main-colour-half: rgba(0, 149, 149, 0.5);
    --main-colour-transparent: rgba(0, 149, 149, 0);
}

*
{
    margin: 0;
    padding: 0;

    box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    -webkit-box-sizing: padding-box;

    transition-property: none;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    -moz-transition-property: none;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-property: none;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-property: none;
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease-in-out;
}

h1
{
    font-size: 2em;
}

a img
{
    border: none;
}

a:link,
a:visited
{
    color: inherit;
    text-decoration: none;
}

p a:link,
p a:visited,
ul a:link,
ul a:visited,
dl a:link,
dl a:visited
{
    color: var(--main-colour-plain);
}

h1 a:link,
h1 a:visited,
h2 a:link,
h2 a:visited
{
    border-bottom: 1px dotted;
}

dl > dt:first-child,
dl > dd + dt
{
    margin-top: 5px;
}

dl > dt + dd
{
    margin-top: 2px;
}

dl > dt
{
    font-weight: bold;
}

dl > dd
{
    margin-left: 10px;
}

dl.inline-list > dd
{
    display: inline-block;
}

dl.inline-list > dd + dd
{
    margin-left: 0;
}

dl.inline-list > dd:not(.last)::after
{
    content: ", ";
    margin: 0 0.5ex 0 -0.5ex;
}

.column-2
{
    display: inline-block;
    width: calc(50% - 2em);
    vertical-align: top;
}

body
{
    font-family: Linux Libertine O;
    font-size: 20px;

    color: #F8F8F8;
    background: #2D2D2D;
}

header
{
    padding: 2em 3em 0;
    background: linear-gradient(to bottom, var(--main-colour-half), var(--main-colour-transparent));
}

header > hgroup
{
    text-align: center;
}

header > hgroup > h1,
header > hgroup > h2,
header > hgroup > h3
{
    display: inline-block;
    width: 49%;
    text-align: left;
}

header > hgroup > h2
{
    text-align: right;
}

header > hgroup > h3
{
    width: 98%;
    padding: 0 10px;
}

main
{
    display: flex;
    flex-direction: column;

    width: 90%;
    max-width: 1600px;

    margin: 2em auto;
}

nav.menu
{
    margin: 7px auto;
    text-align: right;
}

nav.menu > a
{
    margin: 0 7px;
    padding: 3px 14px;

    background-color: rgba(0, 0, 0, 0.5);

    border-radius: 5px;
}


main section
{
    padding: 0 1em;
}

main > h1,
section > h1
{
    margin: 1em -1em 0;
    padding: 10px;
    border-bottom: 1px solid var(--main-colour-plain);
    font-size: 1.5em;
}

main h2,
main p,
main ul,
main dl
{
    margin: 1em 0;
}

main dd > dl
{
    margin: 0;
}

section > h1 ~ h2
{
    padding-left: 30px;
    font-size: 1.25em;
}

main p,
main ul,
main dl
{
    padding: 0 2em;
}

main ul
{
    padding-left: 4em;
}

main ul ul
{
    padding-left: 2em;
}

main pre
{
    margin: 0 50px;
    padding: 20px;
    border: 1px dashed white;
}

main code
{
    line-height: 2em;
}

.project-group
{
    display: flex;
    padding: 0 2em;

    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
}

.project
{
    margin: 30px 0;
    padding: 1em 2em;

    text-align: begin;

    vertical-align: top;

    background: #232323;

    border-radius: 5px;

    box-shadow: 2px 1px 3px white;

    transition-property: box-shadow;
    -moz-transition-property: box-shadow;
    -webkit-transition-property: box-shadow;
    -o-transition-property: box-shadow;
}

.project-group > h1,
.project-group > h2,
.project-group > hgroup
{
    flex: 1 0 100%;
}

@media ( min-width: 1025px )
{

.project
{
    width: calc(50% - 2em /* padding */ - 1em /* margin */ - 2em /* padding parent */);
}

}

@media ( max-width: 1024px ) and ( min-width: 767px )
{

.project
{
    width: 100%%;
}

}

@media ( max-width: 768px )
{

.project
{
    width: 100%;
}

}

.project:hover
{
    box-shadow: 2px 1px 3px var(--main-colour-plain);
}

.project h1
{
    padding-bottom: 10px;

    font-size: 2em;

    text-align: center;

    color: var(--main-colour-plain);

    border-bottom: 1px dotted var(--main-colour-plain);
}

main .project p
{
    padding: 0;
}

footer
{
    margin: 3em 0 0;
    padding: 1em;

    background: linear-gradient(to top, var(--main-colour-half), var(--main-colour-transparent) 50%);
    text-align: center;
}

footer > p
{
    display: inline-block;
    width: 450px;
    text-align: left;
}

p.licence
{
    text-align: right;
}

footer > p.licence
{
    width: calc(100% - 450px - 2em);
}