/*======= 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 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #000;
	height:40px;}
main {    
	max-width: 1250px;
	margin: 0 auto;
	padding: 20px;}
footer {    
	max-width: 1250px;
	margin: 0 auto;
	padding: 20px;}

/*=== header content ===*/
h1 {
	display:flex;
    font-size: 1em;
    font-family: "Roboto",Helvetica,Arial,sans-serif;
	line-height: 1em;
	color: #fff;
	margin-right:10px;}
.logo {
	height: 30px;
	display:flex;
	margin-left:5px;
	margin-top:2px;}

/*=== main content ===*/
.today, .tomorrow {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 10px 30px;}
.today h2, .tomorrow h2 {
	grid-column: 1 / -1;
	margin: 0;}
.today h2 span, .tomorrow h2 span, .bird_map h2 span {
	font-size: 0.75em;
	line-height: 1.5em;
	color: var(--grey);}
.today h2 span .firsts, .bird_map h2 span .firsts {
    font-family: Roboto;
	font-weight: 500;
    font-size: 1em;
    color: var(--bodycopy);}
.today h5 {
    font-style: italic;
    margin-top: -0.5em;}
.bird_photo p {
	margin-bottom: 0.5em;}
.bird_list p {
	margin-bottom: 0.2em;
    font-size: 0.75em;}
.bird_name {
    font-size: 1em;}
.visit_map a {
    text-decoration: none;
    font-size: 1.25em;}

.number {
	font-family: Roboto;
	font-weight: 500;
    line-height: 1;}
.de_emp {
	color: var(--grey);}
.emp {
	color: var(--blue);}
.degC {
    font-size: 0.75em;}
.location::before {
    content: "";
    background: url("images/map_icon.svg") no-repeat;
	background-size:cover;
    width: 20px;
    height: 20px;
    float: left;
    margin-top: 2px;
    margin-right: 4px;
    margin-bottom: 2px;}
.locationA::before {
    content: "";
    background: url("images/map_icon.svg") no-repeat;
	background-size:cover;
    width: 10px;
    height: 10px;
    float: left;
    margin-right: 4px;
    margin-top: 4px;}
.zero {
    color: #ffffff;}
.smaller {
    font-size: 0.80em;}

/*=== map page ===*/
.map_boundary {
    width: 100%;
    height: 700px;}

.birdPopup h3 {
    

    margin-top: 0;
    font-size: 1.5em;}
.birdPopup h4 {
    margin-top: 0;
    font-size: 1.1em;
    font-style: italic;
    color: var(--grey);}
.birdPopup p {
    display: grid;
	grid-template-columns: 40fr 60fr;
    font-family: Roboto;
	font-weight: 500;}
.birdPopup span {
    color: var(--grey);
    padding-right: 10px;}
.birdPopup img {
    padding-top: 5px;}

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

/*=== my phone ===*/
@media only screen and (max-width: 500px) {
main {    
	max-width: 500px;
	margin: 0 auto;
	padding: 20px;}
footer {    
	max-width: 500px;
	margin: 0 auto;
	padding: 20px;}
.today, .tomorrow {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 10px 20px;}
.map_boundary {
    width: 100%;
    height: 500px;}
.location::before {
    margin-top: 4px;
    margin-bottom: 20px;}
.locationA::before {
    margin-bottom: 6px;}
}

/*=== 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;}