:root {
  --open-background: rgb(37, 20, 44);
  --open-h1: rgb(255, 255, 255);
  --open-h2: rgb(220, 220, 220);
  --open-h3: rgb(190, 190, 190);
  --open-h4: rgb(170, 170, 170);
  --open-red: rgb(255, 44, 60);
  --open-white: rgb(255, 255, 255);
  --open-black: rgb(0, 0, 0);
  --open-grey: rgb(229,229,229);
  --open-lila: rgb(197,175,242);
}

/*--open-lila: rgb(197,175,242);*/

html {
  font-size: 14px;
  
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background-color: var(--open-background);
  color: var(--open-white);
  font-family: "ubuntu", sans-serif;
}

h1 {
  color: var(--open-h1);
}

.fs-1{
  font-size: 4.0rem !important;
}

h2 {
  color: var(--open-h2);
}

.fs-2{
  font-size: 3.0rem !important;
}

h3 {
  color: var(--open-h3);
}

h4 {
  color: var(--open-h4);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

a, a:visited, a:hover, a:active {
  color: var(--open-lila);
}

.bg-lila{
  background-color: var(--open-lila);
}

.bg-red {
  background-color: var(--open-red);
  color: var(--open-white);
}

.color-lila{
  color: var(--open-lila);
}

.color-red{
  color: var(--open-red);
}

.color-grey{
  color: var(--open-grey);
}

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

.btn-bg-primary{
  background-color: var(--open-lila);
  color: var(--open-white);
}

.btn-outline-primary, btn-outline-primary:active, btn-outline-primary:visited {
  color: var(--open-red);
  border-color: var(--open-red);
}

.vspace-100{
  margin-top: 100px;
}

footer{
  color: var(--open-white);
}