::-webkit-scrollbar {
  width: 3px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(0, 255, 240);
  border-radius: 20px;
  border: transparent;
}

::-webkit-scrollbar-thumb:hover {
  background-color: cyan;
  background-color: rgba(235, 229, 229, 0.5);
}

.uiDatabaseLayer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  text-align: center;
}

.whatisexode_Container {
  display: flex;
  position: absolute;
  z-index: 1000;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  transition: 0.5s ease-in-out;
  opacity: 0;
}

.whatisexode_menuContainer {
  position: absolute;
  top: 17%;
  left: 10%;
  width: 18%;
  height: 68%;
  text-align: center;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: cyan #00000000;
}

.whatisexode_textContainer {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 60%;
  height: 60%;
}

.whatisexode_DescriptionTitle {
  font-family: "Ethno";
  font-size: 3vh;
  color: cyan;
  text-align: left;
  margin-bottom: 5%;
}

.whatisexode_DescriptionText {
  font-family: "Cascadia";
  font-size: 1.5vh;
  color: white;
  text-align: left;
  /* pointer-events: none; */
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: cyan #00000000;
  scroll-snap-align: start;
  height: 90%;
}

.whatisexode_closeButton {
  position: absolute;
  top: 9%;
  right: 8%;
  width: 6%;
  z-index: 1001;
}

.whatisexode_closeButton:hover {
  /* Change the src attribute to the new image */
  content: url("../screen_shop/element_boutonClose_hover.png");
}

.menuItem {
  font-family: "Cascadia";
  font-size: 1.5vh;
  color: rgb(26, 203, 226);
  text-align: left;
  margin-bottom: 1%;
  border: #008cb4 2px solid;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  width: 80%;
  margin-top: 10px;
}

.menuItem:not(.separator):hover {
  background-color: rgba(0, 140, 180, 0.5);
}

.menuItem.separator {
  font-family: "Ethno";
  color: cyan;
  font-size: 2.2vh;
  width: 80%;
  border: 0px;
  pointer-events: none;
  margin-top: 20px;
}


.clickableExternalLink {
  text-decoration: none;
  color: #AAAAAA;
  font-weight:bold;
}

.clickableExternalLink:hover {
  text-decoration: underline;
}

.clickableExternalLink:visited {
  text-decoration: underline;
  color:#BBBBBB;
}


.externalLink {
  text-decoration: none;
  color: cyan;
}

.externalLink:hover {
  text-decoration: underline;
}

.externalLink:visited {
  text-decoration: underline;
  color:cyan;
}

.importantContent {
  color: yellow;
  font-weight: bold;
}

.aboutTitle {
  font-family: "Cascadia";
  font-size: 2vh;
  color: rgb(26, 203, 226);
  text-decoration: underline;
  text-align: left;
  margin-bottom: 5%;
}

.aboutLinks {
  position: absolute;
  top: 10%;
  left: 10%;
  text-align: center;
  z-index: 1001;
}

.illustrationImages {
  width: 50%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
}

.smallIllustrationImages {
  width: 25%;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
}