:root {
    --bg-color: #FFFFFF;
    --bg-highlight-100: #FFFFFF;
    --bg-highlight-50: #FFFFFF;
    --bg-border: #FFFFFF;
    --text-100: #2F354A;
    --text-75: #525768;
    --text-50: #979AA5;
    --text-25: #EBEBED;
    --primary-100: #1EB3F3;
    --primary-75: #56C6F6;
    --primary-50: #8FD9F9;
    --primary-25: #C7ECFC;
    --secondary-100: #E62C49;
    --secondary-75: #EC6177;
    --secondary-50: #F396A4;
    --secondary-25: #F9CAD2;
    --black: #000000;
    --black-1a: #0000001a;
    --white: #ffffff;
    --white-1a: #FFFFFF1A;
    --white-99: #ffffff99;
    --page-padding: 10vw;
    --section-gap: 96px;
    --transition-property: all;
    --transition-duration: .2s;
    --transition-timing-function: ease-in-out;
    --transition: var(--transition-property) var(--transition-duration) var(--transition-timing-function);
    --border-image-source: linear-gradient( 135deg, var(--white) 0%, transparent 100% );
}

@media screen and (min-width: 1920px) {
    :root {
        --page-padding: 192px;
    }
}

@media screen and (max-width: 1600px) {
    :root {
        --page-padding: 96px;
    }
}

@media screen and (max-width: 1400px) {
    :root {
        --section-gap: 64px;
    }
}

@media screen and (max-width: 1200px) {
    :root {
        --page-padding: 64px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --page-padding: 48px;
        --section-gap: 48px;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --page-padding: 32px;
        --section-gap: 32px;
    }
}