body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to top, #000000 0%, #001a25 50%, #002e3b 75%, #004b64 99%, #00638d 100%);
color: #dadada;
font-weight: 600;
text-align: center;
}

.centered-text {
position: relative;
padding: 0 7px 20px 7px;
border-radius: 15px;
background: linear-gradient(to bottom,
rgba(0, 169, 224, 0.6) 0%,
rgba(0, 140, 200, 0.55) 20%,
rgba(0, 100, 180, 0.5) 40%,
rgba(0, 70, 160, 0.45) 60%,
rgba(0, 50, 140, 0.4) 80%,
rgba(0, 30, 120, 0.35) 90%,
rgba(0, 14, 54, 0.35) 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;
max-width: calc(100% - 50px);
margin: 0 auto;
box-sizing: border-box;
}

.xtitle {
opacity: 0;
transition: opacity 4s ease;
visibility: hidden;
color: #e4d2a9;
}

.xtitle-pic {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

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

/* 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);
}
}

/* Mobile Devices */
@media (max-width: 480px) {
.centered-text {
max-width: calc(100% - 50px);
margin: 0 25px;
transform: translateY(-22%);
}
.xtitle {
margin-top: 10px;
}
.xmsg {
margin-top: 45px;
font-size: calc(32px + 1vw);
}
.xmsg2 {
margin-top: 45px;
font-size: calc(21px + 0.5vw);
}
}