:root{
    --bs-body-font-family: 'Fraunces', serif;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .display-4 {
font-weight: 700;
}
.rgb {
    position: relative;
    --split-distance: 0.04em;
}
.rgb:hover {
    --split-distance: 0.12em;
}
.rgb span {
    left: 0;
    mix-blend-mode: difference;
    transition: all ease-in-out 0.15s;

}
[data-bs-theme="dark"] .rgb span{
    mix-blend-mode: screen;
}


.rgb .r {
    color: #f00;
    left: calc(var(--split-distance) * -1);
    top: var(--split-distance);
}
.rgb .g {
    color: #0f0;
}
.rgb .b {
    color: #00f;
    left: var(--split-distance);
    top: calc(var(--split-distance) * -1);
}
.rgb .r, .rgb .b {
    pointer-events: none;
    user-select: none;
}

.rgb:has(.r) :first-child {
    visibility: hidden;
    pointer-events: none;
}

.profile-pic {
    width: 8rem;
}

.bg-tertiary {
    background-color: var(--bs-tertiary-bg);
}

.linkedin svg{
    height: 1em;
    margin-top: -0.25em;
}
.linkedin path {
    fill: var(--bs-btn-color);
}
.linkedin:hover path {
    fill: var(--bs-btn-hover-color);
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    background-color: #112d4e;
    color: #f9f7f7;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 32rem;
}

.hero h1 {
    font-weight: 700;
}

.hero .subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.hero .transparent-joel {
    position: absolute;
    bottom: 0;
    right: 4%;
    height: 85%;
    z-index: 0;
}

@media (max-width: 768px) {
    .hero .transparent-joel {
        display: none;
    }
}