:root {
  --color-background: #f9f5ef;
  --color-surface: #f0f6fa;
  --color-primary: #ba9c6e;
  --color-primary-dark: #7a5a2a;
  --color-secondary: #5482a5;
  --color-secondary-dark: #0e3450;
}

html {
  scroll-behavior: smooth;
}

.loader {
  width: 48px;
  height: 48px;
  display: block;
  margin:15px auto;
  position: relative;
  color: var(--color-secondary-dark);
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: scale(0.5) translate(0, 0);
  background-color: var(--color-secondary-dark);
  border-radius: 50%;
  animation: animloader 1s infinite ease-in-out;
}
.loader::before {
  background-color: var(--color-primary);
  transform: scale(0.5) translate(-48px, -48px);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes animloader {
    50% {
      transform: scale(1) translate(-50%, -50%);
}
}
    

nav a.active {
  font-weight: bold;
}

h1,
h2,
h3 {
  letter-spacing: 0.5px;
  line-height: 1.2;
}

section {
  scroll-margin-top: 120px;
}

.gold-underline {
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
  padding-bottom: 4px;
}