body {
  margin: 0;
  background: url('../pictures/background_1.jpg') no-repeat center center fixed;
  background-size: cover;
  font-family: Arial, sans-serif;
}

.logo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 300px;
}
/*
.questionBtn {
  position: absolute;
  top: 45%;
  left: 47%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  font-size: 60px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  cursor: pointer;
  z-index: 2;
}
*/
.languageSelector {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column; /* Align vertically */
  align-items: center;    /* Center horizontally */
  gap: 20px;              /* Space between buttons */
  background-color: transparent;
  display: none; /* Keep it hidden until ? is clicked */
}

.arrowBtn, .selectBtn {
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 5rem;
  cursor: pointer;
}

.arrowBtn {
  font-size: 5rem;
  background-color: transparent;  /* Remove background */
  border: none;                   /* Remove border */
  margin: 0;                       /* Remove any margin */
  padding: 0;                      /* Remove any padding */
  cursor: pointer;                /* Make the arrow clickable */
}

#languageDisplay {
  font-size: 50px;
  margin: 20px 0;
  background-color: white; /* White background */
  color: black; /* Text color */
  padding: 20px; /* Padding */
  border-radius: 10px; /* Rounded corners */
  text-align: center;
  display: inline-block;
}

/* Animations */
@-webkit-keyframes pulse {
  0% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  50% { -webkit-transform: translate(-50%, -50%) scale(2); transform: translate(-50%, -50%) scale(2); }
  100% { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(2); }
  100% { transform: scale(1); }
}

.pulse-element {
  animation: pulse 1s infinite;
}

.questionBtn.pulsing {
  animation: pulse 1s infinite;
  transform-origin: center center;
}
.questionBtn {
  position: absolute;
  top: 45%;
  left: 47%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  font-size: 60px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  cursor: pointer;
  z-index: 2;
}


.titleBox {
  position: absolute;
  font-size: 30px;
  transition: font-size 3s ease-in-out;
  cursor: pointer;
  text-shadow: 3px 3px 9px black;
  z-index: 1000;
  display: flex;
  align-items: center;
  background-color: transparent;
  padding: 5px;
}



/* Individual positions and their unique colors */
.pos1  { top: 5%;   left: 10%;  color: #ff4d4d; }   /* Red */
.pos2  { top: 10%;  right: 15%; color: #4da6ff; }   /* Blue */
.pos3  { top: 20%;  left: 50%;  color: #4dff4d; }   /* Green */
.pos4  { top: 35%;  left: 25%;  color: #ffff4d; }   /* Yellow */
.pos5  { top: 40%;  right: 20%; color: #ff80df; }   /* Pink */
.pos6  { top: 55%;  left: 15%;  color: #ff944d; }   /* Orange */
.pos7  { top: 60%;  right: 30%; color: #b366ff; }   /* Purple */
.pos8  { top: 70%;  left: 35%;  color: #00ffff; }   /* Cyan */
.pos9  { top: 80%;  right: 10%; color: #a6a6a6; }   /* Gray */
.pos10 { top: 90%;  left: 5%;   color: #ffffff; }   /* White */


    body {
      display: flex;
      background-color: #f0f0f0;
      margin: 0;
    }
    .contentColumn {
      width: 35%;
      padding: 30px;
      background-color: white;
      border-left: 3px solid #ccc;
      box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    }
    .contentItem {
      margin-bottom: 20px;
      font-size: 1.3rem;
      color: #333;
    }
    .imageDisplay {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #222;
    }
    .imageDisplay img {
      max-width: 80%;
      max-height: 80%;
    }
    .buttonRow {
      display: flex;
      justify-content: space-around;
      margin-top: 40px;
    }
    .navBtn {
      padding: 10px 30px;
      font-size: 1.2rem;
      border: none;
      border-radius: 10px;
      background-color: #0099cc;
      color: white;
      cursor: pointer;
    }
    .navBtn:hover {
      background-color: #0077aa;
    }
    .content-image {
  width: 100%;
  max-width: 400px;  /* Adjust width as needed */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
    
  #content-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  max-width: 800px;
  margin: auto;
  font-size: 1.3rem;
  line-height: 1.6;
}

#text-area {
  margin-bottom: 2rem;
  text-align: justify;
}

#nav-buttons {
  margin-bottom: 2rem;
  display: flex;
  gap: 1rem;
}

#message-section {
  background-color: #f9f9f9;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-align: center;
}

.content-image {
  max-width: 300px;
  width: 100%;
  height: auto;
  margin-top: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
#text-area {
  font-size: 24px;
  line-height: 1.6;
  padding: 20px;
  max-width: 800px;
  margin: auto;
  color: #333;
}


  .contentItem {
    display: none;
    font-size: 1.2em;
    margin-bottom: 20px;
  }

  .contentItem.active {
    display: block;
  }

  .imageDisplay img {
    max-width: 100%;
    height: auto;
  }
  
  .content-container {
    width: 500px;
    height: 1500px;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}
.title-line {
    font-size: 15px;
    font-weight: bold;
    color: red;
}
.dotted-line {
    border-top: 3px dotted blue;
    margin: 15px 0;
}
.special-msg {
    color: red;
    text-align: center;
    margin-top: 20px;
}
.city-line {
    text-align: center;
    font-weight: bold;
}
.image-display {
    margin-top: 20px;
    text-align: center;
}
.image-display img {
    max-width: 100%;
    height: auto;
}