:root{
    --color-primary: #214fe0;
    --color-dark: #1d1f20;
    --color-light: #f4f4f4;
    --color-shade: #bbb;

    --badge-size: 250px;

    --lock-color: #fff;
    --lock-width: 30px;
    --lock-stroke: 2.5px;

}
::selection{
    background:
}
.badge-icon,
.badge-text{
    padding:1.5rem;
    float:left;
    -webkit-box-flex:1;
    flex:1
}

.badge{
    display:flex;
    margin-bottom: 1.5rem;
    margin-right: 1.5rem;

    color: var(--color-light);

    min-width: var(--badge-size);
    border-radius: 5px;
    box-shadow: 0px 0px 60px var(--color-shade);

    overflow: hidden;
}

.badge-icon{
    background: url('https://upload.wikimedia.org/wikipedia/commons/9/93/European_stars.svg') var(--color-primary) no-repeat center center;
    background-size: contain;
    max-width: calc( var(--badge-size));
}

.badge-text{
    font: normal small-caps normal 16px/1.5 Arial, Helvetica, sans-serif;
    /*text-transform: uppercase;*/
    line-height: 1;
    text-align: left;
}

.badge[data-color=""] .badge-text,
.badge[data-color="default"] .badge-text{
    color: var(--color-light);
    background-color: var(--color-primary);
}
.badge[data-color="light"] .badge-text{
    color: var(--color-dark);
    background-color: var(--color-light);
}
.badge[data-color="dark"] .badge-text{
    color: var(--color-light);
    background-color: var(--color-dark);
}


/*The body of the lock*/
.lock {
    display:block;
    width: var(--lock-width);
    height: calc(var(--lock-width) * 0.75);

    top: 50%; left:50%;
    transform: translate(-50%,-50%);

    border: var(--lock-stroke) solid var(--lock-color);
    border-radius: 5px;
    position: relative;

    transition: all 0.1s ease-in-out;
}
/*The keyhole*/
.lock:after {
    content: "";
    display: block;
    background: var(--lock-color);

    width: var(--lock-stroke);
    height: calc(var(--lock-stroke) * 3);

    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50% , -50%);

    transition: all 0.1s ease-in-out;
}
/*The arm of the lock*/
.lock:before {
    content: "";
    display: block;
    width: calc(var(--lock-width) / 2);
    height: calc(var(--lock-width) / 3);

    position: absolute;
    bottom: 100%; left: 50%;
    transform: translateX(-50%);

    border: var(--lock-stroke) solid var(--lock-color);
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom: 0;
}