simpleflex.css

<!-- default value is 16px; we convert it to 10px -->

html {
  font-size: 10px;
} 

body {
  margin: 0;
  height: 100vh;
  font-family: sans-serif;
  font-size: 1rem;
}

.flex-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.flex-left {
  width: 25%;
  margin: 5px;
  padding: 5px;
  border: none;
  display: grid;
  place-items: left;
}

.flex-left ul {
text-align: left;
line-height: 1.0;
color: #333333;
}
.flex-left li {
text-align: left;
line-height: 1.0;
font-family: sans-serif;
font-size: .85rem;
color: #333333;
}

.flex-left a {
text-align: left;
line-height: 1.0;
font-family: sans-serif;
font-size: .85rem;
}

.flex-right {
  width: 75%;
  margin: 5px;
  padding: 5px;
  border: none;
  display: grid;
  place-items: center;
}

.quoteyell  {
 font-family: sans-serif;
 font-size: .75rem;
 text-align: center;
 padding: 10px;
 background-color: #FEF9D6;
 padding-top: 12px;
 padding-bottom: 12px;
 margin-bottom: 30px;
 width: 80%;

}

.quotepink  {
 font-family: sans-serif;
 font-size: .75rem;
 text-align: center;
 padding: 10px;
 background-color: #F5CDEE;
 padding-top: 12px;
 padding-bottom: 12px;
 margin-bottom: 30px;
 width: 80%;
}

.quoteblue  {
 font-family: sans-serif;
 font-size: .75rem;
 text-align: center;
 padding: 10px;
 background-color: #E1F2FF;
 padding-top: 12px;
 padding-bottom: 12px;
 margin-bottom: 30px;
 width: 80%;
}

.regis-yellow  {
 font-family: sans-serif;
 font-size: .75rem;
 padding: 10px;
 background-color: #FEF9D6;
 padding-top: 12px;
 padding-bottom: 12px;
}