@font-face { font-family: Revalia; src: url('Revalia.ttf'); }

body {
    height: 100vh;
    margin: 0; 
    background-color: #363845; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.content {
    text-align: center;
}

img {
    max-width: 100%; 
    height: auto;
}

p {
    color: #BFAF80; 
    font-family: Revalia; 
    font-weight: 400; 
    font-size: 36px;
    background: #363845 -webkit-linear-gradient(left, #363845, #BFAF80) no-repeat 0 0 / 80px;
    background-clip: text;
    -webkit-text-fill-color: rgba(191, 175, 128, 0.7);
    animation: sweep 3.5s ease-in infinite;    
}

@keyframes sweep {
    0% {
        background-position: 0 0;
    }
  
    100% {
        background-position: 100% 100%;
    }
}

.ring {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:750px;
    height:750px;
    border:3px solid #363845;
    border-radius:50%;
    box-shadow:0 0 20px rgba(0,0,0,.25);
}

.ring:before {
    content:'';
    position:absolute;
    top:-3px;
    left:-3px;
    width:100%;
    height:100%;
    border-top:3px solid #BFAF80;
    border-right:3px solid #BFAF80;
    border-radius:50%;
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    0%
    {
        transform:rotate(0deg);
    }
    100%
    {
        transform:rotate(360deg);
    }
}