body {
    background: rgb(5, 0, 20);
    color: rgb(60, 90, 120);
    font-family: "Verdana",Times,sans-serif;
    margin: 0;
    padding: 0;
    text-align: left;
}

th, td {
    padding: 2px;
    vertical-align: middle;
}

.content-detail {
    padding: 10px;
    min-width: 400px;
    max-width: 600px;
    margin-right: 20px;
}

.limited-div {
  max-width: 800px;
  margin-left: 20px;
  margin-right: 20px;
  padding-left:20px;
  padding-right:20px;
  border-left: 1px solid rgba(0,0,250,0.2);
  border-right: 1px solid rgba(0,0,250,0.2);
}

.limited-div h1 {
    margin-bottom: 40px;
}

.carto-detail {
    padding: 10px;
    border-style: solid;
    border-width: 2px;
    margin: 10px;
    max-width: 330px;
}

.sidebar-nav {
    margin-top: 20px;
    padding: 0;
    list-style: none;
}

.content-box {
    display: flex;
    flex-wrap: wrap;
}

.spacial-visu {
  /*width: 390px;*/
}

.vocable {
  color: rgb(60, 90, 150);
}

.error {
  background-color: rgba(80, 30, 30, 0.7);
  color: rgb(200, 60, 60);
}

.success {
  background-color: rgba(0, 50, 250, 0.3);
}

.headInfo {
      text-align: center;
      list-style-type: none;
      width: 60%;
      max-width: 600px;
}

.headInfoTxt {
    margin: 0;
    padding: 0;
}

.miniDate {
  padding-left: 10px;
   font-size: 65%;
}

#univisual {
  /* for pretty border system: https://www.w3schools.com/css/css3_border_images.asp */
  border: 10px solid transparent;
  margin: 3px;
  border-image: url("cornering.png") 33% round;

  min-width: 100px;
  max-width: 700px;
  width: 90vw;
  min-height: 100px;
  max-height: 700px;
  height: 30vw;
}

#total-univisual {
  /* for pretty border system: https://www.w3schools.com/css/css3_border_images.asp */
  border: 10px solid transparent;
  margin: 3px;
  border-image: url("cornering.png") 33% round;

  width: 70vw;
  height: 70vh;
}

#spacial-box {
  width:30vh;
  height:40vw;
}

.cartoTxt {
  color: rgb(120, 90, 60);
}

.cartoTxt a:link {
  color: rgb(140, 80, 60);
}

.cartoTxt a:visited {
  color: rgb(140, 80, 60);
}

.exploTxt {
  color: rgb(60, 120, 90);
}

.exploTxt a:link {
  color: rgb(60, 140, 80);
}

.exploTxt a:visited {
  color: rgb(60, 140, 80);
}

.custom-icons {
  color: rgb(111, 20, 20);
  font-size: 20px;
  cursor: pointer;
}

#controls i {
  color: rgb(111, 20, 20);
  font-size: 20px;
  cursor: pointer;
}


#progress-bar{
  position: relative;
  width: 100%;
  height: 20px;
  cursor: pointer;
}

#MapPrevious{
  color: rgb(52, 51, 92);
}

svg g.internal {
    color: blue;
    background-color: red;
}

svg g.internal text {
    display: none;
}

svg g.internal:hover text {
  display: block;
}

.starsystem-details details {
  margin-bottom:20px;
  border-left:  1px solid;
  padding-left: 10px;
  background-color:rgba(250, 250, 250,0.08);
}

.starsystem-details details summary {
  cursor: pointer;
  text-decoration: underline dotted;
}


:target {
  background-color: rgba(255, 255, 170, 0.535);
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;&
  margin-block: 2rem;
  gap: 2rem;
}

.container img {
  width: 100%;
  display: block;
  height: 150px;
  object-fit: cover;
  object-position: left top;
}

.card {
  display: flex;
  flex-direction: column;
  width: clamp(20rem, calc(20rem + 2vw), 22rem);
  overflow: hidden;
  box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);
  border-radius: 1em;
  background: #4477AA;
background: linear-gradient(to top, #8899CC, #AACCFF);
}

.card__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.card__body h4 {
  font-size: 1.5rem;
  text-transform: uppercase;
}

.action-button {
  padding: 4px;
  margin: 4px;
  border:solid 1px blue;
  border-radius: 5px;
  appearance: button;
  white-space: nowrap;
}