body, html {                              
   margin: 0;                           
   padding: 0;                          
   font-family: 'Open Sans', sans-serif;
   color: #fff;
 }                                      
 
 body{
   background: url(./images/000255870013.jpg) no-repeat center center fixed;
   background-size: cover; 
 }
#vanta {
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
 main {
   position: relative;
   opacity: 0;
   filter: blur(10px);
   transition: opacity 2s ease-in-out, filter 2s ease-in-out;
 }

 header{
   margin-top: 1em;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 header > img {
   width: 6em;
   height: 6em;
   border-radius: 100%;
   border: 1px solid #fff;
   box-shadow: rgb(28 32 93 / 24%) 0px 2px 8px 0px;
 }

 header > h1 {
    display: inline-block;
    font-size: 0.8em;
    font-weight: bold;
    border-radius: 1em;
    background-color: #000a;
    color: #fff;
    padding: 0.3em 0.6em;
    border: 1px solid #fffa;
    backdrop-filter: blur(10px) saturate(160%) constrast(180%);         
    -webkit-backdrop-filter: blur(10px) saturate(160%) constrast(180%); 
  } 
 
 ul {
   box-sizing: border-box;
   list-style: none;
   margin: 0 auto;
   padding: 2em;
   max-width: 480px;
 }
 ul > li {
   background-color: #fffa;
   backdrop-filter: blur(10px) saturate(160%) constrast(180%);
   -webkit-backdrop-filter: blur(10px) saturate(160%) constrast(180%);
   border-radius: 10em;
   padding: 1em;
   margin: 1.4em 0;
   box-shadow: rgb(28 32 93 / 24%) 0px 2px 8px 0px; 
 }
   
 ul > li > a {
   display: flex;
   flex-direction: row;
   justify-content: center; 
   align-items: center;
   gap: 0.5em;
 }

 a {
   color: black;
   text-decoration: none;
 }