:root {
    --main: rgba(217, 87, 34, 1);
    --alt: rgba(39, 46, 103, 1);
    --eff: rgba(254, 150, 107, 1);
    --light: rgba(241, 252, 252, 1);
    --text: rgba(28, 28, 28, 1);
    /* rpx = 100vw / 1440px, 1440px is the main screen width from the design. */
    --rpx: 100vw / 1440;
    --rpxh: 100vh / 3221;
    --main-font-family: "Afacad", Helvetica;
    --main-font-weight: 400;
    --main-font-size: calc(12 * var(--rpx));
    --main-letter-spacing: 0px;
    --main-line-height: normal;
    --main-font-style: normal;
    ---font-family: "Alexandria", Helvetica;
    ---font-weight: 400;
    ---font-size: calc(20 * var(--rpx));
    ---letter-spacing: 0px;
    ---line-height: normal;
    ---font-style: normal;
}



.orange-filled-btn {
    background-color: var(--main);
    border: none;
    color: azure;
    font-size: calc(15 * var(--rpx));
}

.orange-filled-btn:hover {
    background-color: rgb(221, 64, 0);
}

.blue-filled-btn {
    background-color: var(--alt);
    border: none;
    color: azure;
    font-size: calc(15 * var(--rpx));
}

.blue-filled-btn:hover {
    background-color: rgb(18, 27, 106);
}

.apricot-filled-btn {
    background-color: var(--eff);
    border: none;
    font-size: calc(15 * var(--rpx));
}

.apricot-filled-btn:hover {
    background-color: rgb(255, 87, 17);
}

.orange-outlined-btn {
    background-color: transparent;
    border: var(--main) calc(3 * var(--rpx)) solid;
    font-size: calc(15 * var(--rpx));
}

.orange-outlined-btn:hover {
    background-color: #5a5a5a;
}