style.css

@import url(https://code.getmdl.io/1.3.0/material.blue_grey-red.min.css);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext);

.daily-photo .mdl-layout {
    background: center no-repeat #ccc;
    background-size: cover;
}

@media (orientation: landscape) {
    .daily-photo .mdl-layout {
        background-image: url("https://source.unsplash.com/1920x1080/daily?nature");
    }
}

@media (orientation: portrait) {
    .daily-photo .mdl-layout {
        background-image: url("https://source.unsplash.com/900x1600/daily?nature");
    }
}

.next-task {
    position: absolute;
    bottom: 12%;
    margin: 0 auto;
    width: 100%;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 5px black;
    font-size: 1.3em;
}
.next-task h2 {
    font-size: 2em;
    margin: 0.3em 0 0.6em 0;
}
.next-task h2 a, div.mdl-card a {
    text-decoration: none;
}

.task-card a i {
    font-size: 1em;
    position: relative;
    top: 2px;
}

/* Ugly hack to align search button.
 * Without this, the search button is slightly to the top
 * of the input field and the refresh button. */
label[for="main-search-expandable"] {
    margin-top: 3px;
}