* {margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body {
    font-family: monospace, Verdana, sans-serif;
    background : #333;
    color : #CCC;
    display : flex;
    flex-direction: column;
}

#content {
    position : relative;
    height : calc(100% - 100px);
}

#content .center {
    position : absolute;
    top : 50%;
    left : 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    width : 100%;
    color : #1060AD;
}

#logo {
    width : 250px;
    margin-bottom : 10px;
}

#logo path {
    animation : loopfill 3s infinite alternate ease-in-out;
}

a {
    color : #CCC;
    text-decoration: none;
    transition : color 0.2s ease-in-out;
    display: inline-block;
    padding : 5px;
    text-transform: lowercase;
}
a:hover {
    color : #FFF;
}

#footer {
    height : 100px;
    display : flex;
    justify-content: space-between;
    align-items: flex-end;
}

#footer > * {
    padding : 10px
}

#footer span {
    color : #1060AD;
}

.error {
    display : inline-block;
    color : #de383d;
    font-weight: bold;
}

.hide {
    display : none;
}

@keyframes loopfill {
    0%   { fill: #FFF; }
    100% { fill: #777; }
}