:root {
  --sap-blue1: #ebf8ff;
  --sap-blue2: #d1efff;
  --sap-blue3: #a6e0ff;
  --sap-blue4: #89d1ff;
  --sap-blue6: #1b90ff;
  --sap-blue7: #0070f2;
  --sap-blue8: #0057d2;
  --sap-blue10: #002a86;
  --sap-blue11: #00144a;

  --sap-indigo1: #f1ecff;
  --sap-indigo2: #e2d8ff;
  --sap-indigo4: #b894ff;
  --sap-indigo6: #7858ff;
  --sap-indigo7: #5d36ff;
  --sap-indigo10: #1c0c6e;
  --sap-indigo11: #0e0637;
 }

body {
  background-color: var(--sap-blue1);
  color: var(--sap-blue10);

  margin: 1rem;

  font-family: Arial, Helvetica, sans-serif;
}

.letter-box-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
	width: 100%;
}

.letter-box-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
  max-width: 1200px;
	line-height: 1.5;
}

.letter-box-inner:has(article) {
	align-items: center;
}

.serif-italic {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 1.1rem;
}

.highlight {
  background: linear-gradient(to top, var(--sap-indigo2) 0.55rem, transparent 0.45rem);
  align-self: flex-start;
	line-height: 1;
}

a.highlight {
  text-decoration: none;
  color: inherit;
}

.bold {
  font-weight: bold;
}

article {
	width: 100%;
	max-width: 720px;
}

article .header-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

article .header-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

article .topic {
	height: 8rem;
}

@media (max-width: 1000px) {
	article .topic {
		height: 5rem;
	}
}

article img {
	max-width: 100%;
}

pre {
	background-color: white;
	padding: 1rem;
	border-radius: 1rem;
	overflow-x: auto;
}

p code {
	border-radius: 0.4rem;
	padding: 0.2rem 0.4rem;
	background-color: white;
}

code {
	font-size: 0.85rem;
	overflow-wrap: break-word;
}

.utterances {
  margin-top: 5rem;
}