@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		 url('fonts/roboto-v30-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('fonts/roboto-v30-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  

:root {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

body {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4 {
    text-align: center;
    margin-top: 2em;
}

body, p, div {
    font-size: 1.3rem;
}

a {
    color:#666;
}
a:hover {
    color:#000;
}

header {
    margin: 0;
    padding: 2rem;
}
header div {
    text-align: center;
}
header div img {
    max-width: 40rem;
}

main {
    margin: 0;
    padding: 2rem;
}
main div {
    text-align: center;
}
main div img {
    width:60%;
}

footer {
    border-top: 1px solid #666;
    margin: 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    text-align: center;
}

/* mobile view */
@media screen and (max-width: 30rem) {
    header div img {
        max-width: 100%;
    }
    main div img {
        width: 100%;
    }
}