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;
}

.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;
}

button {
    color:black;
    background: litegray;
}

.rainbown-text {
    background: black;
    border:solid;
    animation: rainbow 2s infinite linear;
}

@keyframes rainbow { /*100/7, apparentky the transition is uncanny, I'll have to fix it with a back and forth movement*/
    0% {color: #e81416;} /*red*/
    14.29% {color: #ffa500;} /*orange*/
    28.58% {color: #faeb36;} /*yellow*/
    42.87% {color: #79c314;} /*green*/
    57.16% {color: #487de7;} /*blue*/
    71.45% {color: #4b369d;} /*indigo*/
    85.74% {color: #70369d} /*violet*/
    100% {color : #e81416} /*red again for a smooth transition*/
}