body {
    background-color: var(--bg);
    color: var(--bs-white);
}

* {
    word-break: break-word;
    word-wrap: break-word;
}

p {
    opacity: 0.75;
}

.c1 {
    color: var(--c1);
}

.c2 {
    color: var(--c2);
}

.c3 {
    color: var(--c3);
}

.c4 {
    color: var(--c4);
}

.c5 {
    color: var(--c5);
}

.c6 {
    color: var(--c6);
}

.bg1 {
    background-color: var(--c1);
}

.bg2 {
    background-color: var(--c2);
}

.bg3 {
    background-color: var(--c3);
}

.bg4 {
    background-color: var(--c4);
}

.bg5 {
    background-color: var(--c5);
}

.bg6 {
    background-color: var(--c6);
}

.abg1::after {
    background-color: var(--c1) !important;
}

.abg2::after {
    background-color: var(--c2) !important;
}

.abg3::after {
    background-color: var(--c3) !important;
}

.abg4::after {
    background-color: var(--c4) !important;
}

.abg5::after {
    background-color: var(--c5) !important;
}

.abg6::after {
    background-color: var(--c6) !important;
}

.f1 {
    font-family: "Josefin Sans", sans-serif;
}

.f2 {
    font-family: "Galada", sans-serif;
}

.mute {
    opacity: 0.75;
}

.box {
    width: 100%;
    max-width: var(--viewport-width);
    margin-left: auto;
    margin-right: auto;
}

.content {
    width: 100%;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

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

.about img {
    width: 100%;
    margin: 1rem 0;
}


.fs-img {
    max-height: 100dvh;
    object-fit: cover;
}

@media screen and (min-width:768px) {
    .about img {
        float: left;
        width: 50%;
        border-radius: 1rem;
        margin: 0;
        margin-right: 1rem;
    }
}