Twitch "YOU DIED" Fullscreen Alert

-----HTML-----

<div class="alert_outer-container has-animation">
    <div class="alert_widget-container">
        <div class="alert_text-container">
            <div>
                <p class="alert_text"></p>
                <p class="alert_secondary-text">
                    {cheer_message}
                </p>
            </div>
            <div class="alert_image-container">
                <img id="main-image" class="alert_image" alt="Alert image" src="https://static-cdn.jtvnw.net/alert-asset/v2/22001186/image/2whKxL985q1uvVakkLStVosLzoq/youdiedbg.png">
            </div>
        </div>
    </div>
</div>

-----CSS-----

@font-face {
    font-family: "Textile";
    src: url("https://db.onlinewebfonts.com/t/653f0331330580a51716e5cbb69d8db9.eot");
    src: url("https://db.onlinewebfonts.com/t/653f0331330580a51716e5cbb69d8db9.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/653f0331330580a51716e5cbb69d8db9.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/653f0331330580a51716e5cbb69d8db9.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/653f0331330580a51716e5cbb69d8db9.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/653f0331330580a51716e5cbb69d8db9.svg#Textile")format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.eb-garamond- {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

html {
	overflow: hidden;
	height: 100%;
}

body {
	height: 100%;
}

.alert_outer-container {
	display: flex;
	justify-content: center;
	position: relative;
	padding: 1rem;
	height: 100%;
}

.alert_outer-container.playing {
	animation: 7s alert-animation ease-in-out forwards;
}

.alert_widget-container {
	display: flex;
	background-color: #FFFFFF00;
	width: 100%;
	height: 100%;
	padding: 0px;
	border-radius: 0px;
}

.alert_image-container {
	display: flex;
	width: 100%;
	position: absolute;
	z-index: -1;
	justify-content: center;
	align-self: center;
}

.alert_text-container {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	width: 100%;
	position: relative;
	z-index: 1;
	max-height: 100%;
	max-width: 100%;
}

.alert_text {
	font-family: 'EB-Garamond';
	font-size: 48px;
	font-weight: normal;
	color: #FFFFFF;
	width: 100%;
}

.alert_secondary-text {
	font-family: 'EB-Garamond';
	font-size: 110px;
	font-weight: normal;
	color: rgb(100,10,10);
	width: 100%;
    text-transform: uppercase;
    white-space: nowrap;
    transform: scaleY(1.2)
}

.alert_text-accent {
	color: #9146FF;
}

.alert_image {
	width: 100%;
	height: 100%;
}

img {
  width: 0px;
  height: 0px;
}

.cheer-1 {
	color: #979797;
	font-size: 0px;
}

.cheer-100 {
	color: #9c3ee8;
	font-size: 0px;
}

.cheer-1000 {
	color: #1db2a5;
	font-size: 0px;
}

.cheer-5000 {
	color: #0099fe;
	font-size: 0px;
}

.cheer-10000 {
	color: #f43021;
	font-size: 0px;
}

.cheer-100000 {
	color: #f3a71a;
	font-size: 0px;
}

@keyframes alert-animation {
    0% {
      transform: scale(1);
    opacity: 0;
    }
    50% {
      transform: scale(1.1);
    opacity: 1;
    }
    50% {
      transform: scale(1.1);
    opacity: 1;
    }
    100% {
        transform: scale(1.2);
    opacity: 0;
    }
}