html, body{
width:100%;
height:100%;
margin:0;
padding:0;
overflow-x:hidden;
}
@keyframes fadeIn {
0% {opacity:0; top:60%}
50%{top:51%}
100% {opacity:1; top:50%}
}
@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: translateY(-50%);
}
.fadeIn{
animation: fadeIn ease 1s forwards;
}
.fadeOut{
animation: fadeOut ease 1s forwards;
}
#box{
width:100%;
background: linear-gradient(180deg, rgb(0, 153, 255) 0%, rgb(50, 173, 255) 100%);
border-radius:5px;
}
#box:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 8px solid transparent;
border-left-color: rgb(20, 143, 225);
border-left: 0;
margin-top: -8px;
margin-left: -8px;
}
#title, #text{
width:calc(100% - 20px);
}
#text{
padding:10px;
color:#fff;
font-family: 'Roboto Condensed', sans-serif;
font-size:16px;
text-align:center;
}