<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.glassy-text {
background-color: rgba(89, 79, 128, 0.74);
border-radius: 5px;
color: #ffffff;
font-family: Lucida Handwriting, serif;
line-height: 1.7;
font-size: 20px;
text-align: center;
max-width: 50%;
padding: 2rem 3rem;
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.glassy-text {
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background-color: rgba(89, 79, 128, 0.74);
}
}
body {
background-image: url('https://www.pocketwatch.co.uk/blog/wp-content/uploads/2018/05/ThinkstockPhotos-97407485-1024x680.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
margin: 0;
display: grid;
place-items: center;
}
</style>
</head>
<body>