:root {
    --alt-white-l: #f4f4f4;
    --alt-white: #ececec;
    --alt-white-d: #dcdcdc;
    --alt-white-dd: #cccccc;
    --alt-darkgray-l: #383838;
    --alt-darkgray: #2c2c2c;
    --alt-darkgray-d: #202020;

    --light-red: #ff5757;
    --light-orange: #ffd887;
    --light-purple: #9787ff;

    --yellow-orange: #ffc300;

    --dark-hotpink: #e44f9b;
    --pale-hotpink: #e379ae;
    --pale-hotpink-d: #dd6da5;
    --pale-hotpink-dd: #d15e98;
    --light-palevioletred: #ea8ba9;
    --light-palevioletred-d: #df7a9a;
    --light-palevioletred-dl: #e480a0;

    --pale-blue-l: #adefff;
    --pale-blue: #93eaff;
    --pale-blue-d: #7fe6ff;
    --pale-blue-dd: #00ceff;
    --pale-blue-ddd: #009fc6;
    --pale-blue-dddd: #00718e;
    --pale-blue-dddi: #0ba4cd;
    --pale-blue-ddii: #20c5f3;
    --pale-blue-diii: #51d3f8;
    --pale-blue-diid: #38b6d6;
    --pale-blue-diidd: #2b9ebc;
    --white-blue-ll: #e9fbff;
    --white-blue-l: #d3f8ff;
    --white-blue: #c8f7ff;
    --white-blue-d: #c3e7ff;
    --white-blue-dd: #b4e0ff;
    --white-blue-dddd: #242e33;
    --white-blue-dddl: #3f4e5a;
    --white-blue-ddll: #4d5f6e;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}