@font-face {
    font-display: swap;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

body {
    background: #292929;
}

.logo {
    width: 50vw;
    max-width: 250px;
    margin: 25px auto;
    fill: white;
}

.content {
    width: 90vw;
    margin: 0 auto;
    color: white;
    text-align: center;
}

.content.error {
    color: red;
}

.content img {
    display: block;
    margin: 0 auto;
    max-width: 90vw;
    max-height: 50vh;
    width: auto;
    height: auto;
    box-shadow: 0 0 25px 6px rgba(255, 255, 255, 0.42);
}

.content a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    display: block;
    margin: 40px auto;
    background: #3d3da5;
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    clear: both;
    max-width: 30vw;
    min-width: 300px;
}

.content a span:before {
    content: '';
    background: url('../images/download-button.svg') center no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 10px;
    padding: 5px 0;
}



.content a span:before {
    vertical-align: middle;
    line-height: 34px;
}

@media (prefers-color-scheme: light) {
    body {
        background: #efefef;
    }

    .logo {
        fill: #292929;
    }

    .content {
        color: #292929;
    }

    .content.error {
        color: #e10505;
    }

    .content img {
        box-shadow: 0 0 25px 6px rgba(0, 0, 0, 0.7);
    }
}