:root {
    --BOOST_PRIMARY: #fc5400;
    --BOOST_YELLOW: #fffe00;
    --BOOST_LIGHT_GREY: #f5f5f6;
    --BOOST_LIGHT_GREY2: #f1f1f3;
    --BOOST_BLACK: #171725;
    --BOOST_BLUE: #0072ec;
    --BOOST_MEDIUM_GREY: #51515a;

    --SLIDE_WIDTH: 320px;
    --SLIDE_ASPECT_RATIO: calc(640 / 360);

    --BUTTON_FONT_TEXT_SIZE: 1rem;
    --BUTTON-PRIMARY-BG-COLOR: var(--BOOST_LIGHT_GREY);
    --BUTTON-PRIMARY-FG-COLOR: var(--BOOST_BLACK);
    --BUTTON-PRIMARY-HOVER-BG-COLOR: var(--BOOST_LIGHT_GREY2);
    --BUTTON-PRIMARY-ACTIVE-BG-COLOR: var(--BOOST_LIGHT_GREY2);
    --BUTTON-DISABLED-FG-COLOR: var(--BOOST_MEDIUM_GREY);
    --BUTTON_HEIGHT: 3.5rem;

    --TEXT_BORDER_RADIUS: 0.25rem;
    --TEXT_BORDER_WIDTH: 1px;
    --TEXT_BORDER_COLOR: transparent;
    --TEXT_EMPTY_BG_COLOR: white;
    --TEXT_FILLED_BG_COLOR: white;
    --TEXT_PLACEHOLDER_COLOR: #b4b3b1;
    --TEXT_FOCUS_BORDER_COLOR: var(--BOOST_MEDIUM_GREY);
    --TEXT_FOCUS_PLACEHOLDER_COLOR: #b4b3b1;
    --TEXT_FOCUS_BG_COLOR: var(--BOOST_LIGHT_GREY);
    --TEXT_COLOR: var(--BOOST_BLACK);
    --TEXT_FOCUS_COLOR: var(--BOOST_BLACK);

    --TEL_BORDER_RADIUS: 0.25rem;
    --TEL_HOVER_FG_COLOR: var(--BOOST_BLACK);
    --TEL_HOVER_BG_COLOR: var(--BOOST_LIGHT_GREY);
    --TEL_ARROW_COLOR: var(--BOOST_BLACK);
}

body {
    background-color: var(--BOOST_PRIMARY);
    background-image: none;
}
header, header > a {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
}
header .logo {
    aspect-ratio: 358 / 118;
    height: 3rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 2rem;
}
.yellow {
    color: var(--BOOST_YELLOW);
}
.logo.boost {
    aspect-ratio: 178 / 100 !important;
    border-left: 1px solid var(--BOOST_MEDIUM_GREY);
    background-image: url(./BoostMobile.svg) !important;
}
#root:before, #root:after {
    display: none;
}
#footer, .images {
    display: none;
}
#main {
    padding: 0 0 2rem;
}
#main .content {
    box-sizing: border-box;
    padding: 4rem 2rem 3rem;
    margin: 0 auto;
    color: white;
}
.content.aoc {
    position: relative;
}
.content.aoc:after {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 100%;
    height: 3rem;
    content: "";
    background-image: url(./back%20to%20school.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}
.content h1, .content h4, .content .price {
    color: white;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

button, a.button {
    border-radius: 0.25rem;
    background-color: var(--BUTTON-PRIMARY-BG-COLOR);
    color: var(--BUTTON-PRIMARY-FG-COLOR);
    position: relative;
    width: unset;
    padding: 0 3rem 0 1.5rem;
    font-size: var(--BUTTON_FONT_TEXT_SIZE);
}
button:after, a.button:after {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    content: "";
    mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23171725'%3E%3Cpath d='m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    transform: translate(0, -50%);
    background-color: var(--BOOST_BLACK);
}
button:disabled, a.button:disabled {
    color: #999;
}
button:disabled:after, a.button:disabled:after {
    background-color: #999;
}