.octubre-page {
    --gold: #e4c28b;
    --pink: #ef8848;
    --rose: #d96d31;
    --white: #f5eee3;
    --ink: #17110d;
    --father-tan: #ef8848;
    --father-cream: #ffd3ac;
    --father-panel: #020202;
}

.octubre-page .hero-navbar {
    border-bottom-color: rgba(239, 136, 72, 0.85);
}

.octubre-page .nav-links a,
.octubre-page .hero-legal,
.octubre-page .hero-message {
    color: rgba(245, 238, 227, 0.68);
}

.octubre-page .nav-links span {
    background: #ef8848;
}

.octubre-page .hero-fallback {
    background: #020202;
}

.octubre-page .customizer-section {
    background: linear-gradient(to bottom, #ef8848 0 58%, #020202 58% 100%);
}

.octubre-page .message-field span,
.octubre-page .font-options p {
    color: #fff;
}

.octubre-page .primary-action {
    background: #f8f1e7;
    color: #17110d;
}

.octubre-page .primary-action:hover {
    background: #020202;
    color: #e4c28b;
}

.octubre-page .bottle-preview {
    box-shadow: 0.55rem 0.55rem 0 #bd6b3c;
}

.octubre-page .slider-arrow span,
.octubre-page .scroll-cue span {
    border-color: #e4c28b;
}

.halloween-web {
    position: absolute;
    z-index: 2;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.hero-web-left {
    top: 4.25rem;
    left: 0;
    width: clamp(12rem, 25vw, 32rem);
}

.hero-web-right {
    right: 0;
    bottom: 9.15rem;
    width: clamp(12rem, 27vw, 30rem);
}

.customizer-web {
    right: 0;
    top: 58%;
    z-index: 0;
    width: clamp(18rem, 39vw, 38rem);
}

.octubre-page .customizer-inner {
    position: relative;
    z-index: 1;
}

.octubre-page .site-footer {
    position: relative;
    overflow: hidden;
}

.footer-web-left {
    left: 0;
    bottom: 0;
    z-index: 0;
    width: clamp(13rem, 31vw, 33rem);
}

.footer-web-right {
    right: 0;
    bottom: 0;
    z-index: 0;
    width: clamp(13rem, 29vw, 30rem);
}

.octubre-page .footer-phrase,
.octubre-page .footer-logo,
.octubre-page .social-links {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .octubre-page .customizer-section {
        background: linear-gradient(to bottom, #ef8848 0 70%, #020202 70% 100%);
    }

    .customizer-web {
        top: 70%;
    }

    .hero-web-left {
        width: clamp(11rem, 37vw, 20rem);
    }

    .hero-web-right {
        width: clamp(12rem, 40vw, 22rem);
    }
}

@media (max-width: 560px) {
    .hero-web-left {
        top: 3.4rem;
        width: 46vw;
    }

    .hero-web-right {
        bottom: 8.8rem;
        width: 52vw;
    }

    .customizer-web {
        width: 75vw;
    }

    .footer-web-left,
    .footer-web-right {
        width: 55vw;
    }
}