:root {
    --black: #000;
    --grey: #191919;
    --presentationBcg: #242424;
    --primary: #A5DFBC;
    --orange: #E5A488;
    --yummy: #71C392;
    --white: #fff;
    --gradient: linear-gradient(135deg, #A5DFBC 0%, #71C392 100%, #71C392 100%);

    --transparent-white-low: rgba(255, 255, 255, 0.10);
    --transparent-white-medium: rgba(255, 255, 255, 0.24);
    --transparent-white-high: rgba(255, 255, 255, 0.50);
}

#cc-main {
    /** Change font **/
    --cc-font-family: 'Pathway Extreme', sans-serif;
    --cc-bg: var(--grey);

    /** Change button primary color to black **/
    --cc-btn-primary-bg: var(--primary);
    --cc-btn-primary-border-color: var(--primary);
    --cc-btn-primary-hover-bg: var(--yummy);
    --cc-btn-primary-hover-border-color: var(--yummy);

    --cc-btn-secondary-bg:#00000;
    --cc-btn-secondary-border-color: #474747;

    /** Also make toggles the same color as the button **/
    --cc-toggle-on-bg: var(--cc-btn-primary-bg);

    /** Make the buttons a bit rounder **/
    --cc-btn-border-radius: 10px;
}

::selection {
    color: var(--black);
    background: var(--primary);
}

/* ------------ScrollBar--------------- */
/* width */
::-webkit-scrollbar {
    width: 0.45rem;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.40);
    border-radius: 1.25rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.60);
}

/* Font styles */
h1 {
    font-size: 4rem;
    font-weight: 900;
    line-height: 120%;
    color: var(--primary);
}

h2 {
    font-size: 3rem;
    font-weight: 900;
    line-height: 120%;
}

h3 {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 120%;
}

.text-m {
    font-size: 1.25rem;
    line-height: 160%;
}

.text-m-bold {
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 160%;
}

.text-s {
    font-size: 1rem;
    line-height: 160%;
}

.text-s-bold {
    font-size: 1rem;
    font-weight: 900;
    line-height: 160%;
}

.text-xs {
    font-size: 0.8125rem;
    line-height: 160%;
}

.text-xs-bold {
    font-size: 0.8125rem;
    font-weight: 900;
    line-height: 160%;
}

.text-menu {
    font-size: 1rem;
    font-weight: 900;
    line-height: 120%;
}

@media screen and (max-width: 1480px) {
    h1 {font-size: 3.5rem;}
    h2 {font-size: 2.625rem;}
    h3 {font-size: 2rem;}
    .text-m {font-size: 1.1875rem;}
    .text-m-bold {font-size: 1.1875rem;}
    .text-s {font-size: 1rem;}
    .text-s-bold {font-size: 1rem;}
    .text-xs {font-size: 0.8125rem;}
    .text-xs-bold {font-size: 0.8125rem;}
    .text-menu {font-size: 1rem;}
}

@media screen and (max-width: 1024px) {
    h1 {font-size: 3rem;}
    h2 {font-size: 2.25rem;}
    h3 {font-size: 1.625rem;}
    .text-m {font-size: 1.125rem;}
    .text-m-bold {font-size: 1.125rem;}
    .text-s {font-size: 0.9375rem;}
    .text-s-bold {font-size: 0.9375rem;}
    .text-xs {font-size: 0.75rem;}
    .text-xs-bold {font-size: 0.75rem;}
    .text-menu {font-size: 1.125rem;}
}

@media screen and (max-width: 740px) {
    h1 {font-size: 2.5rem;}
    h2 {font-size: 2rem;}
    h3 {font-size: 1.5rem;}
    .text-m {font-size: 0.9375rem;}
    .text-m-bold {font-size: 0.9375rem;}
    .text-s {font-size: 0.8125rem;}
    .text-s-bold {font-size: 0.8125rem;}
    .text-xs {font-size: 0.75rem;}
    .text-xs-bold {font-size: 0.75rem;}
}

/* Border radius */
.br-s {border-radius: 1rem;}
.br-m {border-radius: 2.5rem;}
.br-l {border-radius: 3.125rem;}

@media screen and (max-width: 1024px) {
    .br-s {border-radius: 1rem;}
    .br-m {border-radius: 1.875rem;}
    .br-l {border-radius: 2.5rem;}
}

@media screen and (max-width: 740px) {
    .br-s {border-radius: 1rem;}
    .br-m {border-radius: 1.5rem;}
    .br-l {border-radius: 1.875rem;}
}