:root {
  --blue: rgb(100, 100, 255);
  --red: rgb(255, 100, 100);
  --green: rgb(150, 255, 150);
  --yellow: rgb(255, 255, 150);
  --black: rgb(20, 20, 20);
  --white: rgb(240, 240, 240);
  --opacity: 0.7; 
  --bs-primary: var(--blue);
  --bs-secondary: var(--red);
}


* {
  margin: 0;
  padding: 0;
  cursor: default;
}


#asciiDiv {
  position: relative;
  top: 0;
  left: 0;
  width: max-content;
  z-index: -1;
}

section {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 100vw;
  padding: 0;
}


.textDiv {
  display: none;
  width: max-content;
  max-width: 80vw;
  height: max-content;
  background-color: rgba(20, 20, 20, var(--opacity));
  padding: 20px;
  margin: 90px;
  border-radius: 20px;
  backdrop-filter: blur(5px);
}

.textDiv,
.textDiv p,
.textDiv h1,
.textDiv img {
  cursor: grab;
}

.textDiv:has(> img) {
  width: 400px;
  transition: width 0.8s ease; 
}

.textDiv img {
  border-radius: 10px;
  width: 100%;
}

.textDiv.open p,
.textDiv.open h1 {
  font-size: clamp(4vw, 56px, 8vw);
}

.textDiv:has(> img).open {
  width: 50vw;
  height: max-content;
}

.title {
  background-color: rgba(255, 100, 100, var(--opacity));
  color: white;
}

h1,
p {
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(1.4vw, 28px, 4vw);
  line-height: 1.4;
  transition: font-size 0.8s ease; 
}

p {
  letter-spacing: -1px;
}

.speaker {
  font-weight: bolder;
  color: var(--yellow)
}

.dialog {
  font-style: italic;
  color: var(--white)
}


.textDiv:has(> .scene) {
  background-color: rgba(100, 100, 255, var(--opacity));
  color: var(--white);
}

.scene {
  color: var(--green);
}

.textDiv:last-of-type {
  background-color: rgba(255, 255, 150, var(--opacity));
}

.textDiv:last-of-type p {
  color: var(--black);
}