@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=block');


bostra-logo {
    width: fit-content;
    height: fit-content;

    background-color: #ffdb99;
    color: #1f0f53;
    font-size: 3rem;
    font-family: 'Audiowide';

    border: 7.5px solid #1f0f53;
    outline: 5px solid #ffd699;

    text-wrap: nowrap;

    display: block;
    margin: .5rem;
}

@media screen and (max-width: 340px) {
    bostra-logo {
        top: 15%!important;
        font-size: 1.5rem!important;
        text-wrap: wrap!important;
    }
}
@media screen and (max-width: 768px) {
    bostra-logo {
        font-size: 1.5rem!important;
    }
}


bostra-logo.rounded {
    border-radius: 15px;
}
bostra-logo.round {
    border-radius: 50%;

    width: 30vw;
    height: 30vw;

    font-size: 6vw;
    text-wrap: wrap;
    line-height: 90%;
    text-align: center;
    position: relative;
}
bostra-logo.round::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 90%;
}


bostra-logo::after {
    content: 'Bostra Development';
    padding: .3rem .5rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
bostra-logo[data-text]::after {
    content: attr(data-text);
}