/* new version - from May 2025 */
html {
  background-color: #1c1c1c;
  /* slightly lighter than original for comfort */
  color: #f0f0f0;
  /* same light text for good contrast */
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.header {
  background-color: #3b5b92;
  /* deeper slate blue */
  padding: 15px;
  text-align: center;
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  border: 2px solid #444c5c;
  /* slightly bluish-gray */
}

.header img {
  height: 50px;
  position: fixed;
  left: 1px;
  top: 63px;
}

.header a {
  text-decoration: none;
  color: inherit;
}

body {
  margin: 0 auto;
  text-align: center;
  font-family: Tahoma, Verdana, Arial, sans-serif;
}

.main {
  text-align: center;
  padding: 1px;
  margin-top: 7px;
}

.menu-hover {
  overflow: auto;
}

.menu-hover a:hover {
  background-color: #a93226;
  /* darkened FireBrick */
}

.menu1 {
  float: left;
  width: 20%;
  text-align: center;
  border: 2px solid #1c1c1c;
}

.menu1 a {
  background-color: #e0dff4;
  /* desaturated Lavender */
  padding: 8px;
  margin-top: 5px;
  display: block;
  width: 100%;
  color: #1c1c1c;
}

.menu2 {
  float: left;
  width: 20%;
  text-align: center;
  border: 2px solid #1c1c1c;
}

.menu2 a {
  background-color: #f4e7ec;
  /* slightly darker LavenderBlush */
  padding: 8px;
  margin-top: 5px;
  display: block;
  width: 100%;
  color: #1c1c1c;
}

.menu3 {
  float: left;
  width: 20%;
  text-align: center;
  border: 2px solid #1c1c1c;
}

.menu3 a {
  background-color: #e0dff4;
  padding: 8px;
  margin-top: 5px;
  display: block;
  width: 100%;
  color: #1c1c1c;
}

.menu4 {
  float: left;
  width: 20%;
  text-align: center;
  border: 2px solid #1c1c1c;
}

.menu4 a {
  background-color: #f4e7ec;
  padding: 8px;
  margin-top: 5px;
  display: block;
  width: 100%;
  color: #1c1c1c;
}

.menu5 {
  float: right;
  width: 20%;
  text-align: center;
  border: 2px solid #1c1c1c;
}

.menu5 a {
  background-color: #e0dff4;
  padding: 8px;
  margin-top: 5px;
  display: block;
  width: 100%;
  color: #1c1c1c;
}

.footer {
  background-color: #3b5b92;
  /* same as header */
  text-align: center;
  padding: 1px;
  margin-top: 7px;
  border: 2px solid #444c5c;
  /* same as header */
}

.footer-logo {
  height: 22px !important;
  margin-right: 3px;
  vertical-align: text-bottom;
}

.license-link {
  display: inline-block;
}

.license-icon {
  height: 22px !important;
  margin-left: 3px;
  vertical-align: text-bottom;
}

.footer a,
.main a {
  color: #63c4c9;
  /* gentle cyan */
}

.footer a:hover,
.main a:hover {
  color: #8de0e4;
  /* lighter, brighter cyan */
  text-decoration: underline;
  transition: color 0.3s ease;
  /* smooth color fade */
}

.txt {
  margin: 0 auto;
  text-align: left;
  max-width: 95%;
  scrollbar-width: thin;
  scrollbar-color: #3b5b92 #1c1c1c;
  white-space: nowrap;
}


@media only screen and (max-width: 620px) {

  /* For mobile phones: */
  .menu1,
  .menu2,
  .menu3,
  .menu4,
  .menu5,
  .main {
    width: 100%;
  }

  .main {
    padding-left: 2ch;
    padding-right: 2ch;
  }

  .txt {
    overflow-x: auto;
  }

}