:root {
    --custom-brown-400: #6f4e37;
    --custom-brown-300: #a67b5b;
    --custom-brown-200: #f9e3cb;
    --custom-brown-100: #faf7f0;
    --custom-blue-400: #295f98;
    --custom-beige-400: #cdc2a5;
    --custom-beige-300: #e8dab2;
    --custom-beige-200: #eae4dd;

    --custom-dark-500: #0c0c0c;
    --custom-gold-500: #ffcc00;
    --custom-gold-600: rgb(22, 17, 0);
}

body {
    background-color: var(--custom-dark-500);
    width: 100vw;
}

/* partial guestbook */
.text-custom-guestbook {
    color: var(--custom-dark-500) !important;
}

.bg-custom-guestbook {
    background-color: oklch(0.985 0 0) !important;
}

/* text */
.text-custom-dark-500 {
    color: var(--custom-dark-500) !important;
}
.text-custom-gold-500 {
    color: var(--custom-gold-500) !important;
}

.text-custom-gold-600 {
    color: var(--custom-gold-600) !important;
}

/* background */
.bg-custom-dark-500 {
    background-color: var(--custom-dark-500) !important;
}
.bg-custom-gold-500 {
    background-color: var(--custom-gold-500) !important;
}
.bg-custom-gold-600 {
    background-color: var(--custom-gold-600) !important;
}

/* custom bg text */
.text-custom-blue-400 {
    color: var(--custom-blue-400) !important;
}

.text-custom-beige-400 {
    color: var(--custom-beige-400) !important;
}

.text-custom-beige-300 {
    color: var(--custom-beige-300) !important;
}

.text-custom-beige-200 {
    color: var(--custom-beige-200) !important;
}

.bg-custom-blue-400 {
    background-color: var(--custom-blue-400) !important;
}

.bg-custom-beige-400 {
    background-color: var(--custom-beige-400) !important;
}

.bg-custom-beige-300 {
    background-color: var(--custom-beige-300) !important;
}

.bg-custom-beige-200 {
    background-color: var(--custom-beige-200) !important;
}

.text-custom-brown-400 {
    color: var(--custom-brown-400) !important;
}

.text-custom-brown-300 {
    color: var(--custom-brown-300) !important;
}

.text-custom-brown-200 {
    color: var(--custom-brown-200) !important;
}

.text-custom-brown-100 {
    color: var(--custom-brown-100) !important;
}

.bg-custom-brown-400 {
    background-color: var(--custom-brown-400) !important;
}

.bg-custom-brown-300 {
    background-color: var(--custom-brown-300) !important;
}

.bg-custom-brown-200 {
    background-color: var(--custom-brown-200) !important;
}

.bg-custom-brown-100 {
    background-color: var(--custom-brown-100) !important;
}