.parent {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-auto-rows: minmax(500px, auto);
		}
		li
		{
			list-style-type: none;
		}
		.text-bit {
			width: 95%;
			text-align: left;
			margin-left: 10px;
		}
		.grid-item {
			margin-right: auto;
			margin-left: auto;
		}
		iframe {
			width: 98%;
			height: 90%;
		}
		.imessage {
			background-color: #fff;
			border-radius: 0.25rem;
			display: flex;
			flex-direction: column;
			font-family: "San Francisco", sans-serif;
			font-size: .9rem;
			max-width: 600px;
			padding: 0.5rem 1.5rem;
		}
		.imessage p {
			border-radius: 1.15rem;
			line-height: 1.25;
			max-width: 75%;
			padding: 0.5rem .875rem;
			position: relative;
			word-wrap: break-word;
		}
		p.from-them {
			align-items: flex-start;
			background-color: #e5e5ea;
			color: #000;
		}
		.imessage p::before,
		.imessage p::after {
			bottom: -0.1rem;
			content: "";
			height: 1rem;
			position: absolute;
		}
		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[class^="from-"] {
			margin: 0.5rem 0;
			width: fit-content;
		}
		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;
		}
		p.from-them::after {
			background-color: #fff;
			border-bottom-right-radius: 0.5rem;
			left: 20px;
			transform: translate(-30px, -2px);
			width: 10px;
		}
		@font-face {
			font-family: "San Francisco";
			src:
			url("https://cdn.rawgit.com/AllThingsSmitty/fonts/25983b71/SanFrancisco/sanfranciscodisplay-regular-webfont.woff2") format("woff2"),
			url("https://cdn.rawgit.com/AllThingsSmitty/fonts/25983b71/SanFrancisco/sanfranciscodisplay-regular-webfont.woff") format("woff");
		}