body {
  background-color: #fafafa;
  font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
  font-size: 20px;
}

.faq h4,
.footer-title-link,
.nft-input-container,
.btn-brown,
html.dark .btn-brown,
.btn-brown:hover,
html.dark .btn-brown:hover,
.btn-brown:active,
html.dark .btn-brown:active,
h1,
h2,
h3,
h4,
h5,
.btn,
button,
.title-dark,
.title-light,
.navbar-title,
#navbar-title,
h1.navbar-title,
.navbar-container h1,
.logo-link {

  /*
  

  font-family: 'Press Start 2P', cursive;
  letter-spacing: -3px;

  font-family: 'Silkscreen', cursive;
  letter-spacing: -2px;

  font-family: 'Silkscreen', cursive;
  letter-spacing: -2px;

  font-family: 'Prompt', sans-serif;
  font-weight: 800;
  */
}

.navbar-title {
  text-transform: uppercase;
  font-family: 'Prompt', sans-serif;
  font-weight: 900!important;
}
#nav-content {
  box-shadow: 0px 0px 200px;
  border-radius: 15px;
}
.current-character-image {
  border-radius: 100%;
  max-width: 48px;
}

.logo-image {
  height: 48px;
  margin-top: -4px;
  margin-bottom: -4px;
  display: inline;
}
/* media query for small screens */
@media only screen and (max-width: 1024px) {
  .logo-image {
    height: 42px;
  }
  #current-character-link {
    width: 36px;
  }
}




/* Style for the big checkbox */
.big-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 35px; /* Space for the checkbox */
  cursor: pointer;
  font-size: 16px; /* Adjust font size as needed */
}

/* Hide the default checkbox */
.big-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create the custom checkbox design */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ccc; /* Checkbox background color */
  border-radius: 5px;
}

/* Style the custom checkmark when the checkbox is checked */
.big-checkbox input:checked ~ .checkmark {
  background-color: #2196F3; /* Checked background color */
}

/* Style the checkmark's appearance */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when the checkbox is checked */
.big-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Customize the checkmark's appearance */
.big-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}






.btn,
button {
  text-transform: uppercase;
  font-family: 'Prompt', sans-serif;
  font-weight: 900!important;
}

.gradient {
  background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
}

