styles.css

* {
  box-sizing: border-box;
}
html, body {
  background-color: #000;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}
#main {
  position: relative; 
  width: 1368px;
  height: 768px;
  margin-left: auto;
  margin-right: auto; 
}
#game-screen {
  width: 768px;
  height: 768px;
  background-color: #000;
  color: #fff; 
}
#tabs {
  width: 1368px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1px;
}
#tabs > a {
  background-color: #7a8d9b;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 10px;
}

.tab {
  position: absolute;
  width: 100%;
  height: 100%;
}
#game {
  display: flex;
  justify-content: center;
  border: 1px solid #03343d;
  background-color: #7a8d9b;
}
.sidebar {
  padding: 20px;
  text-align: center;
  width: 300px;
}

.fishinfo {
  margin-top: 10px;
  border: 2px dashed #053a59;
  padding: 10px;
}

.record:hover {
  cursor: pointer;
  color: #eee; 
}
.record:hover > span {
  color: #eee!important; 
}

button {
  cursor: pointer; 
  font-family: inherit;
  background-color: #879cd9; 
}

#journal {
  background-color: #7a8d9b;
  display: none;
}
#journal.active {
  display: flex;
}
#fish-list, #fish-details {
  border: 2px dashed #053a59;
  margin: 20px;
}
#fish-list {
  width: 1068px; 
  overflow: auto;
}
#fish-list .fish {
  cursor: pointer; 
  display: inline-block;
  vertical-align: top; 
  width: 300px;
  height: 150px; 
  margin: 10px;
  padding: 10px;
  text-align: center; 
  background-color: #c19595;
}
#fish-list .fish.good-mood {
  background-color: #93c2df;
}
#fish-list .fish:hover {
  background-color: #eee; 
}
#fish-details {
  width: 300px;
  padding: 20px;
  text-align: center;
  overflow: auto; 
}