body {
  margin: 0;
  padding: 0;
  background: black;
  color: bisque;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 8px;
  font-weight: bold;
}

canvas {
  border: 1px solid bisque;
}

button {
  width: 100%;
  padding: 5px;
  background: sienna;
  border: 2px solid goldenrod;
  border-radius: 15px;
  color: tan;
  font-size: 10px;
  font-weight: bold;
}

button:hover {
  background: rgb(160, 82, 45, 0.5);
}

button:active {
  background: rgb(160, 82, 45, 0.2);
  border: 2px solid darkgoldenrod;
  color: peru;
}

#container {
  width: 400px;
  margin: 3px;
  display: flex;
  flex-direction: column;
  border: 1px solid bisque;
  background: rgb(20, 20, 20);
}

/* R U N E S C A P E   C O N T R O L S */
#rsControls { /* 400 by 345(+5) */
  width: 400px;
  display: grid;
  grid-template-areas:
    "bait bait"
    "hooks weight";
  gap: 15px 0px;
}

/* BAIT */
#bait { /* 400 by 140 */
  grid-area: bait;
  width: 300px;
  height: 130px;
  margin: 0;
  padding: 5px 50px;
  gap: 5px 0px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.bait {
  display: grid;
  grid-template-columns: 1fr;
}
.bait canvas {
  
}
.bait span {
  width: 100%;
  height: 10px;
  text-align: left;
}

/* HOOKS */
#hooks { /* 300 by 190 */
  grid-area: hooks;
  width: 240px;
  height: 180px;
  margin: 0;
  padding: 5px 30px;
  gap: 5px 0px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.hooks {
  display: grid;
  grid-template-columns: 1fr;
}
.hooks canvas {
  width: 60px;
  height: 72px;
}
.hooks span {
  width: 100%;
  height: 10px;
  text-align: left;
}

/* WEIGHT */
#weight { /* 100 by 190 */
  grid-area: weight;
  width: 100px;
  height: 190px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
#weight canvas {
  margin: 5px 25px;
}

/* E S P   C O N T R O L S */
#espControls {
  width: 400px;
  display: grid;
  grid-template-areas:
    "details details"
    "map history";
}

/* DETAILS */
#details { /* 400 by 90 */
  width: 400px;
  height: 90px;
  padding-top: 10px;
  padding-bottom: 20px;
  grid-area: details;
  display: flex;
  flex-direction: column;
  background: rgb(160, 82, 45, 0.35);
  border-top: 1px solid tan;
  border-bottom: 1px solid tan;
}

#displaydetails {
  width: 100%;
  gap: 2px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
}

#displaydetails .answer {
  color: gold;
  font-size: 12px;
}
#displaydetails .title {
  padding: 0px 15px;
  text-align: left;
}

#buttons {
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-content: space-between;
  padding: 5px;
  gap: 15px;
}

#locationbuttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

#fishbuttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5px
}

/* MAP */
#map {
  width: 250px;
  height: 288px;
  grid-area: map;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid bisque;  
}

#map canvas {
  border: 1px solid bisque;
}

/* HISTORY */
#history {
  width: 150px;
  grid-area: history;
  display: grid;
  grid-template-columns: 1fr;
}

#history .title {
  display: flex;
  flex-direction: row;
  gap: 8px;
  font: 5px;
  padding-bottom: 2px;
}
#history .smallcanvas {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#history .smallcanvas canvas {
  width: 10px;
  height: 10px;
  border: none;
}
#history .answer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 3px;
  font-weight: normal;
}
#history .fishname {
  color: tan;
  font-weight: normal;
}

/* DOCKS */
#dockshistory {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  background: rgb(255, 0, 0, 0.2);
  border-bottom: 1px solid bisque;
  color: rgb(255, 0, 0);
}
#dockshxtitle { grid-area: dockxhxtitle; }
#dockshxfish1 {
  grid-area: dockshxfish1;
  display: grid;
  grid-template-areas: 
    "dockshxf1name dockshxf1canvas"
    "dockshxf1text dockshxf1text";
}
#dockshxf1name { grid-area: dockshxf1name; }
#dockshxf1canvas { grid-area: dockshxf1canvas; }
#dockshxf1text { grid-area: dockshxf1text; }
#dockshxfish2 {
  grid-area: dockshxfish2;
  display: grid;
  grid-template-areas: 
    "dockshxf2name dockshxf2canvas"
    "dockshxf2text dockshxf2text";
}
#dockshxf2name { grid-area: dockshxf2name; }
#dockshxf2canvas { grid-area: dockshxf2canvas; }
#dockshxf2text { grid-area: dockshxf2text; }

/* LAKE */
#lakehistory {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  background: rgb(0, 255, 255, 0.2);
  border-bottom: 1px solid bisque;
  color: rgb(0, 255, 255);
}
#lakehxtitle { grid-area: lakehxtitle; }
#lakehxfish1 {
  grid-area: lakehxfish1;
  display: grid;
  grid-template-areas: 
    "lakehxf1name lakehxf1canvas"
    "lakehxf1text lakehxf1text";
}
#lakehxf1name { grid-area: lakehxf1name; }
#lakehxf1canvas { grid-area: lakehxf1canvas; }
#lakehxf1text { grid-area: lakehxf1text; }
#lakehxfish2 {
  grid-area: lakehxfish2;
  display: grid;
  grid-template-areas: 
    "lakehxf2name lakehxf2canvas"
    "lakehxf2text lakehxf2text";
}
#lakehxf2name { grid-area: lakehxf2name; }
#lakehxf2canvas { grid-area: lakehxf2canvas; }
#lakehxf2text { grid-area: lakehxf2text; }

/* RIVER */
#riverhistory {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  background: rgba(131, 154, 255, 0.2);
  border-bottom: 1px solid bisque;
  color: rgb(131, 154, 255);
}
#riverhxtitle { grid-area: riverhxtitle; }
#riverhxfish1 {
  grid-area: riverhxfish1;
  display: grid;
  grid-template-areas: 
    "riverhxf1name riverhxf1canvas"
    "riverhxf1text riverhxf1text";
}
#riverhxf1name { grid-area: riverhxf1name; }
#riverhxf1canvas { grid-area: riverhxf1canvas; }
#riverhxf1text { grid-area: riverhxf1text; }
#riverhxfish2 {
  grid-area: riverhxfish2;
  display: grid;
  grid-template-areas: 
    "riverhxf2name riverhxf2canvas"
    "riverhxf2text riverhxf2text";
}
#riverhxf2name { grid-area: riverhxf2name; }
#riverhxf2canvas { grid-area: riverhxf2canvas; }
#riverhxf2text { grid-area: riverhxf2text; }

/* BEACH */
#beachhistory {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  background: rgb(255, 165, 0, 0.2);
  color: orange;
}
#beachhxtitle { grid-area: beachhxtitle; }
#beachhxfish1 {
  grid-area: beachhxfish1;
  display: grid;
  grid-template-areas: 
    "beachhxf1name beachhxf1canvas"
    "beachhxf1text beachhxf1text";
}
#beachhxf1name { grid-area: beachhxf1name; }
#beachhxf1canvas { grid-area: beachhxf1canvas; }
#beachhxf1text { grid-area: beachhxf1text; }
#beachhxfish2 {
  grid-area: beachhxfish2;
  display: grid;
  grid-template-areas: 
    "beachhxf2name beachhxf2canvas"
    "beachhxf2text beachhxf2text";
}
#beachhxf2name { grid-area: beachhxf2name; }
#beachhxf2canvas { grid-area: beachhxf2canvas; }
#beachhxf2text { grid-area: beachhxf2text; }