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

html,body{
width:100%;
height:100%;
overflow:hidden;
background:#050505;
color:#fff;
font-family:Helvetica,Arial,sans-serif;
}

.container{
width:100%;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
position:relative;
z-index:2;
}

.logo{
    width:min(42vw,520px);
    
    filter:
    invert(1)
    brightness(1.3);
    
    opacity:.92;
    
    animation:
    rotateLogo 100s linear infinite,
    breathe 10s ease-in-out infinite;
    }

.copy{
margin-top:64px;
text-align:center;
opacity:.35;
letter-spacing:.25em;
text-transform:uppercase;
font-size:11px;
line-height:2;
}

.copy a{
color:white;
text-decoration:none;
}

.grain{
position:fixed;
inset:-200%;
pointer-events:none;
opacity:.05;
background:
radial-gradient(circle at 20% 20%, white 1px, transparent 1px),
radial-gradient(circle at 80% 80%, white 1px, transparent 1px);
background-size:8px 8px;
animation:grain 8s steps(10) infinite;
}

@keyframes rotateLogo{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

@keyframes breathe{
0%,100%{filter:brightness(.85);}
50%{filter:brightness(1.15);}
}

@keyframes grain{
0%{transform:translate(0,0);}
25%{transform:translate(-5%,3%);}
50%{transform:translate(4%,-4%);}
75%{transform:translate(-3%,5%);}
100%{transform:translate(0,0);}
}