:root {
    --main-bg-color: red
}

.testColor {
    color: var(--main-bg-color)
}

.fadeOut {
    animation: fadeout 2s;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.test {
    width: 129px;
    height: 129px;
    background-color: #fff;
    padding: 1rem;
    display: block;
    font-size: 40%;

}

/*  typical mobile devices  */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    span.help:after {
        content: ' - PHONE';
        display: inline;
    }
}

/*  mobile (landscape)  */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    span.help:after {
        content: ' - PHONE (Landscape)';
        display: inline;
    }
}

/*  For tablet  */
@media only screen and (min-width: 768px) and (max-width: 979px) {
    span.help:after {
        content: ' - Tablet';
        display: inline;
    }
}

/* small desktop */
@media only screen and (min-width: 980px) and (max-width: 1023px) {
    span.help:after {
        content: ' - Desktop (small)';
        display: inline;
    }
}

/* typical desktop  */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    span.help:after {
        content: ' - Desktop (typical)';
        display: inline;
    }
}

/* large desktop */
@media only screen and (min-width: 1200px) {
    span.help:after {
        content: ' - Desktop (Large)';
        display: inline;
    }
}

/* screen readers  */
@media speech {}