@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English&display=swap');

:root {
    --ink:#2f170d;
}

body {
  background-image: url("img/bg_sea.jpg");
  background-color: white;
  background-size: cover;
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'IM Fell English', Verdana, sans-serif;
  font-size: 18px;
  overflow-y: scroll;
  width: 80%;
  margin: auto;
}

h3, h4, h5 {
  margin: 0px;
}

a {
      color: brown;
      text-decoration: none;
  }
  
a:visited {
    color: brown;
    text-decoration: none;
}

hr {
  border: 1px solid var(--ink);
  border-bottom: none; 
}

li::marker {
  content: "☞ ";
  font-size: 1.2rem;
}
/* 
li::before {
  content: "☛";
  padding-inline: 1ch;
} 
*/

.poem {
  text-align: right;
  font-size: 0.7em;
  font-style: italic;
  color: #ddd;
}

.side ul {
  margin: 0;
}

.bes-grid {
  display: grid;
  grid-template-columns: min-content 20px minmax(0,1fr);
  grid-template-rows: min-content 1fr 50px;
  margin: 1em;
}

.bes-header { grid-area: 1 / 1 / 2 / 4; }
.bes-sidebar { grid-area: 2 / 1 / 3 / 2; }
.bes-gutter { grid-area: 2 / 2 / 3 / 3; }
.bes-content { grid-area: 2 / 3 / 3 / 4; }
.bes-footer { grid-area: 3 / 1 / 4 / 4; }

.bes-content {
  padding: 1.5em;
}

.bes-sidebar {
  white-space: nowrap;
}

.navigation {
  padding: 1em;
}

.bes-content, .navigation {
  background-image: url("img/paper.jpg");
  border-style: solid;
  border-width: 1px 2px 2px 1px;
  border-color: var(--ink);
  border-radius: 5px;
}

.bes-header {
  margin-bottom: 5px;
}

.bes-header h1 {
  font-family: 'UnifrakturMaguntia', 'Pirata One', cursive;
  font-size: 48px;
  line-height: 100px;
  margin: 0;
  padding-left: 150px;
  color: black;
  cursor: default;
}

.logo {
  float: left;
}

.item {
  font-size: 0.8em;
}

.roster {
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
}

.crew {
  height: 160px;
  font-size: 0.8em;
}

.crew > img {
  float: left;
  margin-right: 1em;
  border: 1px solid black;
  width: 96px;
}

.crew p {
  margin: 0;
}

.splash > img {
  float: right;
  width: 50%;
  border: 1px solid black;
  margin: 1em 0 0 1em;
}



.grid-container {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: min-content 1fr 50px;
  max-width: 1200px;
  margin: auto;
  gap: 10px;
}

.titlebar { grid-area: 1 / 1 / 2 / 3; }
#sidebar { grid-area: 2 / 1 / 3 / 2; }
.article { grid-area: 2 / 2 / 3 / 3; }
.footerbar { grid-area: 3 / 1 / 4 / 3; }

.titlebar {
  margin: auto;
  text-align: center;
  color: black;
  cursor: default;
  padding-top: 2em;
}

.article, #sidebar {
  background-color: rgba(230, 230, 230, 0.90);
  border-radius: 16px;
  padding: 1.5em;
}

#sidebar {
  align-self: flex-start;
}

.footerbar {
  color: white;
}

.misc-crew td {
  border: 1px solid;
  padding: 2px;
  font-size: 85%;
  vertical-align: text-top;
}

.misc-crew td:first-child {
  font-weight: bold;
}

.misc-crew td:nth-child(2) {
  max-width:100%;
  white-space:nowrap;
}

.ship-table td {
  border: 1px solid;
  padding: 2px;
}

.ship-table table {
  border-collapse: collapse;
}

.crew1 { grid-area: 1 / 1 / 2 / 3; }
.crew2 { grid-area: 1 / 3 / 2 / 5; }
.crew3 { grid-area: 1 / 5 / 2 / 7; }
.crew4 { grid-area: 2 / 2 / 3 / 4; }
.crew5 { grid-area: 2 / 4 / 3 / 6; }

.crew1, .crew2, .crew3, .crew4, .crew5 {
  align-self: flex-end;
  text-align: center;
  font-family: 'Pirata One', cursive;
  font-size: 24px;
}

.accordion {
  text-align: left;
  transition: 0.4s;
  cursor: pointer;
}

.active, .accordion:hover {
  text-decoration: underline;
}

.dossier {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}