html,body {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        background: #212121;
        color: #fff;
        font-size: 18px;
        font-family: 'Bebas Neue', cursive;
    }

    .header {

        z-index: 1;
        background: #212121d5;
        /* background: linear-gradient(0deg,rgba(33, 33, 33, 0) 0%, rgba(33, 33, 33, 1) 70%); */
    }

    a {
        color: #fa0202;
        text-decoration: none;
    }

    .center {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        flex-direction: column;
        align-content: center;
        flex-wrap: nowrap;
    }

    .ring-container {
        position: relative;
        width: 40px;
        height: 40px;
        float: left;
    }

    .circle {
        width: 15px;
        height: 15px;
        background-color: #fa0202;
        border-radius: 50%;
        position: absolute;
        top: 14px;
        left: 13px;
    }
    .img {
        float: left;
        margin-left: 0px;
        margin-top: 9px;
    }
    .img img{
        width: 360px;
    }

    .ringring {
        border: 3px solid #fa0202;
        -webkit-border-radius: 30px;
        height: 25px;
        width: 25px;
        position: absolute;
        left: 7.5px;
        top: 9.5px;
        -webkit-animation: pulsate 1s ease-out;
        -webkit-animation-iteration-count: infinite; 
        opacity: 0.0
    }

    .box {
        width: 100px;

    }
    
    .custom-badge {
        font-weight: 100;
        background: #ffffff2c;
        color: #ffffffc0;
        line-height: 16px;
        padding: 3px 11px;
        margin: 5px 5px;
    }

    .custom-badge-selected {
        background: #ffffff56;
        color: #ffffffe1;    
    }