:root {
    --blue: #002855;
    --red: #ff4052
}

* {
    color: white;
}

.text-blue{
    color: var(--blue);
}

.text-red{
    color: var(--red);
}

.text-white{
    color: #ffffff !important;
}


.wrapper{
    min-height: 100lvh;
    background-color: var(--blue);
    background-image: url("/img/bg-a.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
}

.wrapper-nologo{
    min-height: 100lvh;
    background-color: var(--blue);
}

.card-lb {
    position: relative;
    text-align: center;
    background-image: url("/img/bg-a-transparent.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}

.card-lb::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -16px;
    background-color: var(--red);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" class="bi bi-mic-fill" viewBox="0 0 16 16"> <path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0z"/> <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5"/> </svg>');
    background-repeat: no-repeat;
    background-position: center;
    width: 48px;
    height: 48px;
    border-radius: 500px;
}

.card-lb > h4 {
    color: var(--blue);
}

.uk-button-danger {
    background-color: var(--red);
}

.uk-label{
    background-color: var(--blue);
}

.card-ocf {
    position: relative;
    text-align: center;
    background-image: url("/img/bg-a-transparent.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}

.card-ocf .avatar {
    background-color: var(--red);
    width: 160px;
    height: 160px;
    border-radius: 500px;
    overflow: hidden;
}

.card-ocf > h4 {
    color: var(--blue);
}

.card-ocf::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -16px;
    background-color: var(--red);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="white" class="bi bi-mic-fill" viewBox="0 0 16 16"> <path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0z"/> <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5"/> </svg>');
    background-repeat: no-repeat;
    background-position: center;
    width: 48px;
    height: 48px;
    border-radius: 500px;
}

.uk-button-default, .uk-button-default:hover {
    color: white;
    backdrop-filter: blur(10px);
    background-color: rgba(255,255,255,0.1);
}

@media screen and (max-width: 640px) {
    .wrapper{
        background-size: cover;
        background-position: unset;
    }
}