body,h2,h3,h4,h5 {
    font-family: "Roboto", sans-serif
}
h1 {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    letter-spacing: .4em
}
h2 {
    font-family: "Roboto", sans-serif;
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.h01 {
    width: 100%;
    text-align: center;
    background-color: gray;
    font-size: 50%;
}
.h11 {
    width: 10%;
    background-color: darkgray;
    font-size: 50%;
}
.h12 {
    width: 15%;
    background-color: darkgray;
    font-size: 50%;
}
.d01 {
    width: 10%;
    font-size: 50%;
}
.d02 {
    width: 15%;
    font-size: 50%;
}

@media only screen and (min-width: 768px){
    .h01 {
        width: 100%;
        text-align: center;
        background-color: gray;
        font-size: 100%;
    }
    .h11 {
        width: 10%;
        background-color: darkgray;
        font-size: 100%;
    }
    .h12 {
        width: 15%;
        background-color: darkgray;
        font-size: 100%;
    }
    .d01 {
        width: 10%;
        font-size: 100%;
    }
    .d02 {
        width: 15%;
        font-size: 100%;
    }
}