/* ================================
   COLORS
================================ */

:root{

    --bg:#f4f9ff;
    --card:#ffffff;
    --ink:#26324a;
    --muted:#70788c;
    --line:#dce7f2;

    --purple:#7065e8;
    --purple-light:#eeeaff;

    --blue:#55b5f7;
    --blue-light:#e5f5ff;

    --green:#55c98b;
    --green-light:#e8faef;

    --yellow:#ffc857;
    --yellow-light:#fff6d9;

    --pink:#ed78ad;
    --pink-light:#ffeaf4;

    --orange:#ff9866;
    --orange-light:#fff0e8;

    --red:#df6670;

}


/* ================================
   GENERAL
================================ */

*{
    box-sizing:border-box;
}

body{

    margin:0;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    color:var(--ink);

    background:

    radial-gradient(
        circle at 10% 5%,
        #e8f7ff 0,
        transparent 22%
    ),

    radial-gradient(
        circle at 90% 8%,
        #f1ebff 0,
        transparent 25%
    ),

    #f7fbff;

}


button,
input{
    font:inherit;
}


button{
    cursor:pointer;
}


button:disabled{

    opacity:.35;
    cursor:not-allowed;

}


.app{

    min-height:100vh;
    display:flex;

}