* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

:root {
    --primary-color: #fdf8f0;
    --primary-color-transparent: hsla(37, 76%, 97%, .7);
    --dark-primary-color: hsl(30, 76%, 93%);
    --secondary-color: #745e59;
    --dark-secondary-color: hsl(11, 13%, 30%);
    --tertiary-color: hsl(28, 35%, 85%);
    --section-bg: #f6e7d8;
    --accent-color: hsl(30, 80%, 35%);
    --highlight-color: #d4a373;
    --bright-highlight-color: #ffd5ab;
    --dark-color: hsl(22, 18%, 15%);
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--dark-primary-color);
    color: var(--dark-color);
}

.container {
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
}

.full-bg-section {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    box-sizing: border-box;
}

.bg-p {
    background: var(--primary-color);
}

.bg-dp {
    background: var(--dark-primary-color);
}

.bg-a {
    background: var(--accent-color);
}

.bg-s {
    background: var(--secondary-color);
}

.bg-ds {
    background: var(--dark-secondary-color);
}

.bg-h {
    background: var(--highlight-color);
}

.bg-d {
    background: var(--dark-color);
}

.bg-t {
    background: var(--tertiary-color);
}

.bg-s {
    background: var(--section-bg);
}