@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap');

@font-face {
    font-family: 'CostumedHero';
    src: url('../fonts/costumedherojnl.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html,
body {
    font-family: "Ubuntu Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    margin: 0;
    padding: 0;
    background: white !important;
}

.font-brand {
    font-family: 'CostumedHero', sans-serif !important;
    font-optical-sizing: auto;
}

:root {
    --primary: #51ace6;
    --primary-hover: #3f9bd6;
    --primary-active: #2f89c4;
    --primary-rgb: 81, 172, 230;

    --secondary: #81d4ce;
    --secondary-hover: #69c8c1;
    --secondary-active: #52b9b1;
    --secondary-rgb: 129, 212, 206;
}

/* =========================
   TEXT COLORS
========================= */

.textcolor-primary {
    color: var(--primary) !important;
}

.textcolor-secondary {
    color: var(--secondary) !important;
}

/* =========================
   LINK COLORS
========================= */

.linkcolor-primary {
    color: var(--primary) !important;
    text-decoration-color: currentColor;
}

.linkcolor-primary:hover,
.linkcolor-primary:focus {
    color: var(--primary-hover) !important;
    text-decoration-color: currentColor;
}

.linkcolor-secondary {
    color: var(--secondary) !important;
    text-decoration-color: currentColor;
}

.linkcolor-secondary:hover,
.linkcolor-secondary:focus {
    color: var(--secondary-hover) !important;
    text-decoration-color: currentColor;
}

/* =========================
   BACKGROUND COLORS
========================= */

.bgcolor-primary {
    background-color: rgba(var(--primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bgcolor-secondary {
    background-color: rgba(var(--secondary-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* =========================
   BORDER COLORS
========================= */

.bordercolor-primary {
    border-color: rgba(var(--primary-rgb), var(--bs-border-opacity, 1)) !important;
}

.bordercolor-secondary {
    border-color: rgba(var(--secondary-rgb), var(--bs-border-opacity, 1)) !important;
}

/* =========================
   BUTTON PRIMARY
========================= */

.button-primary {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    color: black;
}

.button-primary:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: black;
}

.button-primary:focus,
.button-primary:active {
    background-color: var(--primary-active);
    border-color: var(--primary-active);
    color: black;
}

/* =========================
   BUTTON SECONDARY
========================= */

.button-secondary {
    background-color: var(--secondary);
    border: 1px solid var(--secondary);
    color: white;
}

.button-secondary:hover {
    background-color: var(--secondary-hover);
    border-color: var(--secondary-hover);
    color: white;
}

.button-secondary:focus,
.button-secondary:active {
    background-color: var(--secondary-active);
    border-color: var(--secondary-active);
    color: white;
}

/* =========================
   LIGHTBOX
========================= */

.lb-caption {
  display: none !important;
}