Untitled

HTML
<body class="bg-dark">
  <div class="container-fluid page-container">
    <div class="row">
      <div class="col-6 tcontainer-frame">
        <div class="tcontainer"><span class="teal-font">Hello. You have landed on the Image Alchemists' web portal. We
            welcome
            you. Please make your
            selection to the right.</span>
        </div>
      </div>
      <div class="col-6 link-container">
        <div id="newSolCircle"><p>New Solicitor</p></div>
        <div id="patronCircle"><p>Patron</p></div>
        <div id="alchemistCircle"><p>Alchemist</p></div>
      </div>
    </div>
  </div>
  </div>
</body>

CSS
/*variable declarations*/

:root {
  --teal: #37C8AB;
  --white: #ffffff;
  --black: #000000;
  --lilac: #B380FF;
  --purple: #7137C8;
  --aqua: #008066;
}

/*page body*/
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.page-container {
  background: var(--lilac);
  margin-top: 10px;
  padding-bottom: 5em;
  padding-left: 2em;
  padding-top: 5.8em;
}

/*Text Conatiner*/

.tcontainer-frame {
  background: var(--purple);
  border: var(--black) 2px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
}

.tcontainer {
  background: var(--black);
  font-size: 24px;
  padding: 12em 1em;
  text-align: center;
}

.teal-font {
  color: var(--teal);
}

/*Link container*/
.link-container {
  display: flex;
  flex-flow: column wrap;
  padding: 4em;
  text-align: center;
}

#newSolCircle {
  align-items: center;
  align-self: flex-start;
  background: var(--teal);
  border-radius: 100%;
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  margin: 2em;
  padding: 1em;
}

#patronCircle {
  align-items: center;
  align-self: center;
  background: var(--aqua);
  border-radius: 100%;
  display: flex;
  flex: 1 1 0;
  margin: 2em;
  padding: 1em;
}

#alchemistCircle {
  align-items: center;
  align-self: flex-end;
  background: var(--purple);
  border-radius: 100%;
  display: flex;
  flex: 1 1 0;
  margin: 2em;
  padding: 1em;
}