:root {
    /* colors */
    --black-100: rgba(41, 29, 41, 1);
    --black-70: rgba(105, 97, 105, 1);
    --black-50: rgba(148, 142, 148, 1);
    --cherry-100: rgba(89, 9, 22, 1);
    --cherry-30: rgba(205, 181, 185, 1);
    --tangerine-100: rgba(254, 91, 12, 1);
    --tangerine-30: rgba(255, 205, 162, 1);
    --tangerine-20: rgba(255, 222, 206, 1);
    --lilac-100: rgba(189, 169, 255, 1);
    --lilac-70: rgba(215, 195, 255, 1);
    --lilac-60: rgba(221, 203, 255, 1);
    --lilac-40: rgba(232, 221, 255, 1);
    --lilac-20: rgba(244, 238, 255, 1);
    --gray-100: rgba(222, 217, 213, 1);
    --gray-50: rgba(238, 236, 234, 1);
    --gray-40: rgba(242, 240, 238, 1);
    --gray-20: rgba(248, 247, 247, 1);
    --gray-10: rgba(252, 251, 251, 1);
    --error: rgba(239, 68, 68, 1);
    --background-error: rgba(254, 242, 242, 1);
    --background-success: rgba(236, 253, 245, 1);
    --background-info: rgba(237, 233, 254, 1);
    --success: rgba(34, 197, 94, 1);
    --status: rgba(63, 245, 46, 1);
    --info: rgba(167, 139, 250, 1);
    --slack: rgba(74, 21, 75, 1);
    --appsumo: rgba(255, 188, 0, 1);
    --backgrund-appsumo: rgba(253, 244, 227, 1);

    /* fonts */
    --title-font-family: "Neuton", Helvetica, Arial, sans-serif;
    --body-font-family: "Sora", Helvetica, Arial, sans-serif;
    --quote-font-family: "Cousine", Helvetica, Arial, sans-serif;

    --section-padding: 64px 16px;
    font-size: 100%;
    font-family: var(--body-font-family);
    line-height: 1.5;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media only screen and (min-width: 640px) and (min-height: 500px) {
    :root {
        font-size: 110%;
    }
}