@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');
:root {

    /* Color Codes */

    --primary-color: #E8FF66;
    --primary-dark-color: #121212;
    --primary-gradient-color: linear-gradient(93.8deg, #A981FF 19.67%, #D987FF 99.56%);

    --purple-color: #A980FF;
    --blue-color: #2B66FF;
    --yello-color: #FFDB7E;
    --red-color: #FF3030;
    --green-color: #C5FF69;
    --white-color: #FFFFFF;

    --neutral-dark-gray-color: #FFFFFF1A;
    --neutral-dark-color: #262626;
    --neutral-gray-color: #FFFFFF4D;
    --neutral-light-gray-color: #FFFFFF80;
    --netural-white-color: #FFFFFFB2;
    --mask-color: #12121280;

    /* Font Sizes */

    --title-size: 64px;
    --shadow-title-size: 42px;
    --title-1-size: 32px;
    --title-2-size: 20px;
    --title-small-size: 20px;
    --content-size: 16px;

    /* Line Height */
    --title-line-height: 83.2px;
    --shadow-title-line-height: 70.2px;
    --title-1-line-height: 41.6px;
    --title-2-line-height: 26px;
    --title-small-line-height: 26px;
    --content-line-height: 26px;

    /* Fonts */
    --main-font-family: "Plus Jakarta Sans", sans-serif;
    --link-font-family: "Inconsolata", sans-serif;
}


@media screen and (max-width: 768px) {
    :root {
        /* Font Sizes */
        --title-size: 38px;
        --shadow-title-size: 32px;
        --title-1-size: 25px;
        --title-2-size: 18px;
        --title-small-size: 18px;
        --content-size: 16px;

        /* Line Height */
        --title-line-height: 49.2px;
        --shadow-title-line-height: 44.2px;
        --title-1-line-height: 38.6px;
        --title-2-line-height: 28px;
        --title-small-line-height: 28px;
        --content-line-height: 28px;
    }
}

@media screen and (max-width: 500px) {
    :root {
        /* Font Sizes */
        --title-size: 30px;
        --shadow-title-size: 26px;
        --title-1-size: 20px;
        --title-2-size: 16px;
        --title-small-size: 16px;
        --content-size: 14px;

        /* Line Height */
        --title-line-height: 38.2px;
        --shadow-title-line-height: 33.2px;
        --title-1-line-height: 29.6px;
        --title-2-line-height: 25px;
        --title-small-line-height: 25px;
        --content-line-height: 25px;
    }
}