style.css

body
{
    background-image: url("https://images.hdqwalls.com/download/neblua-space-planet-art-4k-ye-2560x1440.jpg");
    background-size: cover;
    background-repeat: no-repeat;        
    background-attachment: fixed;        
    display: flow-root;        
    justify-content: center;
    align-items: center;
    height: 1000px;
    width: auto;
    max-height: 2000px;
}
body div
{
    margin-left: 100px;
    margin-top: 50px;
}
#title
{
    background-color: black;
    margin: 0 0 0 0;
    border-radius: 10px;
}
#title p
{
    color: white;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#frosted-glass0
{
    height: 300px;
    width: 300px;
    box-shadow: 0 20px 50px -10px rgb(0 0 0 / 85%);
    overflow: hidden;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    backdrop-filter: blur(3px);
    animation-name: frosted-glass-fly;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
#frosted-glass1
{
    height: 300px;
    width: 300px;
    box-shadow: 0 20px 50px -10px rgb(0 0 0 / 85%);
    overflow: hidden;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    backdrop-filter: blur(5px);
}
#frosted-glass2
{
    height: 300px;
    width: 300px;
    box-shadow: 0 20px 50px -10px rgb(0 0 0 / 85%);
    overflow: hidden;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    backdrop-filter: blur(7px);
}
#frosted-glass3
{
    height: 300px;
    width: 300px;
    box-shadow: 0 20px 50px -10px rgb(0 0 0 / 85%);
    overflow: hidden;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

@keyframes frosted-glass-fly {
    0%{
        margin-left: 100px;
        margin-top: 50px;
    }
    50%{
        margin-left: 100px;
        margin-top: 250px;
    }
    100%{
        margin-left: 100px;
        margin-top: 50px;
    }
}