/* Importing  */
@font-face {
    font-family: inter;
    src: url(fonts/interVariable.ttf);
}

@font-face {
    font-family: martinaPlantijn;
    src: url(fonts/martinaPlantijn.otf);
}

/* @font-face {
    font-family: dmSans;
    src: url(fonts/dmSans.ttf);
} */


:root,
[data-bs-theme=dark],
[data-bs-theme=light] {
    color-scheme: dark;

    /* site wide colors */
    --bs-primary: #4a2450;
    --bs-secondary: #a93861;
    --bs-success: rgb(116, 198, 46);
    --bs-info: #5d37ba;
    --bs-warning: #e4cf08;
    --bs-danger: rgb(218, 87, 22);
    --bs-light: #f8f9fa;
    --bs-dark: black;

    /* background colors */
    --bs-primary-rgb: 74, 36, 80;
    --bs-secondary-rgb: 169, 56, 97;
    --bs-success-rgb: 116, 198, 46;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 218, 87, 22;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 0, 0, 0;

    --bs-body-color: #f8f9fa;
    --bs-body-color-rgb: 248, 249, 250;

    --bs-body-bg: black;
    --bs-body-bg-rgb: 0, 0, 0;

    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;

    --bs-secondary-color: #0d1820;
    --bs-secondary-color-rgb: 222, 226, 230;

    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;

    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;

    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;

    --bs-primary-text-emphasis: #5d37ba;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;

    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;

    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;

    --bs-heading-color: inherit;
    --bs-link-color: #5d37ba;
    --bs-link-hover-color: #a93861;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;

    --bs-border-color: var(--bs-light);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;



    /* FONTS */
    --bs-font-sans-serif: "inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-serif: "martinaPlantijn";
    --bs-nav-link-font-size:16px;
    --bs-nav-link-padding-x: 32px;
    --bs-transition-speed: 0.01s;


    
}



/* Shaping of Items */
:root {
    --bs-border-radius: 0rem;
    --bs-link-color: var(--bs-primary);
}

/* ------------- Custom Backgrounds ----------------- */

