mdl.css

body{
 font-family: Roboto, sans-serif;
 background: #2196f3;
}
.top{
 background: #1976d2;
 height: 150px;
 -webkit-box-shadow: 0px 1px 8px #2c2c2c;
 -moz-box-shadow: 0px 1px 8px #2c2c2c;
 -ms-box-shadow: 0px 1px 8px #2c2c2c;
}
.menu{
 padding-left: 10px;
 padding-top: 10px;
 color: white;
 font-weight: 400;
}
.material-icons{
 color: white;
}
h4, .today{
 color: white;
 text-align: center;
 margin-top: 0;
}
.today{
 margin-bottom: 0;
}
h4{
 margin-top: 0;
 margin-bottom: 0;
}
a{
 color: white;
 font-weight: 400;
 text-decoration: underline;
}
.menu-a{
 color: black;
 text-decoration: none;
 font-weight: 400;
}
.card{
 background: white;
 display: inline-block;
 width: 43.7%;
 margin: 5px;
 padding: 5px;
 -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 -ms-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.title{
 font-weight: 500;
}
.dl{
 background: #4caf50;
 color: white;
}
.desc{
 font-style: italic;
}
.card:nth-child(odd){
 float: left;
}
.card:nth-child(even){
 float: right;
}
.space{
 width: 100%;
 color: #2196f3;
}
@media screen and (orientation: landscape){
 .card{
  width: 40%;
 }
}