* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media (min-width: 501px) {
  body {
    background-image: url(/static/img/sea_8.jpg);
    background-position: top center;
    background-size: cover;
    background-color: black;
    background-attachment: fixed;
    isolation: isolate;
  }

  body::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-color: black;
    opacity: 0.9;
  }
}

@media (max-width: 500px) {
  body {
    background-color: black !important;
  }
}

.main-content {
  width: 100%;
  height: 100%;
  padding: 2rem;
  font-family: "Courier New", Courier, monospace;
  color: whitesmoke;
}

.nav-link:hover {
  font-weight: bolder;
}


.two-screen-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
}

.left-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: nowrap;
}

.vsl-details li,
.vsl-details-head li {
  list-style: none;
}
.pagin {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
}
.pagin a,
.pagin p {
  margin-left: 1rem;
}

.matrix-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.matrix-window {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.matrix-window li {
  list-style-type: none;
}

.matrix-window ul {
  margin: 1rem;
}

.table {
  white-space: nowrap;
}