@font-face {
    font-family: 'Font-traco-elo-menu';
    src: url('./fonts/BerkshireSwash-Regular.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

:root{
  --marron-cafe-hex: #4B2E2B;
  --terracota-hex: #C46A4A;
  --offwhite-hex: #F8F5F0;
  --rose-hex:#D8B7B1;
  --rose-escuro-hex:#FF8DA1;
  --rosa-hex:#dd5ba3;
  --areia-hex: #D8C3A5;
  --branco-hex: #FFFFFF;
  --grafite-hex: #333333;
  --marron-cafe-rgb: rgb(75, 46, 43);
  --terracota-rgb: rgb(196, 106, 74);
  --offwhite-rgb: rgb(248, 245, 240);
  --rose-rgb: rgb(216, 183, 177);
  --areia-rgb: rgb(216, 195, 165);
  --branco-rgb: rgb(255, 255, 255);
  --grafite-rgb: rgb(51, 51, 51);
}

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

nav div div ul li a {
  font-family: 'Font-traco-elo-menu';
  font-size: 18px;
}

/* Custom */

/* Background-color */
.bg-offwhite{
  background-color: var(--offwhite-hex);
}

.bg-marron-cafe{
  background-color: var(--marron-cafe-hex);
}

.bg-terracota{
  background-color: var(--terracota-hex);
}

.bg-rose{
  background-color: var(--rose-hex);
}

.bg-rose-escuro{
  background-color: var(--rose-escuro-hex);
}

.bg-rosa{
  background-color: var(--rosa-hex);
}


/* Buttons */

.btn-marron-cafe{
  background-color: var(--marron-cafe-hex);
  color: var(--offwhite-hex);
}

.btn-marron-cafe:hover{
  background-color: #6f4540;
  color: var(--offwhite-hex);
}

.btn-terracota{
  background-color: var(--terracota-hex);
  color: var(--offwhite-hex);
}

.btn-rose{
  background-color: var(--rose-hex);
  color: var(--offwhite-hex);
}

.btn-rose-escuro{
  background-color: var(--rose-escuro-hex);
  color: var(--marron-cafe-hex);
}

.btn-rose-escuro:hover{
  background-color: #e37e91;
  color: var(--marron-cafe-hex);
}

.btn-terracota:hover{
  background-color:   #8b4932;
  color: var(--offwhite-hex);
}

.btn-rosa{
  background-color: var(--rosa-hex);
  color: var(--marron-cafe-hex);
}

.btn-rosa:hover{
  background-color: #a44077;
  color: var(--marron-cafe-hex);
}

/* Textos */

.text-marron-cafe{
  color: var(--marron-cafe-hex);
}

.text-rose{
  color: var(--rose-hex);
}

.text-rosa{
  color: var(--rosa-hex);
}