* {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
}

body {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
    height: 100vh;
}

header, article, footer {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

header,
footer {
    flex-grow: 1;
    background-color: #f8f8f8;
}

article {
    flex-grow: 10;
}

.logo {
    width: 30vmin;
    padding: calc(30vmin * 0.11155378); /* 0.11155378 is ratio of link to logo width */
    max-width: 80vw;
}

.error .code {
    font-size: 20vmin;
    color: #c03b;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 0.5vmin;
    -webkit-text-stroke-color: #c03b;
}

.error .msg {
    color: #fff;
    font-size: 8vmin;
    background-color: #c03b;
    padding: 0 2vmin;
}

.hint {
    color: #1b263b;
    padding-top: 8vmin;
    font-size: 3vmin;
    max-width: 60vw;
}

.hint a {
    color: #39c;
    text-decoration: none;
}

.hint a:hover {
    text-decoration: underline;
}

.copyright {
    font-size: 1vmax;
    color: #999;
}