@font-face {
        font-family: Gillty;
        src: url(https://dl.dropbox.com/scl/fi/31k3615z45fpsrzxq9w3k/Gillty.ttf?rlkey=aovw96dedpbok095hbvznt460&);
    }

    @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

    .gravity-cntndr {
        width: 500px;
        margin: 20px auto;
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15px 20px;
        font-size: 12px;
        font-family: 'Nunito', sans-serif;
        line-height: 15px;
        color: var(--accent1);
        --corners: 12px;
        --accent1: #fff;
        --accent2: #9b0f19;
        --bckgrnd1: #fff;
        --bckgrnd2: #000018;
        scrollbar-color: var(--accent2) transparent;
        scrollbar-width: thin;
    }

    .gravity-cntndr > a {
        position: absolute;
        top: 30px;
        right: -40px;
        text-align: center;
        color: var(--accent2);
        text-decoration: none;
        text-transform: uppercase;
        transform: rotate(90deg);
    }

    .gravity-cntndr br {
        display: none;
    }


    .gravity-sppr {
        width: 100%;
        --size: 200px;
        display: grid;
        grid-template-columns: 0.5fr 0.5fr 1fr 1fr;
        grid-template-rows: repeat(1, var(--size));
    }

    .gravity-img {
        width: var(--size);
        height: var(--size);
        position: relative;
        grid-column: 1 / 3;
        grid-row: 1 / 1;
        z-index: 1;
        overflow: hidden;
    }

    .gravity-img::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--bckgrnd1);
        mask-image: url(https://i.imgur.com/F52oyL0.png);
        mask-size: 100% 100%;
        transform: rotate(50deg);
    }

    .gravity-img::before {
        content: '';
        --size: 50px;
        width: var(--size);
        height: var(--size);
        border-radius: 100%;
        border: 2px solid var(--bckgrnd1);
        position: absolute;
        top: calc(var(--size) / -1.4);
        right: 0px;
    }


    .gravity-img > img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
        object-fit: cover;
        border: 18px solid var(--bckgrnd2);
        box-sizing: border-box;
    }

    .gravity-inff {
        grid-column: 2 / 5;
        grid-row: 1 / 1;
        padding: 10px 20px 10px calc(var(--size) - 70px);
        box-sizing: border-box;
        background-color: var(--accent2);
        border-radius: var(--corners);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }

    .gravity-inff::before,
    .gravity-inff::after {
        content: '';
        --size: 80px;
        width: var(--size);
        height: var(--size);
        border-radius: 100%;
        border: 2px solid var(--bckgrnd1);
        position: absolute;
    }

    .gravity-inff::before {
        top: calc(var(--size) / -1.5);
        right: -10px;
    }

    .gravity-inff::after {
        bottom: calc(var(--size) / -1.2);
        left: 85px;
    }

    .gravity-inff > span {
        z-index: 1;
        text-align: center;
    }

    .gravity-inff > span[ttl] {
        font-size: 30px;
        font-family: Gillty;
        text-align: center;
    }

    .gravity-inff div {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .gravity-inff div > span {
        flex-grow: 1;
        padding: 2px 12px;
        background-color: var(--bckgrnd1);
        border-radius: var(--corners);
        color: var(--accent2);
    }

    .gravity-cntr {
        width: 100%;
        padding: 10px 15px;
        box-sizing: border-box;
        background-color: var(--bckgrnd1);
        border-radius: calc(var(--corners) * 100);
        display: flex;
        justify-content: space-between;
    }

    .gravity-cntr a {
        color: var(--accent2);
        text-decoration: none;
        font-size: 14px;
        transition: .5s;
    }

    .gravity-cntr a:hover {
        transform: scale(1.2);
        transition: .5s;
    }

    .gravity-izq {
        flex-grow: 1;
        width: 46%;
        padding: 25px 20px 30px;
        box-sizing: border-box;
        border-radius: var(--corners);
        background-color: var(--accent2);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .gravity-izq::before,
    .gravity-izq::after {
        content: '';
        --size: 80px;
        width: var(--size);
        height: var(--size);
        border-radius: 100%;
        border: 2px solid var(--bckgrnd1);
        position: absolute;
    }

    .gravity-izq::before {
        bottom: calc(var(--size) / -1.2);
        right: -10px;
    }

    .gravity-izq::after {
        top: calc(var(--size) / -1.2);
        left: -10px;
    }

    .gravity-izq > span[ttl] {
        padding: 5px 0 10px;
        font-size: 25px;
        font-family: Gillty;
        text-align: center;
    }

    .gravity-izq > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .gravity-izq > div i {
        font-size: 24px;
    }

    .gravity-izq > div > div {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .gravity-izq > div > div a {
        text-decoration: none;
        color: currentColor;
    }

    .gravity-izq > div > div span {
        font-style: italic;
    }

    .gravity-drch {
        flex-grow: 1;
        width: 46%;
        padding: 25px 20px 30px;
        box-sizing: border-box;
        border-radius: var(--corners);
        background-color: var(--bckgrnd1);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15px 10px;
        color: var(--accent2);
    }

    .gravity-drch::before,
    .gravity-drch::after {
        content: '';
        --size: 80px;
        width: var(--size);
        height: var(--size);
        border-radius: 100%;
        border: 2px solid var(--accent2);
        position: absolute;
    }

    .gravity-drch::before {
        top: calc(var(--size) / -1.5);
        right: -10px;
    }

    .gravity-drch::after {
        bottom: calc(var(--size) / -1.5);
        left: -10px;
    }

    .gravity-drch > span[ttl] {
        width: 100%;
        padding: 5px 0 10px;
        font-size: 25px;
        font-family: Gillty;
        text-align: center;
    }

    .gravity-drch > div {
        width: 47%;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .gravity-drch > div img {
        width: 100%;
        object-fit: cover;
        border-radius: var(--corners);
    }

    .gravity-drch > div span[name] {
        font-weight: bold;
    }