/*======= RESET =======*/
html,body,
a,abbr,acronym,address,article,aside,audio,b,blockquote,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,
figure,figcaption,footer,form, h1,h2,h3,h4,h5,h6,header,hgroup,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,
output,p,pre,q,rp,rt,ruby,s,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;}
table {
	border-collapse:collapse;
	border-spacing:0;}
blockquote::before, blockquote::after, q::before, q::after {
	content:"";}
img, object, audio, video, svg {
	max-width:100%;}
ol, ul {
	list-style:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {
	display:block;}
html {
	box-sizing:border-box;}
*, *::before, *::after {
	box-sizing:inherit;}

/*======== General =========*/
:root {
  --bodycopy: #464646;
  --highlight: #577658;
  --blue: #3577c8;  /* icon blue = #3a83dc too low contrast for text*/
  --yellow: #ede606;
  --red: #682747;
  --grey: #767676;
  --green: #577658;
  --edges: #ccc;}
body {
	font-size: 16px;
	line-height: 1.5;
	color: var(--bodycopy);
	background-color: #fff;
	font-family: Helvetica,Arial,sans-serif;}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;}
h2 {
	font-size: 1.5em;
	line-height: 1em;
    margin-bottom: 0.25em;}
h3 {
	font-size: 1.25em;
	line-height: 1em;
	margin-bottom: 0.25em;
	margin-top: 1.25em;}
h4 {
	font-size: 1.25em;
	line-height: 1em;
	margin-bottom: 0.25em;
	margin-top: 0.25em;
    color: var(--green);}
h5 {
	font-size: 0.8em;
	line-height: 1em;
	margin-bottom: 0.6em;
	margin-top: 0em;
    color: var(--grey);}
a, a:visited, a:active, a:focus {
    color: var(--green);
	text-decoration:  none;} 
a:hover {
	color: var(--bodycopy);
    text-decoration: underline;
    text-decoration-color: var(--grey);}

/*=== initial page layout ===*/
header {
    max-width: 1250px;
    margin: auto 0;
	padding: 20px;}
main {    
	max-width: 1250px;
	margin: auto 0;
	padding: 20px;}
footer {    
	max-width: 1250px;
	margin: auto 0;
	padding: 20px;
    text-align: center;}

/*=== header content ===*/
h1 {
    font-size: 1em;
    font-family: "Roboto",Helvetica,Arial,sans-serif;
	line-height: 1em;}

/*=== main content ===*/
.map {
    display: grid;
}
.map img {
    align-self: center;
    justify-self: center;
    width: 300px;
    height: 300px;}

/*=== footer ===*/
.copyright {
	font-size: 14px;
	margin-top: 20px;
	margin-bottom: 20px;}

/*=== my phone ===*/
@media only screen and (max-width: 500px) {
header {    
	max-width: 500px;
	margin: auto 0;
	padding: 20px;}
main {    
	max-width: 500px;
	margin: auto 0;
	padding: 20px;}
footer {    
	max-width: 500px;
	margin: auto 0;
	padding: 20px;
    text-align: center;}
.map img {
    width: 150px;
    height: 150px;}

/*=== roboto ===*/
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  src: url('../assets/roboto.woff') format('woff'),
	   url('../assets/roboto.ttf') format('truetype');
  font-display: swap;}