@charset "UTF-8";

:root {
    --color-main: #9BD7F6;
    --color-sub1: #181D61;
    --color-sub2: #181D61;
    --color-sub3: #181D61;
    --color-sub4: #D74608;
    --color-var1: #9BD7F6;
    --color-var2: #181D61;
    --color-black: #000;
    --color-white: #fff;
}

.sub1-bg { background-color: var(--color-sub1); }
.sub2-bg { background-color: var(--color-sub2); }
.sub3-bg { background-color: var(--color-sub3); }
.sub4-bg { background-color: var(--color-sub4); }
.main-bg  { background-color: var(--color-main);  }

.sub1-text { color: var(--color-sub1); }
.sub2-text { color: var(--color-sub2); }
.white-text { color: #fff; }
.black-text { color: #000; }

.sub1-border { border-color: var(--color-sub1); }
.white-border { border-color: #fff; }

.all-background { background-color: var(--color-main); }
.all-gradient   { background: linear-gradient(to bottom, var(--color-sub4), var(--color-sub4)); }
.completed-gradient { background: linear-gradient(to bottom, var(--color-sub1), var(--color-sub1)); }