@font-face {font-family: pixelfont; src: url(assets/KarmaSuture.ttf);}
html {scroll-behavior: smooth;   -webkit-user-select: none; -ms-user-select: none; user-select: none;}
body { font-family: pixelfont, sans-serif; font-size:60px; color:white; padding: 20px; background-color:yellow;  margin-bottom:100px; }
p {margin:0; padding: 0;}

#chat-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Adds spacing between questions and inputs */
  max-width: 100%;
  margin: 0 auto;
}
/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

.question-bubble {
  display: inline-block;
  background-color: blue; /* Light background for questions */
  padding: 30px;
  /* margin-bottom: 10px; */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 80%;
  align-self: flex-start;
  animation-name: appear;
  animation-duration: 1s;
}
.question-image {
  max-width: 100%;
  display: block;
  height:auto;
  width:3000px;
}

.input-bubble {
 /* Light green background for inputs */
  align-self: flex-end;
  opacity: 0;
  animation-name: appear;
  animation-duration: 1s;
  animation-fill-mode: forwards ;
  max-width: 80%;
  text-align: right;
  display:flex;
  flex-wrap:wrap;
  justify-content: flex-end;
}
.button-image {
  padding:10px;
  margin:0 auto 0 auto;
  display:block;
  width: 95%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  
}
.button-text {
  padding:40px;
}
button {
  background-color:orange;
  font-size: 60px;
  font-family: pixelfont, sans-serif;
  color: white;
  border: none;
  cursor: pointer;
  margin: 5px 5px;
}

button:active {
  background-color:yellowgreen;
}
button:visited{background-color:red;}

input[type="range"] {
  width: 100%;
  margin-top: 10px;
}
/* multiple choice styling */
button.selected {
  background-color: green !important; /* Green when selected */
  color: white;
}
button:disabled, .disabled-button {
  opacity: 0.7; /* Make disabled buttons slightly faded */
  cursor: not-allowed;
}

/* appear animation */
@keyframes appear {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* multiple choice checkbox styling */
.hidden-checkbox {
  display: none; /* Hide the checkbox */
}

.choice-button {
  text-align: center;
  margin: 5px;
  background-color: orange;
  cursor: pointer;
  transition: background-color 0.3s;
  user-select: none;
  text-align: center;
  display: inline-block;
}
.image-button {
  width:45%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  display: flex;
}

.hidden-checkbox:checked + .choice-button {
  background-color:green; /* Green when selected */
  color: white;
}

.submit-button {
  background-color: yellowgreen;
  color: white;
  border: none;
  padding: 50px;
  cursor: pointer;
}

.submit-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.question-video {
  width: 100%;
  max-width: 80vw;
  display: block;
}
menu button {
  background-color: red;
  aspect-ratio: 1/1;
  width:100px;
}
menu button img {
  width:64px;
  height:auto;
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
menu {
  display:flex;
  position: fixed;
  top:25px;
  right:25px;
  z-index: 1000;
  margin:0;
}
#qr-code {
  padding:20px;
  background-color: #fff;
}