* {
  box-sizing: border-box;
}

:root {
  --clr-black: black;
  --clr-white: white;

  /* Grey Scale */
  --clr-grey-900: #3D3D3D;
  --clr-grey-800: #464646;
  --clr-grey-700: #5A5A5A;
  --clr-grey-600: #757575;
  --clr-grey-500: #8D8D8D;
  --clr-grey-400: #A7A6A6;
  --clr-grey-300: #C4C4C4;
  --clr-grey-200: #E3E3E3;
  --clr-grey-150: #E9E9E9;
  --clr-grey-100: #F2F2F2;
  --clr-grey-50: #F8F8F8;
  --clr-grey-25: #fCfCfC;

  --font-size-base: 1.5rem;
}

html {
  color: var(--clr-white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-base);
}

body {
  background-color: var(--clr-grey-900);
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.verse-reference {
  font-size: 1rem;
}

.verse-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
}

.verse-translation {
  align-self: end;
}