body
{
margin: 0px;
background: #ffffff;
font-family: sans-serif;
}

div.seven {
font-family: serif;
float: right;
position: absolute;
top: 4px;
right: 4px;
border: 2px solid #808080;
font-size: 200%;
}

div.seven a {
margin: 2px;
text-decoration: none;
color:#000000;
}


.black
{
color: #7f7f7f;
-webkit-text-fill-color: #cccccc;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #7f7f7f;
text-fill-color: #cccccc;
text-stroke-width: 0.03em;
text-stroke-color: #7f7f7f;
}

.red
{
color: #ff0000;
-webkit-text-fill-color: #ff9999;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #ff0000;
text-fill-color: #ff9999;
text-stroke-width: 0.3em;
text-stroke-color: #ff0000;
}

.green
{
color: #00cc00;
-webkit-text-fill-color: #99ff99;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #00cc00;
text-fill-color: #99ff99;
text-stroke-width: 0.03em;
text-stroke-color: #00cc00;
}

.yellow
{
color: #ffa000;
-webkit-text-fill-color: #ffff33;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #ffa000;
text-fill-color: #ffff33;
text-stroke-width: 0.03em;
text-stroke-color: #ffa000;
}

.blue
{
color: #0000ff;
-webkit-text-fill-color: #9999ff;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #0000ff;
text-fill-color: #9999ff;
text-stroke-width: 0.03em;
text-stroke-color: #0000ff;
}

.magenta
{
color: #8000ff;
-webkit-text-fill-color: #cc99ff;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #8000ff;
text-fill-color: #cc99ff;
text-stroke-width: 0.03em;
text-stroke-color: #8000ff;
}

.cyan
{
color: #0080ff;
-webkit-text-fill-color: #66b3ff;
-webkit-text-stroke-width: 0.03em;
-webkit-text-stroke-color: #0080ff;
text-fill-color: #66b3ff;
text-stroke-width: 0.03em;
text-stroke-color: #0080ff;
}

.black-background
{
background: #eeeeee;
border: 1px solid #7f7f7f;
}

.blue-background
{
background:#ccccff;
border: 1px solid #0000ff;
}

.cyan-background
{
background: #b3d9ff;
border: 1px solid #0080ff;
}

h1
{
margin: auto;
text-align: center;
font-size: 800%;
font-weight: normal;
}

div.box
{
margin-left: 10%;
margin-right: 10%;
padding-left: 1em;
padding-right: 1em;
margin-bottom: 1em;
}

h2
{
font-size: 200%;
display: inline-block;
background:#ccccff;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 2px;
margin-top: 0.5em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.25em;
padding-bottom: 0.25em;
}

.blue-text, a
{
color: #0000ff;
}

.cyan-text
{
color: #0080ff;
}

.right
{
text-align: right
}

div.screenshots
{
display: flex;
justify-content: space-around;
margin-top: 1em;
margin-bottom: 1em;
margin-left: -0.5em;
margin-right: -0.5em;
}

div.screenshots a
{
margin-left:0.5em;
margin-right:0.5em;
}

div.screenshots a img
{
width: 100%;
}

@media (max-width: 480px)
{
    div.seven
    {
        font-size: 150%;
    }

    h1
    {
        font-size: 400%;
    }

    div.box, h2
    {
        margin-left: 0em;
        margin-right: 0em;
    }
}