html { 
    background: black url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-size: 1em;
}

body { font-family:Arial,sans-serif; color:#eee; }
div.container { top:0; left:0; width:100%; height:100%; position:absolute; display:table; }
div.container .wrap { display:table-cell; vertical-align:middle; text-align:center; }
a { text-decoration:none; color:#aaa; padding:10px; }
a:hover { color:#fff; }

.logo svg {
    width: 400px;
    margin: 1em;
}

.links {
    bottom: 10px;
    font-size: 2rem;
    float:left;
    width:100%;
    position:absolute;
    margin-bottom:2em;
}

.links .svg-inline--fa {
    height: 3vw;
}

.patches { float:right; position:absolute; top:16px; right:16px; display:flex; flex-direction:column; }
.patch { width:100px; height:100px; margin:16px; }
.patch-ct { background: url(images/patch_ct.png) no-repeat center center; }
.patch-aph { background: url(images/patch_aph.png) no-repeat center center; }
.patch-stb { background: url(images/patch_stb.png) no-repeat center center; }
.patch-empact { background: url(images/patch_empact.png) no-repeat center center; }

@media screen and (max-width: 600px) {
    .logo svg { width: 80vw; }
    .links { font-size:1.5rem; position:relative; float:none; bottom:-1rem; }

    .patches { top:0; right:0; float:none; position:relative; flex-direction:row; justify-content:center; flex-wrap:wrap; }
    .patch { background-size:cover; width:25vw; height:25vw; padding:0; margin:0.5rem 1.5rem; }
}

@media screen and (max-height: 550px) {
    .logo svg { height: 40vh; }
    .links { font-size:1.2rem; position:relative; float:none; bottom:-1rem; }
    .patches { top:0; right:0; float:none; position:relative; flex-direction:row; justify-content:center; flex-wrap:wrap; }
    .patch { background-size:cover; width:20vh; height:20vh; margin:0rem 1rem; }
}