/* 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: lightblue;
  color: black;
  font-family: Verdana;
  font-size: large;
  margin-left: auto;
  margin-right: auto;
  width: 960px;

}

h1, h2{
	text-align: center;
}

p {
	margin-left: 15px;
}


/* Containers*/
.container{
	display: grid;
	grid-gap: 2px;
	grid-template-columns: 1fr 3fr;
}

header{
	border: black 2px solid;
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}

nav{
	border: black 2px solid;
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}

main{
	border: black 2px solid;
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

footer{
	border: black 2px solid;
	grid-row: 3 / 4;
	grid-column: 1 / 3;
	
}

watermark{
  border: black 2px solid;
  grid-row: 3 / 4;
  grid-column: 3 / 4;
  width: 200px;
  height: 59px;
}

/* Tabs */
.tab {
  float: left;
  overflow: hidden;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  background-image: url(aaBattery.png);
  background-size: contain;
  background-color: inherit;
  border: none;
  aspect-ratio: 140/36;
  width: 200px;
  cursor: pointer;
  color: lightgreen;
  text-align: right;
  font-size: large;
}

/* Change background color of buttons on hover */
.tab button:hover {
}

/* Create an active/current tablink class */
.tab button.active {
}

/* Style the tab content */
.tabcontent {
  display: none;
  border-top: none;
}