:root {
    /*  warna */
    --white: #ffffff;

    --primaryShade900: #03070F;
    --primaryShade800: #081026;
    --primaryShade700: #10214C;
    --primaryShade600: #173171;
    --primary: #1F4197;
    --primaryShade400: #4C67AC;
    --primaryShade300: #798DC1;
    --primaryShade200: #A5B3D5;
    --primaryShade100: #D2D9EA;
    --primaryShade50: #E9EDF5;


    --secondaryShade800: #331E00;
    --secondaryShade700: #543100;
    --secondaryShade600: #B66A00;
    --secondary: #FFCB82;
    --secondaryShade400: #FFD9A3;
    --secondaryShade300: #FFE4BF;
    --secondaryShade200: #FFEED6;
    --secondaryShade100: #FFF5E8;

    --greyShade900: #0D0D0D;
    --greyShade800: #202020;
    --greyShade700: #404040;
    --greyShade600: #606060;
    --grey: #808080;
    --greyShade400: #999999;
    --greyShade300: #B3B3B3;
    --greyShade200: #CCCCCC;
    --greyShade100: #E6E6E6;
    --greyShade50: #F3F3F3;

    --dangerShade900: #120304;
    --dangerShade800: #2C0809;
    --dangerShade700: #581012;
    --dangerShade600: #84171B;
    --danger: #B01F24;
    --dangerShade400: #C04C50;
    --dangerShade300: #D0797C;
    --dangerShade200: #DFA5A7;
    --dangerShade100: #EFD2D3;
    --dangerShade50: #F8E9EA;

    --successShade800: #003325;
    --successShade700: #003D2C;
    --successShade600: #005A42;
    --success: #008A65;
    --successShade400: #00E1A5;
    --successShade300: #2EFFC7;
    --successShade200: #6EFFD8;
    --successShade100: #A2FFE6;
}

.h1Bold30 {
    font-weight: bold;
    font-size: 30px;
    color: var(--greyShade800)
}

.h1Bold26 {
    font-weight: bold;
    font-size: 26px;
    color: var(--greyShade800)
}

.h1Bold23 {
    font-weight: bold;
    font-size: 23px;
    color: var(--greyShade800)
}

.h1Bold20 {
    font-weight: bold;
    font-size: 20px;
    color: var(--greyShade800)
}

.h1Bold16 {
    font-weight: bold;
    font-size: 16px;
    color: var(--greyShade800)
}

.h1Medium30 {
    font-weight: 600;
    font-size: 30px;
    color: var(--greyShade800)
}

.h1Medium26 {
    font-weight: 600;
    font-size: 26px;
    color: var(--greyShade800)
}

.h1Medium23 {
    font-weight: 600;
    font-size: 23px;
    color: var(--greyShade800)
}

.h1Medium20 {
    font-weight: 600;
    font-size: 20px;
    color: var(--greyShade800)
}

.h1Medium16 {
    font-weight: 600;
    font-size: 16px;
    color: var(--greyShade800)
}

.h1Normal30 {
    font-weight: 500;
    font-size: 30px;
    color: var(--greyShade800)
}

.h1Normal26 {
    font-weight: 500;
    font-size: 26px;
    color: var(--greyShade800)
}

.h1Normal23 {
    font-weight: 500;
    font-size: 23px;
    color: var(--greyShade800)
}

.h1Normal20 {
    font-weight: 500;
    font-size: 20px;
    color: var(--greyShade800)
}

.h1Normal16 {
    font-weight: 500;
    font-size: 16px;
    color: var(--greyShade800)
}

.h1Light30 {
    font-weight: 400;
    font-size: 30px;
    color: var(--greyShade800)
}

.h1Light26 {
    font-weight: 400;
    font-size: 26px;
    color: var(--greyShade800)
}

.h1Light23 {
    font-weight: 400;
    font-size: 23px;
    color: var(--greyShade800)
}

.h1Light20 {
    font-weight: 400;
    font-size: 20px;
    color: var(--greyShade800)
}

.h1Light16 {
    font-weight: 400;
    font-size: 16px;
    color: var(--greyShade800)
}