/* .div-wrapper {
    position: relative;
    height: 300px;
    width: 300px;
} */

.div-wrapper img {
    position: absolute;
    right: -10px;
    bottom: 0;
}

body {
    font-family: "Comic Sans MS";
}


#retroQuote {
    .container {
        width: 30%;
        margin: 100px;
    }

    h1 {
        display: block;
        background-color: #222;
        color: #FFF;
        font-family: 'Saira', sans-serif;
        font-weight: 700;
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 30px;
        background: linear-gradient(to bottom, #00f2ff 0%, #e2fbff 50%, #0a343f 51%, #0094f7 100%);
        background-blend-mode: multiply;
        background-size: 10px 100px;
        background-repeat: repeat;
        line-height: 1;
        -webkit-text-fill-color: transparent;
        /* prevents absolute position to wrap text into multiple lines*/
        white-space: nowrap;
    }


    &::before {
        background: none;
        content: attr(data-text);
        position: absolute;
        /* left: 0;
        top: 0; */
        z-index: +2;
        background-image: url('https://i.imgur.com/Ym9HCsT.gif');
        background-blend-mode: screen;
        -webkit-text-fill-color: transparent;
        opacity: 0.5;
    }

    &::after {
        background: none;
        content: attr(data-text);
        position: absolute;
        /* left: 0;
        top: 0; */
        text-shadow: 1px -1px 0 rgba(255, 255, 255, 0.5),
            3px 1px 3px rgba(255, 0, 255, 0.85),
            -3px -2px 3px rgba(0, 0, 255, 0.85),
            1px -2px 0 rgba(255, 255, 255, 0.8);
        z-index: -2;
    }
}