:root {
  --color-primary: #d6bfa3;
  --color-secondary: #f6f6f5;
  --color-text: #3a332b;
  --color-accent: #d1af70;
  --border-radius: 8px;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("../font/LibreBaskerville-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("../font/Sora-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Sora";
  font-weight: normal;
  font-style: normal;
  color: var(--color-text);
  background-color: var(--color-secondary);
}
h2 {
  line-height: 1.4;
}
.accent-font {
  font-family: "Libre Baskerville";
  font-weight: normal;
  font-style: normal;
}
.padding-section {
  padding-block: 5rem;
}
.padding-top {
  padding-top: 5rem;
}
img {
  border-radius: var(--border-radius);
}
.skip-link {
  position: absolute;
  top: -111px;
  left: 0;
  background: #000000;
  color: #ffffff;
  padding: 10px;
  z-index: 999;
  text-decoration: underline !important;
}
.skip-link:focus {
  top: 0.8rem;
  left: 0.8rem;
}
p {
  line-height: 26px;
}
a,
button {
  text-decoration: underline;
}
:is(a, button):hover,
:is(a, button):focus {
  text-decoration: none;
}
.btn {
  text-decoration: none;
}
:is(a, button, .btn):focus-visible {
  outline: 3px solid #000000;
  outline-offset: 3px;
  box-shadow: none;
}
:is(a, button, .btn):focus:not(:focus-visible) {
  outline: none;
  outline-offset: none;
  box-shadow: none;
}
.action-btn {
  border-radius: 0;
  padding: 1rem 2rem;
  border: unset;
  color: #e8e8e8;
  z-index: 1;
  background: #212121;
  position: relative;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  transition: all 300ms;
  overflow: hidden;
  border: 2px solid #566555;
  text-transform: uppercase;
  letter-spacing: 0.06vw;
  line-height: 1;
}

.action-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 0;
  background-color: var(--color-accent);
  z-index: -1;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
  transition: all 300ms;
}

.action-btn:hover {
  color: #000000;
}

.action-btn:hover::before {
  width: 100%;
}
.divider-decor {
  margin-bottom: 2rem;
}