.blockBackground {
  --s: 214px; /* control the size*/
  --c1: var(--bs-light);
  --c2: var(--bs-primary);
  --c3: var(--bs-dark);
  
  --_l:#0000 calc(25%/3),var(--c1) 0 25%,#0000 0;
  --_g:conic-gradient(from 120deg at 50% 87.5%,var(--c1) 120deg,#0000 0);
  background:
    var(--_g),var(--_g) 0 calc(var(--s)/2),
    conic-gradient(from 180deg at 75%,var(--c2) 60deg,#0000 0),
    conic-gradient(from 60deg at 75% 75%,var(--c1) 0 60deg,#0000 0),
    linear-gradient(150deg,var(--_l)) 0 calc(var(--s)/2),
    conic-gradient(at 25% 25%,#0000 50%,var(--c2) 0 240deg,var(--c1) 0 300deg,var(--c2) 0),
    linear-gradient(-150deg,var(--_l)) var(--c3);
  background-size: calc(0.866*var(--s)) var(--s);
}


/* ------------- Button ----------------- */

.btn {
    border-radius: 999em;
    /* Creates a pill shape buttons*/
}

.btn-primary {
    background-color: var(--bs-primary);
    border: 0;
}

.btn-primary:hover {
    background-color: var(--bs-secondary);
    transition: var(--bs-transition-speed);
    border: 0;
}


.btn-white {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    border: 0;
}

.btn-white:hover {
    background-color: var(--bs-gray);
    transition: var(--bs-transition-speed);
    color: var(--bs-dark);

    border: 0;
}


.btn-outline-primary {
    --bs-btn-color:  var(--bs-primary);
    --bs-btn-border-color:  var(--bs-primary);
    --bs-btn-hover-color:  var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--bs-body-color);

    --bs-btn-active-bg:  var(--bs-secondary);
    --bs-btn-active-border-color:  var(--bs-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}


/* ------------- Navbar ----------------- */

.navbar-dark {
    border-bottom: 1px solid var(--bs-secondary-bg);
}

.nav-pills .nav-link.active {
    background-color: var(--bs-primary);
    padding: 0.4rem 1rem;
    border-radius: 999em;
    /* Creates a pill shape buttons*/
}

.nav-pills .nav-link.active:hover {
    background-color: var(--bs-secondary);
}

/* ------------- Footer ----------------- */

.link-primary {
    color: var(--bs-primary);
    transition: var(--bs-transition-speed);

}

.link-primary:hover {
    color: var(--bs-secondary);
}

/* ------------- Font Settings ----------------- */

body {
    font-family: var(--bs-font-sans-serif);
}

h1 {
    font-family: var(--bs-font-serif);
}

/* ------------- Animations ----------------- */




/* ------------------ Gradient ----------------------- */


.wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    filter: blur(200px);
}

.gradient {
    position: absolute;
    border-radius: 100%;
    opacity: 1;
    mix-blend-mode: screen;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
}


.gradient-1 {
    background: var(--bs-primary) none repeat scroll 0% 0% / auto padding-box border-box;
    width: 681.062px;
    height: 717.865px;
    animation-duration: 7s;
    opacity: 1;
    left: 60%;
    top: 40%;
    z-index: -2;
    animation-name: animation-gradient-1;
}

.gradient-2 {
    background: var(--bs-secondary) none repeat scroll 0% 0% / auto padding-box border-box;
    width: 638.5px;
    height: 673px;
    animation-duration: 7s;
    opacity: 1;
    left: 40%;
    top: 60%;
    z-index: -1;
    animation-name: animation-gradient-2;
}

.gradient-3 {
    background: rgb(42, 160, 168) none repeat scroll 0% 0% / auto padding-box border-box;
    width: 595.927px;
    height: 628.125px;
    animation-duration: 7s;
    opacity: 1;
    left: 50%;
    top: 50%;
    z-index: -3;
    animation-name: animation-gradient-3;
}

@keyframes animation-gradient-1 {
    0% {
        transform: translateY(-50%) translateX(-50%) rotate(-20deg) translateX(20%);
    }

    25% {
        transform: translateY(-50%) translateX(-50%) skew(-15deg, -15deg) rotate(80deg) translateX(30%);
    }

    50% {
        transform: translateY(-50%) translateX(-50%) rotate(180deg) translateX(25%);
    }

    75% {
        transform: translateY(-50%) translateX(-50%) skew(15deg, 15deg) rotate(240deg) translateX(15%);
    }

    100% {
        transform: translateY(-50%) translateX(-50%) rotate(340deg) translateX(20%);
    }
}

@keyframes animation-gradient-2 {
    0% {
        transform: translateY(-50%) translateX(-50%) rotate(40deg) translateX(-20%);
    }

    25% {
        transform: translateY(-50%) translateX(-50%) skew(15deg, 15deg) rotate(110deg) translateX(-5%);
    }

    50% {
        transform: translateY(-50%) translateX(-50%) rotate(210deg) translateX(-35%);
    }

    75% {
        transform: translateY(-50%) translateX(-50%) skew(-15deg, -15deg) rotate(300deg) translateX(-10%);
    }

    100% {
        transform: translateY(-50%) translateX(-50%) rotate(400deg) translateX(-20%);
    }
}

@keyframes animation-gradient-3 {
    0% {
        transform: translateY(-50%) translateX(-50%) translateX(-15%) translateY(10%);
    }

    20% {
        transform: translateY(-50%) translateX(-50%) translateX(20%) translateY(-30%);
    }

    40% {
        transform: translateY(-50%) translateX(-50%) translateX(-25%) translateY(-15%);
    }

    60% {
        transform: translateY(-50%) translateX(-50%) translateX(30%) translateY(20%);
    }

    80% {
        transform: translateY(-50%) translateX(-50%) translateX(5%) translateY(35%);
    }

    100% {
        transform: translateY(-50%) translateX(-50%) translateX(-15%) translateY(10%);
    }
}



/* Creates Live Background centered in the middle */
.wonderBox {
    background-size: cover;
    /* Ensures the GIF covers the entire div */
    background-position: center center;
    /* Centers the GIF horizontally and vertically */
    background-repeat: no-repeat;
    /* Prevents the GIF from repeating */
    padding: 20rem;
    width: 100%;
}