html, html * {margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-weight: 300;}

html, body {height: 100%;}

body 
  {
  background-color: #447;
  background-image: url("forrest1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  }

main {background-color: #bbe; background-color: #7c9;  border-radius: 0px; padding: 5px 0;}

h1 {text-align: center; margin: 10px 0; color: #456; font-size: 25px;}

table {width: 100%;}

tr {height: 60px;}

th, td {border: solid 1px #aaa; background-color: #0fd; padding: 3px;}

span {width: 100px; margin: 2px; padding: 5px 10px; color: white; background-color: black; background: linear-gradient(180deg, rgba(225,225,225,1) 0%, rgba(0,0,0,1) 80%); border: outset 3px #999; border-radius: 8px; font-size: 18px; box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.2);}

a {display: block; padding: 10px 5px;}

#attr {color: white; font-size: 10px; text-decoration: none;}

@media only screen and (min-width: 600px) 
  {
  body {display: flex; align-items: center; justify-content: center;}
    
  main {padding: 5px 20px; border-radius: 8px; border: solid 1px #777;}
  
  h1 {font-size: 25px;}
  
  th, td {padding: 12px;}
  
  a {padding: 10px 1px;}
  }