* {
    padding: 0;
    margin: 0;  
    font-family: sans-serif;
    font-size: 14px;
}

body {
    min-height: 100vh;
    background: #111111 url(images/background.jpg) no-repeat center center;
    background-size: cover;
}

.syno, .plex, .photo {
    transition: opacity 0.4s linear 0s;
    opacity: 0.5;
    display: inline-block;
}

.syno {
    background: url(images/synology.png) no-repeat center;
    background-size: auto 150px;
    width: 48%;
    height: 150px;
}

.plex {
    background: url(images/plex.png) no-repeat center;
    background-size: auto 150px;
    width: 48%;
    height: 150px;
}

.photo {
    background: url(images/photos.png) no-repeat center;
    background-size: auto 150px;
    width: 100%;
    height: 150px;
    margin: 15px auto;
}

.plex a, .syno a, .photo a {
    display: block;
    width: 100%;
    height: 100%;
}

.syno:hover, .plex:hover, .photo:hover {
    -moz-transition: opacity 0.4s linear 0s;
    -webkit-transition: opacity 0.4s linear 0s;
    transition: opacity 0.4s linear 0s;
    opacity: 1;
}

/* Media queries */
@media only screen and (max-width: 1672px) {
    body {
        background-size: auto 100%;
    }

    .syno, .plex, .photo {
        background-size: 300px auto;
        width: 100%;
        height: 100px;
        margin: 25px 5px;
    }
}

@media only screen and (max-width: 850px) {
    .syno, .plex, .photo {
        background-size: auto 100px;
        width: 100%;
        height: 100px;
        margin: 25px 5px;
    }
}

@media only screen and (max-height: 400px) {
    .syno, .plex, .photo {
        margin: 5px 5px;
    }
}