:root {
  --global-padding: 1.5em;
  --turquoise-dark: #1f7a65;
  --turquoise-medium-dark: #00bf8e;
  --turquoise: #00e5aa; /* rgb(0, 229, 170) */
  --turquoise-medium: #00edb0;
  --turquoise-light: #40ffce;
  --turquoise-very-light: #d9fff5;
  --turquoise-very-very-light: #e6fff8;
  --navy-blue-dark: #1c1b26;
  --navy-blue: #3f3d56;
  --navy-blue-medium: #4b4866;
  --navy-blue-medium-light: #5c5980;
  --navy-blue-light: #a5a3bf;
  --navy-blue-very-light: #d1cff2;
  --navy-blue-very-very-light: #e2e1f2;
  --pink-dark: #3d1a40;
  --pink-medium-dark: #7b3380;
  --pink: #c653ce;
  --pink-medium: #d26cd9;
  --pink-medium-light: #d382d9;
  --pink-light: #eeb6f2;
  --pink-very-light: #fde6ff;
  --yellow-dark: #807000;
  --yellow-medium-dark: #d9be00;
  --yellow: #ffdf00;
  --yellow-medium: #ffe740;
  --yellow-medium-light: #ffef80;
  --yellow-light: #fff7bf;
  --yellow-very-light: #fffbdf;
  --gray-very-dark: rgb(20, 20, 20);
  --gray-dark: rgb(50, 50, 50);
  --gray-medium-dark: rgb(74, 74, 74);
  --gray: rgb(100, 100, 100);
  --gray-medium: rgb(128, 128, 128);
  --gray-medium-light: rgb(200, 200, 200);
  --gray-light: rgb(235, 235, 235);
  --gray-very-light: rgb(245, 245, 245);
  --green-very-dark: #0b401d;
  --green-dark: #15803b;
  --green-medium-dark: #1eb352;
  --green: #23d160;
  --green-medium: #26e669;
  --green-medium-light: #80ffac;
  --green-light: #bfffd6;
  --green-very-light: #dfffea;
  --red: #ff0058;
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* https://tailwindcss.com/docs/box-shadow */
}

html {
  background-color: var(--navy-blue);
}

* {
  font-family: "Inter", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin-bottom: var(--global-padding);
}

p,
ul,
ol,
blockquote {
  margin: 0 0 var(--global-padding) 0;
}

ul li {
  list-style-type: disc;
}

hr {
  margin: calc(2 * var(--global-padding)) 0;
}

hr.little {
  width: 33%;
  min-width: 33%;
  max-width: 33%;
  /* margin-top: var(--global-padding); */
  /* margin-bottom: var(--global-padding); */
  background-color: var(--gray-light);
}

.bu-section {
  background-color: white;
  padding-top: calc(var(--global-padding) * 2);
  padding-bottom: calc(var(--global-padding) * 2);
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.section-intro {
  margin-bottom: calc(var(--global-padding) * 2);
  position: relative;
}

.section-intro::before {
  content: "";
  display: block;
  width: 512px;
  min-width: 512px;
  max-width: 512px;
  height: 512px;
  min-height: 512px;
  max-height: 512px;
  border-radius: 100%;
  position: absolute;
  left: calc(50% - 256px);
  top: calc(50% - 256px);
  background: var(--gray-very-light);
  background: linear-gradient(180deg, var(--gray-very-light) 0%, white 100%);
  z-index: -1;
}

.section-intro img {
  width: 33%;
}

.single-page-section {
  background-color: var(--gray-very-light);
  padding-top: calc(var(--global-padding) * 5);
  padding-bottom: calc(var(--global-padding) * 4);
}

.has-text-turquoise {
  color: var(--turquoise);
}

.has-background-turquoise {
  background-color: var(--turquoise);
}

.has-background-turquoise-medium {
  background-color: var(--turquoise-medium);
}

.has-background-turquoise-light {
  background-color: var(--turquoise-light);
}

.has-background-navy-blue {
  background-color: var(--navy-blue);
}

.has-background-navy-blue-light {
  background-color: var(--navy-blue-light);
}

.has-background-light-gray {
  background-color: var(--gray-very-light);
}

.bu-button {
  max-width: 100%;
  white-space: normal;
  padding: calc(var(--global-padding) * 0.5) calc(var(--global-padding) * 0.67);
  line-height: var(--global-padding);
  height: auto;
  min-height: auto;
  max-height: auto;
}

.bu-button.is-turquoise {
  background-color: var(--turquoise);
  color: white;
  border: 0;
}

.bu-button.is-turquoise:hover {
  background-color: var(--turquoise-medium);
}

.bu-button.is-turquoise:active {
  background-color: var(--turquoise-light);
}

.bu-button.is-navy-blue {
  background-color: var(--navy-blue);
  color: white;
  border: 0;
}

.bu-button.is-navy-blue:hover {
  background-color: var(--navy-blue-medium);
}

.bu-button.is-navy-blue:active {
  background-color: var(--navy-blue-light);
}

.bu-button.bu-is-danger,
.bu-button.bu-is-danger:visited {
  background-color: var(--pink);
  color: white !important;
}

.bu-button.bu-is-danger:hover {
  background-color: var(--pink-medium);
  color: white !important;
}

.bu-button.bu-is-danger:active {
  background-color: var(--pink-medium-dark);
  color: white !important;
}

.bu-button.bu-is-large {
  margin: var(--global-padding) 0;
}

.bu-title,
.bu-title * {
  font-family: "Outfit";
  font-weight: 700;
  color: var(--gray-medium-dark);
}

.bu-subtitle {
  font-weight: 400;
  margin-bottom: var(--global-padding) !important;
}

.bu-notification {
  padding: var(--global-padding) !important;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.is-highlighted {
  display: inline-block;
  background-color: var(--yellow-medium);
  color: var(--navy-blue);
  padding: calc(var(--global-padding) / 6) calc(var(--global-padding) / 4);
  margin-top: calc(var(--global-padding) / -12);
  margin-bottom: calc(var(--global-padding) / -12);
  border-radius: 4px;
  box-shadow: 0 4px 4px rgba(217, 190, 0, 0.2);
}

.header-button {
  font-weight: bold;
  border: 0;
  font-size: 1.25rem;
}

.header-primary-button {
  background-color: var(--green);
  color: white !important;
}

.header-primary-button:hover {
  background-color: var(--green-medium);
}

.header-primary-button:active {
  background-color: var(--green-medium-dark);
}

.header-secondary-button {
  background-color: var(--navy-blue-very-very-light);
  color: var(--navy-blue-medium-light);
}

.header-secondary-button:hover {
  background-color: var(--navy-blue-very-light);
}

.header-secondary-button:active {
  background-color: var(--navy-blue-light);
}

@media (max-width: 1024px) {
  .single-page-section {
    padding-top: calc(var(--global-padding) * 4);
  }
}

@media (max-width: 512px) {
  html,
  body {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  p {
    margin-bottom: 1em;
  }

  .bu-navbar {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
  }

  .section-intro::before {
    width: 80vw;
    min-width: 80vw;
    max-width: 80vw;
    height: 80vw;
    min-height: 80vw;
    max-height: 80vw;
    left: calc(50% - 40vw);
    top: -10vw;
  }

  .section-intro img {
    width: 50%;
  }

  hr {
    margin: var(--global-padding) 0;
  }
}

@media (max-width: 320px) {
  html {
    font-size: 0.75em !important;
  }
}