body {
        font-family:arial, sans-serif;
        margin:0px;
        background-color:black;

          background-image: url("water.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
  background-position: center;
      }
      div.nav {
      margin:auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width:300px;
      height:300px;
      text-align:center;
      vertical-align:middle;
      border: 5px;
      border-color:#003d7a;
      border-style: ridge;
      background-color:#e3e9f2;
      
      }
.main  {
  margin:none;
  display:inline-flex;

  width:100%;
  min-height: 100vh;
background: rgba(0,0,0,0.75);
}
a {
  text-decoration:none;
  color:black;
}
a:hover {
  color:#003d7a;
  font-weight:bold;
}
div.nav ul {
list-style-type:none;
    margin: 0;
  padding: 0;
}
div.main-container {
  width:75%;
  margin-top:75px;
  margin-bottom:75px;
  margin-left:auto;
  margin-right:auto;
  padding:15px;
  background-color:#e3e9f2;
  border: 5px;
      border-color:#003d7a;
      border-style: ridge;
}

div.subpage-nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
table.table {
  margin:auto;
  table-layout: auto;
  width:100%;
/*  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}
.truncate {
  max-width: 0; /* Important trick to force truncation */
  overflow: hidden; /* Hide overflow content */
  text-overflow: ellipsis; /* Add "..." to truncated text */
  white-space: nowrap; /* Prevent text from wrapping */
}
th, td {
  padding: 10px;
}
tr:nth-child(even) {background-color: #d2dbea;}
tr:hover {background-color: #6a87ba; color:white;}
#card-list {
  width:100%;
  margin:auto;
}