html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
}

:root {
    --wrap-weight: 600;
    --wrap-font: Arial, Helvetica, sans-serif;
    --wrap-caps: small-caps; /* font-variant-caps */
    --wrap-border: 0.5px solid white;
    --wrap-background: rgb(22,25,35);
}

@keyframes fadeIn {
	0% {opacity:0; top:50%; left:-10%}
    100% {opacity:1; left:1%;}
}
@keyframes fadeOut {
    0% {opacity:1; top:50%; left:1%}
    100% {opacity:0; left:-15%;}
}
#container{
    position:absolute;
    top:50%;
    left:1%;
    /* width:15%; */
    max-width:25%;
    transform: scale(1.2);
   
}
.fadeIn{
    animation: fadeIn ease 1s forwards;
}
.fadeOut{
    animation: fadeOut ease 1s forwards;
}
#box{
    width:100%;
    background: linear-gradient(180deg, rgb(33, 149, 246) 0%, rgb(33, 149, 246) 100%);
    border-radius: 0.2vh;    
}

#box:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-right-color: rgb(33, 149, 246);
	border-left: 0;
	margin-top: -8px;
	margin-left: -8px;
	opacity: 0%;
}

#title, #text{
    width:calc(100% - 20px);
}
#text{
    padding:10px;
    color:#fff;
    font-weight: var(--wrap-weight);
    font-variant-caps: var(--wrap-caps);
    font-family: var(--wrap-font);
    font-size: 0.7vw;
    text-align:center;
}