*{
box-sizing:border-box;
margin:0;
padding:0;
}

html,body{
height:100%;
width:100%;
overflow:hidden;
font-family:system-ui,-apple-system,sans-serif;
}

/* FRACTAL BACKGROUND */

#canvas{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}


/* LOGO CENTERING */

.logo-wrapper{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);

display:flex;
align-items:center;
justify-content:center;

z-index:10;
padding:40px;

/* subtle vignette behind logo */

background: radial-gradient(
circle at center,
rgba(0,0,0,.35) 0%,
rgba(0,0,0,.15) 35%,
rgba(0,0,0,0) 65%
);

border-radius:20px;
}

/* LOGO SCALING */

.logo{

width:auto;
height:auto;

max-width:min(90vw,700px);
max-height:85vh;

/* stronger layered shadow */

filter:
drop-shadow(0 12px 25px rgba(0,0,0,.65))
drop-shadow(0 35px 60px rgba(0,0,0,.45))
drop-shadow(0 0 20px rgba(0,0,0,.35));

}