@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --background: 204deg 4.95% 19.8%;
    --foreground: 0deg 0% 100%;
    --card: 210deg 4.65% 16.86%;
    --card-foreground: 0deg 0% 100%;
    --primary: 186deg 51.89% 58.43%;
    --primary-foreground: 0 0% 100%;
    --cta: 110.3deg 74.89% 56.27%;
    --cta-foreground: 0 0% 100%;
    --input: 0deg 1.92% 40.39%;
    --border: 0deg 1.92% 40.39%;
    --radius: 3px;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --background: 204deg 4.95% 19.8%;
        --foreground: 0deg 0% 100%;
        --card: 210deg 4.65% 16.86%;
        --card-foreground: 0deg 0% 100%;
        --primary: 186deg 51.89% 58.43%;
        --primary-foreground: 0 0% 100%;
        --cta: 110.3deg 74.89% 56.27%;
        --cta-foreground: 0 0% 100%;
        --input: 0deg 1.92% 40.39%;
        --border: 0deg 1.92% 40.39%;
    }
}

header {
    border-bottom: 8px solid transparent;
    border-image: linear-gradient(to right, #ffff28 0%, #ff7800 25%, #ff42aa 50%, #5ec1cc 75%, #82ef28 100%);
    border-image-slice: 1;
}

.bm-container .blazored-modal[role=dialog] {
    border: 8px solid transparent;
    border-image: linear-gradient(to bottom right, #ffff28 0%, #ff7800 25%, #ff42aa 50%, #5ec1cc 75%, #82ef28 100%);
    border-image-slice: 1;
    border-radius: 0;
}

.heading,
.btn {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-transform: uppercase;
}

.btn {
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 1000rem;
}