@font-face {
    font-family: 'Amatic SC Bold';
    src: url('/fonts/amaticsc-bold-webfont.woff2') format('woff2'),
        url('/fonts/amaticsc-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Amatic SC';
    src: url('/fonts/amaticsc-regular-webfont.woff2') format('woff2'),
        url('/fonts/amaticsc-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Ubuntu Regular';
    src: url('/fonts/ubuntu-regular-webfont.woff2') format('woff2'),
        url('/fonts/ubuntu-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}   

@font-face {
    font-family: 'Ubuntu Bold';
    src: url('/fonts/ubuntu-bold-webfont.woff2') format('woff2'),
        url('/fonts/ubuntu-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}        

:root {
    --base-width: 3000;
    --base-height: 10000;
    --base-font-size: 400;
    --scale-factor-width: calc(100vw / var(--base-width));
    --scale-factor-height: calc(100vh / var(--base-height));
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.site {
    line-height: 100%;
    position: relative;
    text-align: center;
    vertical-align: middle;
    margin: 0, auto;
    display: flex;
    flex-direction: column;
    padding: 3%;
    font-size: calc(var(--base-font-size)/2 * (var(--scale-factor-width)*0.85));
}        

.rectangle1, .rectangle2, .rectangle3, .rectangle4, .rectangle5, .rectangle6, .rectangle7 {
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-family: 'Amatic SC', cursive;
    font-weight: bold;
}

.rectangle1 {
    height: calc((1120 * var(--scale-factor-width))*0.85);
    background-color: #222222;
}

.rectangle2 {
    height: calc((1682 * var(--scale-factor-width))*0.85);
}

.rectangle3 {
    height: calc((1682 * var(--scale-factor-width))*0.85);
}

.rectangle4 {
    height: calc((1682 * var(--scale-factor-width))*0.85);
}

.rectangle5 {
    height: calc((1682 * var(--scale-factor-width))*0.85);
}

.rectangle6 {
    height: calc((1682 * var(--scale-factor-width))*0.85);
}

.rectangle7 {
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    background-color: #222222;
}

.heading {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    vertical-align: middle;
    margin: 0, auto;
    display: flex;
    flex-direction: column;
    font-size: calc(var(--base-font-size) * (var(--scale-factor-width)*0.85));
}

.bottle {
    max-height: calc((900 * var(--scale-factor-width))*0.85);
    max-width: calc((800 * var(--scale-factor-width))*0.85);
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Amatic SC', cursive;
    font-weight: bold;
    font-size: calc(var(--base-font-size) * (var(--scale-factor-width)*0.85));
    padding: 0%;
    margin: 0%;
}

.image-container {
    padding: 0%;
    margin: 0%;
    position: relative;
    display: inline-block;
    color: #222222;
}

.image-container a {
    padding: 0%;
    margin: 0%;
    position: relative;
    display: inline-block;
    color: inherit;
}

.image-container:hover {
    filter: opacity(80%);
}

.blend-title {
    margin: 0%;
    padding-top: 4%;
    padding-bottom: 2%;
    font-family: 'Amatic SC', cursive;
    font-weight: bold;
    font-size: calc((var(--base-font-size)/2) * (var(--scale-factor-width)*0.85));
    color: #222222;
}

.number {
    font-family: 'Ubuntu Regular', sans-serif;
    font-weight: normal;
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -62%);
    font-size: calc((var(--base-font-size)/2) * (var(--scale-factor-width)*0.85));
    color: inherit;
}

.oil-name {
    font-family: 'Amatic SC', cursive;
    font-weight: bold;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 5%);
    color: #222222;
    font-size: calc((var(--base-font-size)/4) * (var(--scale-factor-width)*0.85));
    color: inherit;
}

.plus {
    margin: 0 ;
    font-size: calc((var(--base-font-size)/2) * (var(--scale-factor-width)*0.85));
    font-family: 'Ubuntu Regular', sans-serif;
    font-weight: normal;
    color: #222222;
    top: 38%;
    transform: translate(0%, 38%);
}

/* Relaxing Flavor */
#relaxing_c1_0 { background-color: #a77fb2; }
#relaxing_c1_1 { background-color: #ccb1d0; }
#relaxing_c1_2 { background-color: #435cc8; }
#relaxing_c1_3 { background-color: #9eaee5; }
#relaxing_c1_4 { background-color: #cbd2eb; }

#relaxing_c2_0 { background-color: #cb8342; }
#relaxing_c2_1 { background-color: #e9b88b; }
#relaxing_c2_2 { background-color: #bcc493; }
#relaxing_c2_3 { background-color: #c1cb80; }
#relaxing_c2_4 { background-color: #7a7257; }

#relaxing_c3_0 { background-color: #608eb5; }
#relaxing_c3_1 { background-color: #7ba5de; }
#relaxing_c3_2 { background-color: #8094dd; }
#relaxing_c3_3 { background-color: #88aae3; }
#relaxing_c3_4 { background-color: #bec4da; }

#relaxing_c4_0 { background-color: #d6b59f; }
#relaxing_c4_1 { background-color: #ffa489; }
#relaxing_c4_2 { background-color: #ff8e6c; }
#relaxing_c4_3 { background-color: #ff6d37; }
#relaxing_c4_4 { background-color: #ff4e00; }

#relaxing_c5_0 { background-color: #dddbea; }
#relaxing_c5_1 { background-color: #b6b8de; }
#relaxing_c5_2 { background-color: #78dfd5; }
#relaxing_c5_3 { background-color: #1cd4c6; }
#relaxing_c5_4 { background-color: #00b09b; }

/* Grounding Flavor */
#grounding_c1_0 { background-color: #c2da96; }
#grounding_c1_1 { background-color: #d7d393; }
#grounding_c1_2 { background-color: #ffc6aa; }
#grounding_c1_3 { background-color: #dfc2b3; }
#grounding_c1_4 { background-color: #efe4b0; }

#grounding_c2_0 { background-color: #da7d70; }
#grounding_c2_1 { background-color: #ceef6b; }
#grounding_c2_2 { background-color: #c3c3c3; }
#grounding_c2_3 { background-color: #d6af9a; }
#grounding_c2_4 { background-color: #d7f185; }

#grounding_c3_0 { background-color: #e1c5a8; }
#grounding_c3_1 { background-color: #c4e9f2; }
#grounding_c3_2 { background-color: #ecb7e1; }
#grounding_c3_3 { background-color: #e6cfc4; }
#grounding_c3_4 { background-color: #e8bc9b; }

#grounding_c4_0 { background-color: #676c5b; }
#grounding_c4_1 { background-color: #abbb85; }
#grounding_c4_2 { background-color: #6f8371; }
#grounding_c4_3 { background-color: #63815f; }
#grounding_c4_4 { background-color: #c3ffbb; }

#grounding_c5_0 { background-color: #dfcca3; }
#grounding_c5_1 { background-color: #bb998d; }
#grounding_c5_2 { background-color: #dfa88d; }
#grounding_c5_3 { background-color: #cdb18d; }
#grounding_c5_4 { background-color: #e8b17f; }

/* Herbal Flavor */
#herbal_c1_0 { background-color: #659050; }
#herbal_c1_1 { background-color: #384234; }
#herbal_c1_2 { background-color: #4d522c; }
#herbal_c1_3 { background-color: #8d9361; }
#herbal_c1_4 { background-color: #2e6f4b; }

#herbal_c2_0 { background-color: #6c6258; }
#herbal_c2_1 { background-color: #58606c; }
#herbal_c2_2 { background-color: #898888; }
#herbal_c2_3 { background-color: #ba8373; }
#herbal_c2_4 { background-color: #f1c1b3; }

#herbal_c3_0 { background-color: #57816e; }
#herbal_c3_1 { background-color: #7c8157; }
#herbal_c3_2 { background-color: #abb566; }
#herbal_c3_3 { background-color: #80b566; }
#herbal_c3_4 { background-color: #c7efb3; }

#herbal_c4_0 { background-color: #dfcca3; }
#herbal_c4_1 { background-color: #bb998d; }
#herbal_c4_2 { background-color: #dfa88d; }
#herbal_c4_3 { background-color: #cdb18d; }
#herbal_c4_4 { background-color: #e8b17f; }

#herbal_c5_0 { background-color: #676c5b; }
#herbal_c5_1 { background-color: #abbb85; }
#herbal_c5_2 { background-color: #6f8371; }
#herbal_c5_3 { background-color: #63815f; }
#herbal_c5_4 { background-color: #c3ffbb; }

/* Woody Flavor */
#woody_c1_0 { background-color: #aeb16b; }
#woody_c1_1 { background-color: #a3b26a; }
#woody_c1_2 { background-color: #a18c8d; }
#woody_c1_3 { background-color: #a1d0b9; }
#woody_c1_4 { background-color: #5d791e; }

#woody_c2_0 { background-color: #664a46; }
#woody_c2_1 { background-color: #ffbb98; }
#woody_c2_2 { background-color: #d3bda2; }
#woody_c2_3 { background-color: #5d3b22; }
#woody_c2_4 { background-color: #ef9885; }

#woody_c3_0 { background-color: #949b91; }
#woody_c3_1 { background-color: #555853; }
#woody_c3_2 { background-color: #606749; }
#woody_c3_3 { background-color: #cce1a5; }
#woody_c3_4 { background-color: #84c581; }

#woody_c4_0 { background-color: #dfcca3; }
#woody_c4_1 { background-color: #bb998d; }
#woody_c4_2 { background-color: #dfa88d; }
#woody_c4_3 { background-color: #cdb18d; }
#woody_c4_4 { background-color: #e8b17f; }

#woody_c5_0 { background-color: #575538; }
#woody_c5_1 { background-color: #4e5043; }
#woody_c5_2 { background-color: #6f8371; }
#woody_c5_3 { background-color: #b4d38a; }
#woody_c5_4 { background-color: #bdff92; }

/* Energizing Flavor */
#energizing_c1_0 { background-color: #8af4d8; }
#energizing_c1_1 { background-color: #c8bfe7; }
#energizing_c1_2 { background-color: #7092be; }
#energizing_c1_3 { background-color: #59addb; }
#energizing_c1_4 { background-color: #b8c8cf; }

#energizing_c2_0 { background-color: #ffaec9; }
#energizing_c2_1 { background-color: #f8c77c; }
#energizing_c2_2 { background-color: #d1f2ac; }
#energizing_c2_3 { background-color: #f1d572; }
#energizing_c2_4 { background-color: #b5e61d; }

#energizing_c3_0 { background-color: #ff7f27; }
#energizing_c3_1 { background-color: #7399f2; }
#energizing_c3_2 { background-color: #00e89c; }
#energizing_c3_3 { background-color: #efe4b0; }
#energizing_c3_4 { background-color: #8292ff; }

#energizing_c4_0 { background-color: #e8f8b8; }
#energizing_c4_1 { background-color: #fffdce; }
#energizing_c4_2 { background-color: #f7ae6c; }
#energizing_c4_3 { background-color: #00ff99; }
#energizing_c4_4 { background-color: #a2de25; }

#energizing_c5_0 { background-color: #e215ff; }
#energizing_c5_1 { background-color: #ebbce7; }
#energizing_c5_2 { background-color: #bce7eb; }
#energizing_c5_3 { background-color: #c8bfe7; }
#energizing_c5_4 { background-color: #89aff7; }

/* Spicy Flavor */
#spicy_c1_0 { background-color: #c5b09c; }
#spicy_c1_1 { background-color: #c5b0cb; }
#spicy_c1_2 { background-color: #a994b6; }
#spicy_c1_3 { background-color: #d0a1b8; }
#spicy_c1_4 { background-color: #d0c3d1; }

#spicy_c2_0 { background-color: #ffa298; }
#spicy_c2_1 { background-color: #ffbb98; }
#spicy_c2_2 { background-color: #d3a2a2; }
#spicy_c2_3 { background-color: #c77f8e; }
#spicy_c2_4 { background-color: #e69f8e; }

#spicy_c3_0 { background-color: #c5b09c; }
#spicy_c3_1 { background-color: #d2bda8; }
#spicy_c3_2 { background-color: #e2cdb6; }
#spicy_c3_3 { background-color: #e4c6b6; }
#spicy_c3_4 { background-color: #afa2a7; }

#spicy_c4_0 { background-color: #dfcca3; }
#spicy_c4_1 { background-color: #bb998d; }
#spicy_c4_2 { background-color: #dfa88d; }
#spicy_c4_3 { background-color: #cdb18d; }
#spicy_c4_4 { background-color: #e8b17f; }

#spicy_c5_0 { background-color: #ead398; }
#spicy_c5_1 { background-color: #fbc98e; }
#spicy_c5_2 { background-color: #ffffd8; }
#spicy_c5_3 { background-color: #beb2b9; }
#spicy_c5_4 { background-color: #dacb98; }

/* Floral Flavor */
#floral_c1_0 { background-color: #cf94cf; }
#floral_c1_1 { background-color: #f7999d; }
#floral_c1_2 { background-color: #a3b6f8; }
#floral_c1_3 { background-color: #d0c6f9; }
#floral_c1_4 { background-color: #ffaec9; }

#floral_c2_0 { background-color: #c169de; }
#floral_c2_1 { background-color: #f3676f; }
#floral_c2_2 { background-color: #00a2e8; }
#floral_c2_3 { background-color: #9860f4; }
#floral_c2_4 { background-color: #ff5b91; }

#floral_c3_0 { background-color: #b9beee; }
#floral_c3_1 { background-color: #f092fe; }
#floral_c3_2 { background-color: #feb39c; }
#floral_c3_3 { background-color: #bee2e9; }
#floral_c3_4 { background-color: #efe4b0; }

#floral_c4_0 { background-color: #678aba; }
#floral_c4_1 { background-color: #ec6bfe; }
#floral_c4_2 { background-color: #fe8e6d; }
#floral_c4_3 { background-color: #6cd3ff; }
#floral_c4_4 { background-color: #ffb888; }

#floral_c5_0 { background-color: #d6b0ea; }
#floral_c5_1 { background-color: #e9fca9; }
#floral_c5_2 { background-color: #b4f1d2; }
#floral_c5_3 { background-color: #99d9ea; }
#floral_c5_4 { background-color: #c3ffbb; }

/* Cleansing Flavor */
#cleansing_c1_0 { background-color: #facfaf; }
#cleansing_c1_1 { background-color: #fff200; }
#cleansing_c1_2 { background-color: #bdcaea; }
#cleansing_c1_3 { background-color: #eacc66; }
#cleansing_c1_4 { background-color: #efe4b0; }

#cleansing_c2_0 { background-color: #99d9ea; }
#cleansing_c2_1 { background-color: #00a2e8; }
#cleansing_c2_2 { background-color: #94fb82; }
#cleansing_c2_3 { background-color: #22b14c; }
#cleansing_c2_4 { background-color: #c8ff62; }

#cleansing_c3_0 { background-color: #ffd1b3; }
#cleansing_c3_1 { background-color: #d0d0ee; }
#cleansing_c3_2 { background-color: #f8d5d3; }
#cleansing_c3_3 { background-color: #f7f3ae; }
#cleansing_c3_4 { background-color: #c7efb3; }

#cleansing_c4_0 { background-color: #c0cee7; }
#cleansing_c4_1 { background-color: #43efb7; }
#cleansing_c4_2 { background-color: #e3fc98; }
#cleansing_c4_3 { background-color: #b9f4ce; }
#cleansing_c4_4 { background-color: #fff977; }

#cleansing_c5_0 { background-color: #eec2fe; }
#cleansing_c5_1 { background-color: #dcf396; }
#cleansing_c5_2 { background-color: #caf4d7; }
#cleansing_c5_3 { background-color: #fbc6c9; }
#cleansing_c5_4 { background-color: #c3ffbb; }

/* Christmas Flavor */
#christmas_c1_0 { background-color: #659050; }
#christmas_c1_1 { background-color: #384234; }
#christmas_c1_2 { background-color: #4d522c; }
#christmas_c1_3 { background-color: #8d9361; }
#christmas_c1_4 { background-color: #2e6f4b; }

#christmas_c2_0 { background-color: #6c6258; }
#christmas_c2_1 { background-color: #58606c; }
#christmas_c2_2 { background-color: #898888; }
#christmas_c2_3 { background-color: #ba8373; }
#christmas_c2_4 { background-color: #f1c1b3; }

#christmas_c3_0 { background-color: #57816e; }
#christmas_c3_1 { background-color: #7c8157; }
#christmas_c3_2 { background-color: #abb566; }
#christmas_c3_3 { background-color: #80b566; }
#christmas_c3_4 { background-color: #c7efb3; }

#christmas_c4_0 { background-color: #dfcca3; }
#christmas_c4_1 { background-color: #bb998d; }
#christmas_c4_2 { background-color: #dfa88d; }
#christmas_c4_3 { background-color: #cdb18d; }
#christmas_c4_4 { background-color: #e8b17f; }

#christmas_c5_0 { background-color: #676c5b; }
#christmas_c5_1 { background-color: #abbb85; }
#christmas_c5_2 { background-color: #6f8371; }
#christmas_c5_3 { background-color: #63815f; }
#christmas_c5_4 { background-color: #c3ffbb; }

/* Citrus Flavor */
#citrus_c1_0 { background-color: #ff7f27; }
#citrus_c1_1 { background-color: #dd471c; }
#citrus_c1_2 { background-color: #fff200; }
#citrus_c1_3 { background-color: #efe96b; }
#citrus_c1_4 { background-color: #ffc90e; }

#citrus_c2_0 { background-color: #5ccd36; }
#citrus_c2_1 { background-color: #6fd033; }
#citrus_c2_2 { background-color: #f86969; }
#citrus_c2_3 { background-color: #13bf50; }
#citrus_c2_4 { background-color: #22b14c; }

#citrus_c3_0 { background-color: #f18272; }
#citrus_c3_1 { background-color: #ffc04a; }
#citrus_c3_2 { background-color: #ffc90e; }
#citrus_c3_3 { background-color: #00a2e8; }
#citrus_c3_4 { background-color: #99d9ea; }

#citrus_c4_0 { background-color: #71c400; }
#citrus_c4_1 { background-color: #22b082; }
#citrus_c4_2 { background-color: #9ee2c2; }
#citrus_c4_3 { background-color: #81f071; }
#citrus_c4_4 { background-color: #1eb587; }

#citrus_c5_0 { background-color: #d85be1; }
#citrus_c5_1 { background-color: #aeaeff; }
#citrus_c5_2 { background-color: #a5e6eb; }
#citrus_c5_3 { background-color: #1acece; }
#citrus_c5_4 { background-color: #50a1fb; }