/* Global style */
:root {
    --pim-foreground-1:White;
    --pim-background-1:#D00;

    
    --pim-foreground-2:White;
    --pim-background-2:#A00;

    --pim-foreground-3:White;
    --pim-background-3:Black;

    --pim-background-highlight:#FAA;
}
.c1 {
    color: var(--pim-foreground-1);
    background-color: var(--pim-background-1);
}
.c2 {
    color: var(--pim-foreground-2);
    background-color: var(--pim-background-2);
}
.c3 {
    color: var(--pim-foreground-3);
    background-color: var(--pim-background-3);
}
body {
    font: 1em monospace;
    color: var(--pim-foreground-3);
    background: var(--pim-background-3);
    background-size: cover;
    margin:0;
    min-height:calc(100vh - 50px);
    width:100%;
}
a {
    color:var(--pim-foreground-3);
}
header {
    width: 100%;
    text-align: center;
    vertical-align:middle;
    font: 2.5em monospace;
    color: var(--pim-foreground-1);
    background: var(--pim-background-1);
    padding: 1em 0;
}
main {
    width:calc(100% - 20px);
    max-width:1000px;
    margin:auto;
    margin-bottom:50px;
    padding:10px;
    font: 1.5em monospace;
    text-align: center;
    background: var(--pim-background-3);
    color: var(--pim-foreground-3);
}
footer {
    position: fixed;
    bottom:0;
    width:100%;
    text-align:center;
    height:50px;
    line-height:50px;
    background-color: var(--pim-background-1);
    color: var(--pim-foreground-1);

}
footer > a {
    color: var(--pim-foreground-1);
}
nav {
    background: var(--pim-background-2);
    color: var(--pim-foreground-2);
    text-align: center;
}
nav > a {
    margin: .2em;
    padding: .5em;
    min-width: 5em;
    font:2em monospace;
    color: var(--pim-foreground-2);
    text-decoration:none;
    display: inline-block;
    
    border-radius: .5em;
    background: var(--pim-background-1);
    transition: background .2s linear;

}
nav > a:hover {
    background: var(--pim-background-highlight);
}
input[type="submit"] {
    height: 2em;
}
input[type="text"] {
    height: 1.5em;
    width: 15em;
}
table {
    display: inline-table;
}
ul {
    display:inline-block;
    list-style:none;
}

/* Mobile optimization */
@media (orientation: portrait) {
    body {
        font: 3vw sans-serif;
    }
    nav > a {
        margin: 5px;
        font:5vw sans-serif;
    }
    footer {
        position: fixed;
        bottom:0;
        width:100%;
        text-align:center;
        height:50px;
        line-height:50px;
    
    }
    input[type="submit"] {
        height:4vw;
    }
    input[type="text"] {
        height:3vw;
        width:30vw;
    }
}