body
{
  /*background-image: linear-gradient(145deg, #1aa3ff, blue); */
  background-image: url("/placeholder1.jpg");
  background-size: cover;
  height: 100vh;
  min-height: 850px;
}

a
{
  color: white;
  text-decoration: none;
  font-weight: bold;
}
a:hover
{
  text-decoration: underline; 
}



.container
{
  max-width: 1000px; 
  margin: 50px auto;
  
  display: grid;
  grid-gap: 10px;
  
  grid-template-columns: 250px minmax(0, 1fr);

  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 10px;
}



header, nav, main, footer
{
  border: 1px solid #cccccc;
  border-radius: 7px;
  padding: 10px;
  /*box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);*/
  
  font-family: Arial;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

header
{
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  
  display: block;
}

nav
{
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
.navbutton
{
  background-image: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); 
  
  border: 2px outset #d9d9d9;
  box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);
  
  padding: 5px;
  
  color: black;
}
.navbutton a
{
  color: black; 
  font-weight: normal;
}

main
{
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  
  text-align: left;
  padding: 10px 20px;
}

footer
{
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}