body {
    position: relative;
    padding: 0px;
    margin: 0px;
    transition: color ease 1000ms, background-color ease 1000ms;
}

body::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    height: 100%;
    width: 100%;
    /* background: rgba(255,255,255,0.5); */
    background-image: url("../images/stripe.svg");
    filter: blur(2px);
    z-index: -9;
}

body::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    height: 100%;
    width: 100%;
    background: rgb(240, 240, 240);
    z-index: -10;
}

body.dark-mode {
    background-color: rgb(var(--bg-clr-1));
    color: rgb(var(--text-clr-1));
}

body.light-mode {
    background-color: rgb(var(--bg-clr-2));
    color: rgb(var(--text-clr-2));
}

.josefin-sans-100 {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.josefin-sans-200 {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.josefin-sans-300 {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.josefin-sans-400 {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.josefin-sans-500 {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.josefin-sans-600 {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.josefin-sans-700 {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.fw-500 {
    font-weight: 500;
}

.mode-btn {
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    z-index: 100;
    transition: all ease 500ms;
}

.mode-btn span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: all ease 500ms;
}

.mode-btn.dark-mode {
    color: rgb(var(--text-clr-2));
    border-color: rgb(var(--text-clr-2));
    box-shadow: 0 0 4px 1px rgb(var(--text-clr-1));
    background-color: rgb(var(--text-clr-1));
}

.mode-btn.light-mode {
    color: rgb(var(--text-clr-1));
    border-color: rgb(var(--text-clr-1));
    box-shadow: 0 0 4px 1px rgb(var(--text-clr-2));
    background-color: rgb(var(--text-clr-2));
}

.mode-btn.dark-mode .bi-moon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}

.mode-btn.light-mode .bi-sun {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}

.stand-out {
    /* font-size: 2em;
    font-size: 1.2em;
    font-weight: bold;
    color: rgb(var(--brand-clr-2)) !important; */
}

.stand-out-2 {
    font-size: 2em;
    /* color: rgb(var(--brand-clr-4)) !important; */
    color: var(--bs-dark) !important;
}

.underline {
    text-decoration: underline;
    text-decoration-color: rgb(var(--brand-clr-4));
}

.home .h1.underline {
    font-size: 1.5em;
}

.brand-hr {
    padding: 0.15rem;
    background: var(--brand-bg-clr);
    opacity: 1;
    width: 50%;
    border-radius: 50rem;
}

.bg-card-1-full {
    background-color: rgb(var(--brand-clr-2));
    color: white;
    max-width: 100% !important;
    width: calc(100vw - 1.25rem) !important;
    transition: all ease 300ms;
}

.bg-card-1-full>* {
    max-width: var(--max-vw);
    margin-left: auto;
    margin-right: auto;
}

body.dark-mode .bg-card-1-full {
    background-color: black;
}

a.btn:not(.btn-success) {
    background-color: rgba(var(--brand-clr-4), 0.85);
}

a.btn:not(.btn-success):hover {
    background-color: rgba(var(--brand-clr-4), 1);
}

.dark-card {
    position: relative;
    color: rgb(var(--text-clr-1));
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.dark-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url("../images/square.svg");
    z-index: -2;
}

.dark-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgb(var(--bg-clr));
    z-index: -2;
}

.dark-card>* {
    max-width: var(--max-vw);
    margin-left: auto;
    margin-right: auto;
}

.dark-card-1 {
    position: relative;
    min-height: calc(100vh - var(--navbar-height));
}

.dark-card-1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: none;
    z-index: -2;
}