html {
  height: 99.5%;
  width: 99.5%;
  overflow: scroll;
}

body {
  background-color: #8ec4e8;
  background-image: url("files/g/purplestars.gif");
  color: #373E7F;
  font-family: Exo, "Trebuchet MS", Tahoma;
  height: 99.5%;
  width: 99.5%;
  overflow: scroll;
}


div {
  display: block;
	margin-left: auto;
	margin-right: auto;
  }


.topbubble {
  color: #373E7F;
  font-size: 18px;
  max-width: 60%;
  width: max-content;
  height: max-content;
  text-align: center;
  margin-top: 2%;
  margin-bottom:2%;
}
.topbubble {
  /* tail dimension */
  --b: 2em; /* base */
  --h: 2em; /* height */

  --p: 30%; /* main position (0%:left 100%:right) */
  --x: -1.5em; /* tail position (relative to the main position). Can be percentage */
  --r: 1.2em; /* the radius */
  --c: #CCCFF0;

  padding: 1em;
  border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2) min(var(--r),var(--p) - var(--b)/2)/var(--r);
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    clamp(var(--b),var(--p) + var(--b)/2,100%) 100%,
    calc(var(--p) + var(--x)) calc(100% + var(--h)),
    clamp(0%,var(--p) - var(--b)/2,100% - var(--b)) 100%);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) 0 0 1 0/0 0 var(--h) 0/0 999px var(--h) 999px;
}


.bottombubble {
  color: #373E7F;
  font-size: 18px;
  max-width: 80%;
  width: 35ch;
  height: max-content;
  text-align: center;
  margin-top: 2%;
  margin-bottom:3%;
}
.bottombubble {
  /* tail dimension */
  --b: 2em; /* base */
  --h: 2em; /* height */

  --p: 30%; /* main position (0%:left 100%:right) */
  --x:-1.5em; /* tail position (relative to the main position). Can be percentage */
  --r: 1.2em; /* the radius */
  --c: #CCCFF0;

  padding: 1em;
  border-radius: min(var(--r),var(--p) - var(--b)/2) min(var(--r),100% - var(--p) - var(--b)/2) var(--r) var(--r)/var(--r);
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    clamp(var(--b),var(--p) + var(--b)/2,100%) 0,
    calc(var(--p) + var(--x)) calc(-1*var(--h)),
    clamp(0%,var(--p) - var(--b)/2,100% - var(--b)) 0);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) 1 0 0/var(--h) 0 0/var(--h) 999px 0 999px;
}

.other {
  font-family: Exo, "Trebuchet MS", Tahoma;
  background-color: #CCCFF0;
  color: #373E7F;
  font-size: 18px;
  border-radius: 15px;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
}

.other2 {
  font-family: Exo, "Trebuchet MS", Tahoma;
  background-color: #373E7F;
  color: #8ec4e8;
  font-size: 18px;
  border-radius: 15px;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
}

a, a:visited, a:hover {
  color: #8ec4e8;
  text-decoration: none;
}