:root {
  --black: #0F0F0F;
  --dark-grey: #3F3F3F;
  --white: #fcfcfc;
  --light-grey: #D0D0D0;
  --lilac: #9A9AFF;
  --pure-white: #ffffff;
}


body {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: var(--light-grey);
  background-color: var(--black);
}

.container-fluid {
  min-height: 100dvh;
}

.header {
  font-size: 30px;
}

.top-row {
  height: 10dvh;
}

.bottom-row {
  flex: 1;
}

.lilac {
  color: var(--lilac);
}

.white {
  color: var(--white);
}

.logo {
  max-height: 84px;
  width: auto;
  max-width: 80%;
}

.outline-dark-grey {
  outline: 1px solid var(--dark-grey);
}

.height-spacer {
  min-height: 40px;
}

.width-spacer {
  min-width: 60px;
}

.flex-1 {
  flex: 1;
}

.flex-3 {
  flex: 3;
}

a {
  text-decoration: none;
  color: var(--light-grey);
}

.message-box-container {
  height: 60px;
}

.portrait-background {
  background: url("./serene-portrait.png") no-repeat;
  background-size: cover;
  background-position-y: 30%;
}

.flower-background {
  background: url("./flowers.png") no-repeat;
  background-size: cover;
}

.min-height-6em {
  min-height: 6em;
}

.min-height-7em {
  min-height: 7em;
}

@media screen and (max-width: 991px) {
  .header {
    font-size: 20px;
  }

  .mobile-hide-outline.outline-dark-grey {
    outline: 0;
  }
}