#beacon {
    width: 20px;
    height: 16px;
    background-color: red;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
}

#beacon:after {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    content: "XS";
}

/* Small devices (landscape phones, 576px up to 767px) */
@media only screen and (min-width: 576px) {

    #beacon {
        background-color: green;
    }

    #beacon:after {
        content: "SM";
    }
}

/* Medium devices (tablets, 768px up to 991px) */
@media only screen and (min-width: 768px) {

    #beacon {
        background-color: yellow;
    }

    #beacon:after {
        color: #000;
        content: "MD";
    }
}

/* Large devices (ipad pro, desktops, 992px up to 1199) */
@media only screen and (min-width: 992px) {

    #beacon {
        background-color: blue;
    }

    #beacon:after {
        color: #fff;
        content: "LG";
    }
}

/* X-Large devices (large desktops, 1200px up to 1399) */
@media only screen and (min-width: 1200px) {

    #beacon {
        background-color: lightseagreen;
    }

    #beacon:after {
        content: "XL";
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {

    #beacon {
        background-color: black;
        width: 24px;
    }

    #beacon:after {
        content: "XXL";
    }
}