@media (min-width: 30em) {
    .row { width: 100%; display: table; table-layout: fixed; }
    .col { display: table-cell; }
}
body {
  background-image: url("/res/bg.JPG");
  background-color: green;
  color: white;
  font-family: Verdana;
}
/*link styles*/
a {
  text-decoration: none; 
}
a:focus,
a:visited,
a:link {
  color: white; 
}
a:hover {
  color: black;
  background: #9AD2CB;
}
h1 {
  text-align: right
}
/* home button styles */
h1 a {
 text-decoration: none;
}
h1 a:link,
h1 a:visited,
h1 a:focus {
  /*background: #92140C;*/
  color: white;
}
h1 a:hover {
  color: black;
  background: #9AD2CB;
}

h1 a:active {
  /*background: darkred;*/
  color: black;
}
/*----*/
/* Layout using Grid*/
body {
  display: grid;
  grid-template-rows: 75px auto;
  grid-template-columns: 350px auto;
  gap: 1em;
}
#header {
  grid-row: 1;
  grid-column: 1/3;
  /*background-image: url("res/undergrowth_banner.png");*/
}
#sidebar {
  grid-row: 2;
  grid-column: 1;
}
#content {
  grid-row: 2;
  grid-column: 2;
}
/* adaptive image display */
img {
  object-fit: fill; 
  width: 50%;
  height: auto;
}
.navbar {
 max-width: 20%;
 justify-content: center;
 display: block;
}
/*Transparent block buttons for lists*/
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: auto;
  /*background-color: black;*/
}

li a {
  display: block;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}
/* Change the link and background color on hover */
li a:hover {
  background-color: #555555;
  color: white;
}
.button {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}