:root {
  --main-color: #8e8a8a;
  --background-color: black;
  --text-and-svg-color: white;
  --popup-background-color: #121212;
  --popup-font-color: #8e8a8a;
  --svg-size: 24px;
}
body::-webkit-scrollbar {
  display: none; /* Hides the scrollbar */
}
a {
  color: var(--text-and-svg-color);
}

html {
  height: 100%;
  min-height: 100%;
  background-color: var(--background-color);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* nodrag noselect */
html * {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  box-sizing: border-box;
}

body {
  height: 100%;
  min-height: 100%;
  background-color: var(--background-color);
  position: relative;
  font-family: Arial, sans-serif;
}
.text-and-svg-conts {
  color: var(--popup-font-color);
  position: fixed;
  left: 0;
  transition: color 10s, fill 10s;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px;
}
.upper-cont {
  top: 0px;
  justify-content: flex-end;
}
.lower-cont {
  bottom: 0px;
  justify-content: space-between;
  align-items: center;
}

.lower-cont .built-by-info {
  margin-right: 10px;
  font-size: 12px;
  text-align: center;
}

.text-and-svg-conts svg {
  fill: var(--text-and-svg-color);
  transition: fill 10s;
}
.text-and-svg-conts a {
  color: var(--popup-font-color);
  transition: color 10s;
}

/* Transition to --background-color over 10 seconds */
body.loaded .text-and-svg-conts,
body.loaded .text-and-svg-conts a {
  color: var(--background-color);
}

body.loaded .text-and-svg-conts svg {
  fill: var(--background-color);
}

/* Hover effect */
.text-and-svg-conts:hover {
  color: var(--main-color) !important;
}

.text-and-svg-conts:hover svg {
  fill: var(--main-color) !important;
}

.button-wrapper {
  all: unset;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  width: var(--svg-size);
  height: var(--svg-size);
}

.info-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--popup-font-color);
  background-color: var(--popup-background-color);
  padding: 20px;
  max-width: 100%;
  width: 500px;
  max-width: 80%;
  max-height: 90%;
  overflow: auto;
}
.info-popup a {
  text-decoration: none;
}

.close-popup-button {
  position: absolute;
  right: 10px;
  top: 10px;
}
.close-popup-button svg {
  fill: var(--main-color);
}
.close-popup-button:hover svg {
  fill: var(--text-and-svg-color);
}
.info-popup ul {
  padding-inline: 20px;
}

.info-popup li {
  margin-top: 10px;
}