body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to top, #000000 0%, #001a25 50%, #003c4f 75%, #005c7a 99%, #0078ac 100%);
color: #dadada;
font-weight: 600;
text-align: center;
}

.centered-text {
position: relative;
padding: 0 25px 20px 25px;
border-radius: 15px;
background: linear-gradient(to bottom, rgba(0, 169, 224, 0.6) 0%, rgba(0, 153, 204, 0.55) 14%, rgba(0, 136, 191, 0.5) 25%, rgba(0, 100, 160, 0.4) 37%, rgba(0, 70, 128, 0.3) 55%, rgba(0, 40, 96, 0.2) 70%, rgba(0, 0, 0, 0.99) 100%);
box-shadow: 0 0 80px rgba(0, 191, 255, 0.9),
0 0 40px rgba(0, 191, 255, 0.6);
backdrop-filter: blur(10px);
opacity: 0;
transition: opacity 20s ease;
}

.xtitle {
opacity: 0;
transition: opacity 4s ease;
visibility: hidden;
color: #e4d2a9;
font-size: calc(32px + 1.9vw);
}

.xmsg {
opacity: 0;
transition: opacity 9s ease;
visibility: hidden;
color: #bbb;
font-size: calc(38px + 0.9vw);
}

/* Media query for tablet devices */
@media (max-width: 768px) {
.xtitle {
font-size: calc(25px + 1.5vw)
}

.xmsg {
margin-top: 25px;
font-size: calc(32px + 0.9vw);
}
}

/* Media query for mobile devices */
@media (max-width: 480px) {
.xtitle {
font-size: calc(26px + 1.2vw);
}

.xmsg {
margin-top: 15px;
font-size: calc(32px + 1.3vw);
}
}