@media (prefers-color-scheme: dark) {
	body.dark {
		background-color: #002b36;
		color: #839496;
	}
}

@media (prefers-color-scheme: light) {
	body.dark {
		background-color: #002b36;
		color: #839496;
	}
}

body {
	transition: background-color 0.5s ease, color 0.5s ease;
	margin: .2% .5%;
}

nav {
	background-color: #00555a;
	padding: 10px;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-around;
}

nav ul li a {
	color: #839496;
	text-decoration: none;
}

/*
@media (max-width: 200px) {
	nav ul {
		flex-direction: column;
	}

	nav ul li {
		text-align: center;
	}
}
*/

@media (max-width: 600px) {
  nav {
    position: relative; /* Add this line to make the dropdown positioned relative to the nav element */
  }

  nav ul {
    flex-direction: column;
  }

  nav ul li {
    text-align: center;
  }

   .submenu {
    position: absolute; /* Change the position to absolute */
    top: 100%; /* Position it below the parent menu item */
    left: 0;
    width: 100%; /* Make it full width */
  }

  .submenu a {
    padding: 0.5rem 1.5rem; /* Adjust the padding to accommodate the dropdown button */
  }

  .submenu-btn {
    display: block; /* Make the dropdown button display block so it takes up the full width */
    width: 100%;
    padding: 0.5rem;
  }
}


.container {
  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-rows: auto 33.33% 33.33%;
  grid-template-areas:
    "header header"
    "column1 column2"
    "column1 column2"
	"footer footer";
  grid-gap: 10px;
  height: 95%;
}

.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  background-color: #f1f1f1;
  padding: 2px;
  box-sizing: border-box;
}


.column1 {
  grid-column: 1;
  grid-row: 2 / 4;
  background-color: #d3d3d3;
  padding: 20px;
  box-sizing: border-box;
}

.column2 {
  grid-column: 2;
  background-color: #f1f1f1;
  padding: 20px;
  box-sizing: border-box;
}