logo-style.css

:root {
    --color-primary:#ffff00;
    --color-secondary:#ffff00;
    --color-third:#ffff00;
    --transparent:rgba(0,0,0,0);
}

html, body {
    height: 100%;
}

body {
    background-size: cover;
    background-position: center center;
}

.logo-container {
    color: var(--color-primary);
    font-size: 10px;
    fill: var(--color-primary);
    transition: all ease-in-out .5s;
}
.logo-container>* * {
    pointer-events: none;
}
.logo-container * {
    /* background-color: inherit; */
    background: var(--color-primary);
    color: inherit;
    fill: inherit;
    position: relative;
    transition: all ease-in-out .5s;
}
.logo-brazil {
    position: absolute;
    background: var(--transparent);
    fill: var(--color-third);
    width: 7em;
    height: 7em;
    top: 0;
    left: 50%;
    transform: translate(0, 1em);
}
.logo-j,
.logo-s {
    position: absolute;
    background: var(--transparent);
    width: 8em;
    height: 8em;
    left: 50%;
}
.logo-j {
    top: 7em;
}
.logo-j-j {
    position: absolute;
    left: 0;
    bottom: 3em;
    width: 100%;
    height: 2em;
}
.logo-j-j:before,
.logo-j-j:after {
    content: '';
    position: absolute;
    background: inherit;
    bottom: 0;
    width: 2em;
    height: 0;
}
.logo-j-j:before {
    left: 0;
    height: 3em;
}
.logo-j-j:after {
    right: 0;
    height: 6em;
}
.logo-dash {
    background: var(--color-secondary);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2em;
}
.logo-s {
    top: 16em;
}
.logo-j .logo-fx,
.logo-j .logo-fx:before,
.logo-j .logo-fx:after {
    position: absolute;
    width: 2em;
    height: 0;
    bottom: 0;
    left: 2em;
    transition: all ease-in-out .5s;
}

@keyframes spin {
    from {
        transform: rotateY(0);
    }
    to {
        transform: rotateY(360deg);
    }
}