body {
background-color:#071a0b;
color:#768948;
margin:0;
}

header {
float:top;
text-align:center;
padding: 10px;
}

footer {
background: linear-gradient(360deg, #768948 0%, #607744 25%, transparent 100%);
color:#1e2f23;
position:relative;
bottom:0;
left:0;
width:100%;
padding: 0px 10px;
}

* {
box-sizing:border-box;
}

.dark-mode {
background-color:#403d39;
color:#ccc5b9;
}

.dark-mode header {
background-color:red;
}

.topnav {
background-color:#768948;
overflow:hidden;
}

.topnav a {
float:left;
display:block;
color:#1e2f23;
text-align:center;
padding: 5px 16px;
text-decoration:none;
font-size: 17px;
border: 5px double transparent;
}

.topnav a:hover {
background-color: #1e2f23;
color: #768948;
border: 5px double #b39c4d;
}

.topnav a:active {
background-color: #34623f;
color: #b39c4d;
border: 5px double #fae584;
}

.topnav .icon {
display:none;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display:none;}
.topnav a.icon {
float:right;
display:block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position:absolute;
right:0;
top:0;
}
.topnav.responsive a {
float:none;
display:block;
text-align:left;
}
}

.grid-container {
display:grid;
grid-template-areas:
'header'
'menu'
'main'
'footer';
gap:10px;
background-color:#b39c4d;
margin: 5px;
}

.header {
grid-area:header;
background-color:#34623f;
border: 5px double #b39c4d;
margin: 5px;
}

.header h1 {
margin: 5px 10px;
}

.menu {
grid-area:menu;
background-color:#34623f;
}

.content {
grid-area:main;
background-color:#34623f;
}

.footer {
grid-area:footer;
background-color:#34623f;
}

#dateTime {
left:0;
color:white;
}

@media (min-width: 600px) {
header > img {transform:rotate(180deg);}
.header {grid-area: 1 / span 6; background-color:#768948; color:#1e2f23;}
.menu {grid-area: 2 / span 1;}
.content {grid-area: 2 / span 4;}
.footer {grid-area: 4 / span 6;}
}

@media (min-width: 768px) {
.header {grid-area: 1 / span 6;}
.menu {grid-area: 2 / span 1;}
.content {grid-area: 2 / span 4;}
.footer {grid-area: 3 / span 6;}
}