.btn-gradient {
  background-image: linear-gradient(45deg, #d53369 0%, #daae51 100%);
  background-size: 200% 200%;
  animation: shine 6s linear infinite;
  transition: background-position 0.5s, box-shadow 0.3s, transform 0.3s;
}

.vibrant {
  background: linear-gradient(90deg, #d53369 0%, #daae51 100%);
  background-image: linear-gradient(45deg, #36f8f8, #7bdcb5, #c985f7, #7a7af8);
}

.btn-vibrant {
  background-image: linear-gradient(45deg, #36f8f8, #7bdcb5, #c985f7, #7a7af8);
  background-size: 200% 200%;
  animation: shine 6s linear infinite;
  transition: background-position 0.5s, box-shadow 0.3s, transform 0.3s;
}


.vibrant-light {
  background-image: linear-gradient(45deg, #d0ffff, #e0f8d8, #f0d0ff, #e0e0ff);
  background-size: 200% 200%;
  animation: shine 6s linear infinite;
  transition: background-position 0.5s, box-shadow 0.3s, transform 0.3s;
}

.btn-vibrant:hover {
  background-position: right bottom;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  color: #fff;
}

.btn-vibrant:active {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
}

/* make btn-remix an awesome looking button */
/* maybe make it orange with an orange-yellow gradient */
.btn-remix {
  background-color: #ff8c00;
  background-image: linear-gradient(315deg, #ff8c00 0%, #ffbd00 74%);
  border-color: #ff8c00;
  color: #fff;
}
.btn-remix:hover {
  background-color: #ff8c00;
  background-image: linear-gradient(315deg, #ff8c00 0%, #ffbd00 74%);
  border-color: #ff8c00;
  color: #fff;
}
.remix-container {
  /* orange border */
  border: 1px solid #ff8c00;
  /* very light orange background */
  background-color: #fff8f0;
}


.btn-brown,
html.dark .btn-brown {
  background-color: saddlebrown;
  color: #ffffff;
}
.btn-brown:hover,
html.dark .btn-brown:hover,
.btn-brown:active,
html.dark .btn-brown:active {
  background-color: saddlebrown;
  color: #ffffff;
}

.btn-dark,
html.dark .btn-dark {
  background-color: #343a40;
  color: #ffffff;
}
.btn-dark:hover,
html.dark .btn-dark:hover,
.btn-dark:active,
html.dark .btn-dark:active {
  background-color: #454d55;
  color: #ffffff;
}

.btn-toggle-container {
  width: 100%;
}

.faq-selected p {
  display: block !important;
}

.title-thick {
  width: 100%;
  padding: 20px;
  font-family: 'Prompt', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.title-dark {
  width: 100%;
  padding: 20px;
  /* exactly like btn-dark */
  color: #ffffff;
  background-color: #343a40;
  font-family: 'Prompt', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}
html.dark .title-dark {
  /* slightly lighter than btn-dark */
  background-color: #454d55;
}

.title-light {
  width: 100%;
  padding: 20px;
  color: #bfbfbf;
  background-color: #fdfdfd;
  font-family: 'Prompt', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}
html.dark .title-light {
  background-color: #fdfdfd;
}

/* before */
.title-dark:before,
.title-light:before {
  content: attr(data-before);
  float: left;
}

/* after */
.title-dark:after,
.title-light:after {
  content: attr(data-after);
  float: right;
}

.title-dark.title-dark-slim,
.title-light.title-light-slim,
.title-slim {
  padding: 10px;
}

.gradient-blue {
  /* #2193b0 in rgba */
  background: linear-gradient(90deg, rgba(33,147,176,0.9) 0%, #6dd5ed 100%);
}

.btn-gradient-blue,
.btn-gradient-blue-dark {
  text-shadow: 2px 2px 1px #222222;
  color: white;
}


.gradient-snowcone {
    background: linear-gradient(90deg, #d53369, #daae51, #22d6b0, #6dd5ed);
}
.btn-gradient-snowcone {
  text-shadow: 2px 2px 1px #222222;
  color: white;
}

















/* MODAL */
.modal {
  transition: opacity 0.25s ease;
}
body.modal-active {
  overflow-x: hidden;
  overflow-y: visible !important;
}

.create-button-container {
  border-radius: 15px;
}

.create-button-tab {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.create-button-tab.active {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.toggle-container {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}


.create-button-tab.active {
  background-color: #343a40;
  color: #ffffff;
}


@media (max-width: 1000px) {
  .prompt-card-container {
    height: fit-content;
    position: relative;
    top: 0px;
  }

}

/* under 550px */
@media (max-width: 550px) {
  .prompt-card-container {
    height: fit-content;
    position: relative;
    top: 0px;
  }
}









@keyframes shine {
  0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}





.chat-messages-container {
  color: #222222;
}
.chat-input {
  color: #222222;
  font-size: 1.3rem;
}


.chat-message-quest-start,
.chat-message-item-give,
.chat-message-attack,
.chat-message-heal {
  background-color: #FDF1DC;
  border-radius: 25px;
  margin-bottom: 10px;
}

.from-index-action {
  background-color: #FDF1DC;
}

.chat-message-quest-start .name,
.chat-message-item-give .name,
.chat-message-attack .name,
.chat-message-heal .name {
  font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
  color: #922610;
}
.chat-message-quest-start .description,
.chat-message-item-give .description,
.chat-message-attack .description,
.chat-message-heal .description {
  font-family: 'Libre Baskerville', 'Lora', 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
  color: #222222;
}


.imessage {
  display: flex;
  flex-direction: column;

  font-size: 1.25rem;
  padding: 0.5rem 1.5rem;
  background-color: #ffffff;
}

.imessage p {
  border-radius: 1.15rem;
  line-height: 1.25;
  max-width: 75%;
  padding: 0.5rem .875rem;
  position: relative;
  word-wrap: break-word;
}

.imessage p::before,
.imessage p::after {
  bottom: -0.1rem;
  content: "";
  height: 1rem;
  position: absolute;
}

p[class^="from-"] {
  margin: 0.5rem 0;
  width: fit-content;
}

p[class^="from-"].emoji {
  background: none;
  font-size: 2.5rem;
}

p[class^="from-"].emoji::before {
  content: none;
}

p.from-me {
  align-self: flex-end;
  background-color: #248bf5;
  color: #fff; 
}

p.from-me::before {
  border-bottom-left-radius: 0.8rem 0.7rem;
  border-right: 1rem solid #248bf5;
  right: -0.35rem;
  transform: translate(0, -0.1rem);
}

p.from-me::after {
  background-color: #fff;
  border-bottom-left-radius: 0.5rem;
  right: -40px;
  transform:translate(-30px, -2px);
  width: 10px;
}

p.from-me ~ p.from-me {
  margin: 0.25rem 0 0;
}

p.from-me ~ p.from-me:not(:last-child) {
  margin: 0.25rem 0 0;
}

p.from-me ~ p.from-me:last-child {
  margin-bottom: 0.5rem;
}




/* from-me-index */
p.from-me-index {
  align-items: flex-start;
  background-color: #248bf5;
  color: #ffffff;
}
p.from-me-index:before {
  border-bottom-right-radius: 0.8rem 0.7rem;
  border-left: 1rem solid #248bf5;
  left: -0.35rem;
  transform: translate(0, -0.1rem);
}
p.from-me-index::after {
  background-color: #fff;
  border-bottom-right-radius: 0.5rem;
  left: 20px;
  transform: translate(-30px, -2px);
  width: 10px;
}
p.from-me-index ~ p.from-me-index {
  margin: 0.25rem 0 0;
}

p.from-me-index ~ p.from-me-index:not(:last-child) {
  margin: 0.25rem 0 0;
}

p.from-me-index ~ p.from-me-index:last-child {
  margin-bottom: 0.5rem;
}

/* from-them */
p.from-them {
  align-items: flex-start;
  background-color: #e5e5ea;
  color: #000;
}

p.from-them:before {
  border-bottom-right-radius: 0.8rem 0.7rem;
  border-left: 1rem solid #e5e5ea;
  left: -0.35rem;
  transform: translate(0, -0.1rem);
}
p.from-them::after {
  background-color: #fff;
  border-bottom-right-radius: 0.5rem;
  left: 20px;
  transform: translate(-30px, -2px);
  width: 10px;
}

/* from-them-index */
p.from-them-index {
  align-self: flex-end;
  background-color: #e5e5ea;
  color: #000;
  float: right;
}
p.from-them-index::before {
  border-bottom-left-radius: 0.8rem 0.7rem;
  border-right: 1rem solid #e5e5ea;
  right: -0.35rem;
  transform: translate(0, -0.1rem);
}
p.from-them-index::after {
  background-color: #fff;
  border-bottom-left-radius: 0.5rem;
  right: -40px;
  transform:translate(-30px, -2px);
  width: 10px;
}


.no-tail::before {
  display: none;
}

.margin-b_none {
  margin-bottom: 0 !important;
}

.margin-b_one {
  margin-bottom: 1rem !important;
}

.margin-t_one {
  margin-top: 1rem !important;
}


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

  .imessage {
    font-size: 1.05rem;
    margin: 0 auto 1rem;
    max-width: 600px;
    padding: 0.25rem 0.875rem;
  }

  .imessage p {
    margin: 0.5rem 0;
  }
}

.typing-indicator {
  display: flex;
  align-items: center;
  margin: 0.3rem 0;
}
.typing-indicator span {
  height: 15px;
  width: 15px;
  float: left;
  margin: 0 1px;
  background-color: #9E9EA1;
  display: block;
  border-radius: 50%;
  opacity: 0.4;
}
.typing-indicator span:nth-of-type(1) {
  -webkit-animation: 1s blink infinite 0.3333s;
          animation: 1s blink infinite 0.3333s;
}
.typing-indicator span:nth-of-type(2) {
  -webkit-animation: 1s blink infinite 0.6666s;
          animation: 1s blink infinite 0.6666s;
}
.typing-indicator span:nth-of-type(3) {
  -webkit-animation: 1s blink infinite 0.9999s;
          animation: 1s blink infinite 0.9999s;
}

@-webkit-keyframes blink {
  50% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes bulge {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}
@keyframes bulge {
  50% {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}