/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}
body {
  background: #001f3f url("images/bg.png"); /* dark navy with optional bg tile */
  font-family: "Verdana", sans-serif;
  color: #e0f0ff; /* light text */
}

.container {
  display: grid;
  grid-template-areas:
    "top top top"
    "left main right"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  gap: 10px;
  max-width: 1000px;
  margin: auto;
}

.top { 
  grid-area: top; 
  background: #004080; 
  border: 2px dashed #1e90ff; 
  padding: 10px; 
  text-align: center; 
}

.left { 
  grid-area: left; 
  background: #002b55; 
  border: 2px solid #3399ff; 
  padding: 10px; 
}

.main { 
  grid-area: main; 
  background: #001a33; 
  border: 2px solid #1e90ff; 
  padding: 10px; 
}

.right { 
  grid-area: right; 
  background: #002b55; 
  border: 2px solid #3399ff; 
  padding: 10px; 
}

.footer { 
  grid-area: footer; 
  text-align: center; 
  background: #004080; 
  border: 2px dashed #1e90ff; 
  padding: 5px; 
}

h1, h2 { 
  color: #4da6ff; 
  text-shadow: 1px 1px #000; 
}

a { 
  color: #66ccff; 
  text-decoration: none; 
}

a:hover { 
  text-decoration: underline; 
  color: #99e0ff; 
}