body {
background-image:url("waterBG.gif");
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
color:black;
margin:0;
top:50px;
bottom:50px;
overflow:auto;
}

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

footer {
background-color:#b39c4d;
color:#1e2f23;
position:absolute;
bottom:0;
right:0;
text-align:right;
width:100%;
height:50px;
padding: 0px 10px;
}

* {
box-sizing:border-box;
}

.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: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;
height:5%;
}
}

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

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

.swagbutton {
animation: swagBorder 0.6s linear infinite;
animation-play-state:paused;
background: transparent;
margin: 5px;
padding: 5px;
}

.swagbutton:hover {
animation-play-state:running;
}

@keyframes swagBorder {
0% {background: linear-gradient(180deg, red 0%, orange 15%, transparent 35%, transparent 50%, transparent 65%, transparent 85%, pink 100%);}
15% {background: linear-gradient(180deg, red 0%, orange 15%, yellow 35%, transparent 50%, transparent 65%, transparent 85%, transparent 100%);}
35% {background: linear-gradient(180deg, transparent 0%, orange 15%, yellow 35%, green 50%, transparent 65%, transparent 85%, transparent 100%);}
50% {background: linear-gradient(180deg, transparent 0%, transparent 15%, yellow 35%, green 50%, cyan 65%, transparent 85%, transparent 100%);}
65% {background: linear-gradient(180deg, transparent 0%, transparent 15%, transparent 35%, green 50%, cyan 65%, purple 85%, transparent 100%);}
85% {background: linear-gradient(180deg, transparent 0%, transparent 15%, transparent 35%, transparent 50%, cyan 65%, purple 85%, pink 100%);}
100% {background: linear-gradient(180deg, red 0%, transparent 15%, transparent 35%, transparent 50%, transparent 65%, purple 85%, pink 100%);}
}

.grid-container {
overflow:scroll;
display:grid;
position:fixed;
grid-template-areas:
'header1'
'header2'
'header3'
'content'
'footer5'
'footer6'
'footer7'
'footer8';
gap:10px;
background-color:#071a0b;
border: 5px solid #b39c4d;
padding: 10px;
width: 100%;
margin:auto;
}

.grid-container > div {
border: 1px solid red;
}

.header1 {grid-area:header1;color:#fae584;text-align:center;font-size:24px;}
.header2 {grid-area-header2;color:#b39c4d;text-align:center;font-size:24px;}
.header3 {grid-area:header3;background-color:transparent;text-align:right;}
.content {grid-area:content;background-color:#34623f; color:#768948;overflow: scroll;}
.footer5 {grid-area:footer5;background-color:#768948;color:#1e2f23;text-align:center;}
.footer6 {grid-area:footer6;background-color:#607744;color:#1e2f23;text-align:center;}
.footer7 {grid-area:footer7;background-color:#1e2f23;color:#768948;text-align:center;}
.footer8 {grid-area:footer8;background-color:transparent;color:#768948;text-align:right;}

@media (max-width: 600px) {
.header1 {grid-area: 1 / 1 / span 1 / span 1;}
.header2 {grid-area: 1 / 6 / span 1 / span 1;}
.header3 {grid-area: 1 / 2 / span 1 / span 4}
.content {grid-area: 2 / 1 / span 3 / span 6;height:250px;}
.footer5 {grid-area: 6 / 1 / span 1 / span 2;}
.footer6 {grid-area: 6 / 3 / span 1 / span 2;}
.footer7 {grid-area: 6 / 5 / span 1 / span 2;}
.footer8 {grid-area: 7 / 1 / span 1 / span 6;text-align:center;}
}

@media (min-width: 600px) {
.header1 {grid-area: 1 / 1 / span 1 / span 1;}
.header2 {grid-area: 1 / 7 / span 1 / span 1;}
.header3 {grid-area: 1 / 2 / span 1 / span 5;text-align:center;}
.content {grid-area: 2 / 1 / span 3 / span 7;height:500px;}
.footer5 {grid-area: 6 / 1 / span 1 / span 2;}
.footer6 {grid-area: 6 / 3 / span 1 / span 3;}
.footer7 {grid-area: 6 / 6 / span 1 / span 2;}
.footer8 {grid-area: 7 / 1 / span 1 / span 7;text-align:center;}
}
 
@media (min-width: 768px) {
.header1 {grid-area: 1 / span 1 / span 1;}
.header2 {grid-area: 2 / 1 / span 1 / span 1;}
.header3 {grid-area: 1 / 2 / span 2 / span 5;text-align:right;}
.content {grid-area: 3 / 1 / span 3 / span 6;}
.footer5 {grid-area: 6 / 1 / span 1 / span 1;}
.footer6 {grid-area: 6 / 2 / span 1 / span 1;}
.footer7 {grid-area: 6 / 3 / span 1 / span 1;}
.footer8 {grid-area: 6 / 4 / span 1 / span 3;text-align:right;}
}

.modal {
display:none;
position:fixed;
z-index:1;
padding:20%;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.4);
}

.modal-content {
background-color:#34623f;
margin:auto;
padding:20px;
border: 5px double #b39c4d;
width:80%;
height:60%;
color:#768948;
overflow:scroll;
}

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


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

.close {
color:#b39c4d;
left:65%;
padding: 5px;
position:fixed;
border: 5px double transparent;
}

.close:hover,
.close:focus {
color:#fae584;
background-color:#1e2f23;
text-decoration:none;
cursor:pointer;
border: 5px double #b39c4d;
}