html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
}
@keyframes fadeIn {
    /* 0% {opacity:0; left:-15%;} */
    100% {opacity:1; top:90%; left:45%}
}
@keyframes fadeOut {
    0% {opacity:1; top:90%; left:45%}
    /* 100% {opacity:0; left:-15%;} */
}
#container{
    position:absolute;
    top: 90%;
    left: 45%;
    /* width:10%; */
    max-width:25%;
    transform: translateY(-50%); 
}

.fadeIn{
    animation: fadeIn ease 1s forwards;
}
.fadeOut{
    animation: fadeOut ease 1s forwards;
}

#box{
    width:100%;
    background: #191e25; 
    border-radius:5px;
    
}

#box:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -8px;
	margin-left: -8px;
}

#title, #text{
    width:calc(100% - 20px);
}

#text{
    padding:10px;
    color:#fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-weight: 600;
    font-size:17px;
    text-align:center;   
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.419);
}