Twidget CSS

/*------------------------- GOOGLE FONT DATA CALLS ------------------------*/
/*Get The Google Fonts = https://fonts.google.com/*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Pushster&display=swap');




/*------------------------- CHANNEL IMAGE ON LEFT ------------------------*/
/*this shows channel icon*/
.pfp {
    /*border: 3px solid #f0f;   */
    border-radius: 10px;
    margin-left: 30px!important;
    animation: channel-icon 3s ease;
}
/*this shows the logo of youtube, facebook, or Twitch*/
.pflogo {
    display: none!important;
}

/*------------------------- THE TEXT NAME AND MSSG ------------------------*/
/* Text Drop Shadow Maker = https://html-css-js.com/css/generator/text-shadow/*/
/* Hex color picker = https://redketchup.io/color-picker */

.name {

    /*text-transform: uppercase;*/
    font-size: 40px !important;
    color: yellow;
    /*padding: 0px 0px 0px 0px;*/
    text-shadow: 5px 3px 0px #000000;
     animation: animated-name 3s ease;
}

.message {

    /*text-transform: uppercase;*/
    font-size: 20px !important;
    color: #0f0;
    padding: 0px 0px 5px 0px;
    text-shadow: -3px 0px 4px #000000;
     animation: animated-message 2s ease;
}


/*------------------------- CONTAINER / BACKGROUND ------------------------*/
/* Color picker with transparency = https://hslpicker.com/ */
/* Gradient color maker  = https://www.colorzilla.com/gradient-editor/  */
/* Background Image maker = https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size*/
/* Box Drop Shadow Maker = https://html-css-js.com/css/generator/box-shadow/  */
/*background-image:url('w3css.gif');*/
/*background-repeat:no-repeat;*/
/*background-size:100% 100%;*/

.simpleContainer {
    margin: 30px;
    padding: 1px !important;
    border-left: 0px solid #000;
    /*border: 11px solid #000;*/
    /*background: transparent;*/
    border-radius: 30px;
    background-image:url('https://files.catbox.moe/r4c98a.gif');
    background-repeat:no-repeat;
    background-size:100% 100%;
    animation: animated-container 1s ease;
}




/*------------------------- ANIMATIONS ------------------------*/
/* Click here to get all the prebuilt css for all the cool animations = https://files.catbox.moe/d8edna.txt */

@keyframes animated-container {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}


@keyframes channel-icon {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}



@keyframes animated-name {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;

    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);

    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}
@keyframes animated-message{
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}