/*Text colors*/

.red {
	color: #fe5050;
	text-shadow: 2px 2px #0000005d;
  }

.orange {
	color: #fe9350;
	text-shadow: 2px 2px #0000005d;
  }

.yellow {
	color: #feea50;
	text-shadow: 2px 2px #0000005d;
  }

.green {
	color: #61fe50;
	text-shadow: 2px 2px #0000005d;
  }

.blue {
	color: #50d5fe;
	text-shadow: 2px 2px #0000005d;
  }

.darkblue {
	color: #303df0;
	text-shadow: 2px 2px #0000005d;
  }

.purple {
	color: #ad50fe;
	text-shadow: 2px 2px #0000005d;
  }

.pink {
	color: #fe50c7;
	text-shadow: 2px 2px #0000005d;
  }

/*Speech bubble code below. I don't know what does what, and if it's all necessary, so be careful with it.*/
/*Original: https://codepen.io/jcsiegrist/pen/nwMwGW */

.pinkbubble {
	position: relative;
	background-color: #f79fc8;
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #b85287;
  }
  .pinkbubble.arrow::before,
  .pinkbubble.arrow::after {
	position: absolute;
	background-color: #f79fc8;
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .pinkbubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .pinkbubble.arrow::after {
	bottom: -8px;
	border: 3px solid #b85287;
	border-width: 0 4px 3px 4px;
  }
  
  .pinkbubble > .content {
	position: relative;
	background-color: #f79fc8;
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .pinkbubble.br::before,
  .pinkbubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .pinkbubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .pinkbubble.tl::before,
  .pinkbubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .pinkbubble.tl::before { 
	display:none;
  }
  
  .pinkbubble.tr::before,
  .pinkbubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .pinkbubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .pinkbubble.small,
  .pinkbubble.small > .content {
	border-radius: 10px;
  }
  .pinkbubble.medium,
  .pinkbubble.medium > .content {
	border-radius: 13px;
  }
  .pinkbubble.large,
  .pinkbubble.large > .content {
	border-radius: 25px;
  }
  
/*blue bubble*/

.bluebubble {
	position: relative;
	background-color: #79acf2;
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #3f64a1;
  }
  .bluebubble.arrow::before,
  .bluebubble.arrow::after {
	position: absolute;
	background-color: #79acf2;
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .bluebubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .bluebubble.arrow::after {
	bottom: -8px;
	border: 3px solid #3f64a1;
	border-width: 0 4px 3px 4px;
  }
  
  .bluebubble > .content {
	position: relative;
	background-color: #79acf2;
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .bluebubble.br::before,
  .bluebubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .bluebubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .bluebubble.tl::before,
  .bluebubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .bluebubble.tl::before { 
	display:none;
  }
  
  .bluebubble.tr::before,
  .bluebubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .bluebubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .bluebubble.small,
  .bluebubble.small > .content {
	border-radius: 10px;
  }
  .bluebubble.medium,
  .bluebubble.medium > .content {
	border-radius: 13px;
  }
  .bluebubble.large,
  .bluebubble.large > .content {
	border-radius: 25px;
  }


/*black bubble*/

.blackbubble {
	position: relative;
	background-color: #0d0d0d;
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #313131;
  }
  .blackbubble.arrow::before,
  .blackbubble.arrow::after {
	position: absolute;
	background-color: #0d0d0d;
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .blackbubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .blackbubble.arrow::after {
	bottom: -8px;
	border: 3px solid #313131;
	border-width: 0 4px 3px 4px;
  }
  
  .blackbubble > .content {
	position: relative;
	background-color: #0d0d0d;
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .blackbubble.br::before,
  .blackbubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .blackbubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .blackbubble.tl::before,
  .blackbubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .blackbubble.tl::before { 
	display:none;
  }
  
  .blackbubble.tr::before,
  .blackbubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .blackbubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .blackbubble.small,
  .blackbubble.small > .content {
	border-radius: 10px;
  }
  .blackbubble.medium,
  .blackbubble.medium > .content {
	border-radius: 13px;
  }
  .blackbubble.large,
  .blackbubble.large > .content {
	border-radius: 25px;
  }
  

/*yellow bubble*/

.yellowbubble {
	position: relative;
	background-color: #dcc544;
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #b08d25;
  }
  .yellowbubble.arrow::before,
  .yellowbubble.arrow::after {
	position: absolute;
	background-color: #dcc544;
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .yellowbubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .yellowbubble.arrow::after {
	bottom: -8px;
	border: 3px solid #b08d25;
	border-width: 0 4px 3px 4px;
  }
  
  .yellowbubble > .content {
	position: relative;
	background-color: #dcc544;
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .yellowbubble.br::before,
  .yellowbubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .yellowbubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .yellowbubble.tl::before,
  .yellowbubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .yellowbubble.tl::before { 
	display:none;
  }
  
  .yellowbubble.tr::before,
  .yellowbubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .yellowbubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .yellowbubble.small,
  .yellowbubble.small > .content {
	border-radius: 10px;
  }
  .yellowbubble.medium,
  .yellowbubble.medium > .content {
	border-radius: 13px;
  }
  .yellowbubble.large,
  .yellowbubble.large > .content {
	border-radius: 25px;
  }

/*red bubble*/

.redbubble {
	position: relative;
	background-color: #df5353; /*fill*/
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #b0252a; /*border*/
  }
  .redbubble.arrow::before,
  .redbubble.arrow::after {
	position: absolute;
	background-color: #df5353; /*fill*/
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .redbubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .redbubble.arrow::after {
	bottom: -8px;
	border: 3px solid #b0252a; /*border*/
	border-width: 0 4px 3px 4px;
  }
  
  .redbubble > .content {
	position: relative;
	background-color: #df5353; /*fill*/
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .redbubble.br::before,
  .redbubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .redbubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .redbubble.tl::before,
  .redbubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .redbubble.tl::before { 
	display:none;
  }
  
  .redbubble.tr::before,
  .redbubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .redbubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .redbubble.small,
  .redbubble.small > .content {
	border-radius: 10px;
  }
  .redbubble.medium,
  .redbubble.medium > .content {
	border-radius: 13px;
  }
  .redbubble.large,
  .redbubble.large > .content {
	border-radius: 25px;
  }

/*orange bubble*/

.orangebubble {
	position: relative;
	background-color: #e88d51; /*fill*/
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #b05325; /*border*/
  }
  .orangebubble.arrow::before,
  .orangebubble.arrow::after {
	position: absolute;
	background-color: #e88d51; /*fill*/
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .orangebubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .orangebubble.arrow::after {
	bottom: -8px;
	border: 3px solid #b05325; /*border*/
	border-width: 0 4px 3px 4px;
  }
  
  .orangebubble > .content {
	position: relative;
	background-color: #e88d51; /*fill*/
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .orangebubble.br::before,
  .orangebubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .orangebubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .orangebubble.tl::before,
  .orangebubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .orangebubble.tl::before { 
	display:none;
  }
  
  .orangebubble.tr::before,
  .orangebubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .orangebubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .orangebubble.small,
  .orangebubble.small > .content {
	border-radius: 10px;
  }
  .orangebubble.medium,
  .orangebubble.medium > .content {
	border-radius: 13px;
  }
  .orangebubble.large,
  .orangebubble.large > .content {
	border-radius: 25px;
  }

/*green bubble*/

.greenbubble {
	position: relative;
	background-color: #6acf45; /*fill*/
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #548b19; /*border*/
  }
  .greenbubble.arrow::before,
  .greenbubble.arrow::after {
	position: absolute;
	background-color: #6acf45; /*fill*/
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .greenbubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .greenbubble.arrow::after {
	bottom: -8px;
	border: 3px solid #548b19; /*border*/
	border-width: 0 4px 3px 4px;
  }
  
  .greenbubble > .content {
	position: relative;
	background-color: #6acf45; /*fill*/
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .greenbubble.br::before,
  .greenbubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .greenbubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .greenbubble.tl::before,
  .greenbubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .greenbubble.tl::before { 
	display:none;
  }
  
  .greenbubble.tr::before,
  .greenbubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .greenbubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .greenbubble.small,
  .greenbubble.small > .content {
	border-radius: 10px;
  }
  .greenbubble.medium,
  .greenbubble.medium > .content {
	border-radius: 13px;
  }
  .greenbubble.large,
  .greenbubble.large > .content {
	border-radius: 25px;
  }

/*darkgreen bubble*/

.darkgreenbubble {
	position: relative;
	background-color: #1e7021; /*fill*/
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #0f4120; /*border*/
  }
  .darkgreenbubble.arrow::before,
  .darkgreenbubble.arrow::after {
	position: absolute;
	background-color: #1e7021; /*fill*/
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .darkgreenbubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .darkgreenbubble.arrow::after {
	bottom: -8px;
	border: 3px solid #0f4120; /*border*/
	border-width: 0 4px 3px 4px;
  }
  
  .darkgreenbubble > .content {
	position: relative;
	background-color: #1e7021; /*fill*/
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .darkgreenbubble.br::before,
  .darkgreenbubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .darkgreenbubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .darkgreenbubble.tl::before,
  .darkgreenbubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .darkgreenbubble.tl::before { 
	display:none;
  }
  
  .darkgreenbubble.tr::before,
  .darkgreenbubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .darkgreenbubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .darkgreenbubble.small,
  .darkgreenbubble.small > .content {
	border-radius: 10px;
  }
  .darkgreenbubble.medium,
  .darkgreenbubble.medium > .content {
	border-radius: 13px;
  }
  .darkgreenbubble.large,
  .darkgreenbubble.large > .content {
	border-radius: 25px;
  }

/*cyan bubble*/

.cyanbubble {
	position: relative;
	background-color: #2accb4; /*fill*/
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #127755; /*border*/
  }
  .cyanbubble.arrow::before,
  .cyanbubble.arrow::after {
	position: absolute;
	background-color: #2accb4; /*fill*/
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .cyanbubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .cyanbubble.arrow::after {
	bottom: -8px;
	border: 3px solid #127755; /*border*/
	border-width: 0 4px 3px 4px;
  }
  
  .cyanbubble > .content {
	position: relative;
	background-color: #2accb4; /*fill*/
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .cyanbubble.br::before,
  .cyanbubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .cyanbubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .cyanbubble.tl::before,
  .cyanbubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .cyanbubble.tl::before { 
	display:none;
  }
  
  .cyanbubble.tr::before,
  .cyanbubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .cyanbubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .cyanbubble.small,
  .cyanbubble.small > .content {
	border-radius: 10px;
  }
  .cyanbubble.medium,
  .cyanbubble.medium > .content {
	border-radius: 13px;
  }
  .cyanbubble.large,
  .cyanbubble.large > .content {
	border-radius: 25px;
  }

/*dark blue bubble*/

.darkbluebubble {
	position: relative;
	background-color: #5252df; /*fill*/
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #281366; /*border*/
  }
  .darkbluebubble.arrow::before,
  .darkbluebubble.arrow::after {
	position: absolute;
	background-color: #5252df; /*fill*/
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .darkbluebubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .darkbluebubble.arrow::after {
	bottom: -8px;
	border: 3px solid #281366; /*border*/
	border-width: 0 4px 3px 4px;
  }
  
  .darkbluebubble > .content {
	position: relative;
	background-color: #5252df; /*fill*/
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .darkbluebubble.br::before,
  .darkbluebubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .darkbluebubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .darkbluebubble.tl::before,
  .darkbluebubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .darkbluebubble.tl::before { 
	display:none;
  }
  
  .darkbluebubble.tr::before,
  .darkbluebubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .darkbluebubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .darkbluebubble.small,
  .darkbluebubble.small > .content {
	border-radius: 10px;
  }
  .darkbluebubble.medium,
  .darkbluebubble.medium > .content {
	border-radius: 13px;
  }
  .darkbluebubble.large,
  .darkbluebubble.large > .content {
	border-radius: 25px;
  }
  
/*purple bubble*/

.purplebubble {
	position: relative;
	background-color: #b978e4; /*fill*/
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #8f3397; /*border*/
  }
  .purplebubble.arrow::before,
  .purplebubble.arrow::after {
	position: absolute;
	background-color: #b978e4; /*fill*/
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .purplebubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .purplebubble.arrow::after {
	bottom: -8px;
	border: 3px solid #8f3397; /*border*/
	border-width: 0 4px 3px 4px;
  }
  
  .purplebubble > .content {
	position: relative;
	background-color: #b978e4; /*fill*/
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .purplebubble.br::before,
  .purplebubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .purplebubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .purplebubble.tl::before,
  .purplebubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .purplebubble.tl::before { 
	display:none;
  }
  
  .purplebubble.tr::before,
  .purplebubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .purplebubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .purplebubble.small,
  .purplebubble.small > .content {
	border-radius: 10px;
  }
  .purplebubble.medium,
  .purplebubble.medium > .content {
	border-radius: 13px;
  }
  .purplebubble.large,
  .purplebubble.large > .content {
	border-radius: 25px;
  }

/*dark purple bubble*/

.darkpurplebubble {
	position: relative;
	background-color: #7e19b1; /*fill*/
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #5c1078; /*border*/
  }
  .darkpurplebubble.arrow::before,
  .darkpurplebubble.arrow::after {
	position: absolute;
	background-color: #7e19b1; /*fill*/
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .darkpurplebubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .darkpurplebubble.arrow::after {
	bottom: -8px;
	border: 3px solid #5c1078; /*border*/
	border-width: 0 4px 3px 4px;
  }
  
  .darkpurplebubble > .content {
	position: relative;
	background-color: #7e19b1; /*fill*/
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .darkpurplebubble.br::before,
  .darkpurplebubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .darkpurplebubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .darkpurplebubble.tl::before,
  .darkpurplebubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .darkpurplebubble.tl::before { 
	display:none;
  }
  
  .darkpurplebubble.tr::before,
  .darkpurplebubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .darkpurplebubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .darkpurplebubble.small,
  .darkpurplebubble.small > .content {
	border-radius: 10px;
  }
  .darkpurplebubble.medium,
  .darkpurplebubble.medium > .content {
	border-radius: 13px;
  }
  .darkpurplebubble.large,
  .darkpurplebubble.large > .content {
	border-radius: 25px;
  }

/*magenta bubble*/

.magentabubble {
	position: relative;
	background-color: #a52294; /*fill*/
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #731655; /*border*/
  }
  .magentabubble.arrow::before,
  .magentabubble.arrow::after {
	position: absolute;
	background-color: #a52294; /*fill*/
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .magentabubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .magentabubble.arrow::after {
	bottom: -8px;
	border: 3px solid #731655; /*border*/
	border-width: 0 4px 3px 4px;
  }
  
  .magentabubble > .content {
	position: relative;
	background-color: #a52294; /*fill*/
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .magentabubble.br::before,
  .magentabubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .magentabubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .magentabubble.tl::before,
  .magentabubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .magentabubble.tl::before { 
	display:none;
  }
  
  .magentabubble.tr::before,
  .magentabubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .magentabubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .magentabubble.small,
  .magentabubble.small > .content {
	border-radius: 10px;
  }
  .magentabubble.medium,
  .magentabubble.medium > .content {
	border-radius: 13px;
  }
  .magentabubble.large,
  .magentabubble.large > .content {
	border-radius: 25px;
  }

/*dark pink bubble*/

.darkpinkbubble {
	position: relative;
	background-color: #f151c4; /*fill*/
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #a81a7f; /*border*/
  }
  .darkpinkbubble.arrow::before,
  .darkpinkbubble.arrow::after {
	position: absolute;
	background-color: #f151c4; /*fill*/
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .darkpinkbubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .darkpinkbubble.arrow::after {
	bottom: -8px;
	border: 3px solid #a81a7f; /*border*/
	border-width: 0 4px 3px 4px;
  }
  
  .darkpinkbubble > .content {
	position: relative;
	background-color: #f151c4; /*fill*/
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .darkpinkbubble.br::before,
  .darkpinkbubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .darkpinkbubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .darkpinkbubble.tl::before,
  .darkpinkbubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .darkpinkbubble.tl::before { 
	display:none;
  }
  
  .darkpinkbubble.tr::before,
  .darkpinkbubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .darkpinkbubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .darkpinkbubble.small,
  .darkpinkbubble.small > .content {
	border-radius: 10px;
  }
  .darkpinkbubble.medium,
  .darkpinkbubble.medium > .content {
	border-radius: 13px;
  }
  .darkpinkbubble.large,
  .darkpinkbubble.large > .content {
	border-radius: 25px;
  }

/*base*/
/*darkgreen bubble*/

.bubble {
	position: relative;
	background-color: #1e7021; /*fill*/
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	border: 3px solid #0f4120; /*border*/
  }
  .bubble.arrow::before,
  .bubble.arrow::after {
	position: absolute;
	background-color: #1e7021; /*fill*/
	content:"\00a0";
	display: block;
	height: 18px;
	width: 24px;
	left: 20px;
	bottom: -10px;
	transform: rotate(-45deg) skew(-45deg);
  }
  .bubble.arrow::before { 
	background-color: transparent;
	width: 30px;
  }
  .bubble.arrow::after {
	bottom: -8px;
	border: 3px solid #0f4120; /*border*/
	border-width: 0 4px 3px 4px;
  }
  
  .bubble > .content {
	position: relative;
	background-color: #1e7021; /*fill*/
	border-radius: 10px;
	z-index: 1;
	padding: 1px 5px;
  }
  
  .bubble.br::before,
  .bubble.br::after {
	left: auto;
	right: 30px;
	transform: rotate(45deg) skew(45deg);
  }
  .bubble.br::before { 
	bottom: -10px;
	width: 24px;
	right: 21px;
  }
  
  .bubble.tl::before,
  .bubble.tl::after {
	bottom: auto;
	top: -8px;
	height: 19px;
	transform: rotate(-135deg) skew(45deg);
  }
  .bubble.tl::before { 
	display:none;
  }
  
  .bubble.tr::before,
  .bubble.tr::after {
	bottom: auto;
	left: auto;
	right: 110px; /*Changes arrow position*/
	top: -5px;
	height: 19px;
	transform: rotate(135deg) skew(-45deg);
  }
  .bubble.tr::before { 
	bottom: auto;
	top: -9px;
	width: 24px;
	right: 21px;
  }
  .bubble.small,
  .bubble.small > .content {
	border-radius: 10px;
  }
  .bubble.medium,
  .bubble.medium > .content {
	border-radius: 13px;
  }
  .bubble.large,
  .bubble.large > .content {
	border-radius: 25px;
  }