*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

background:#111;

color:#ddd;

font-family:"Cormorant Garamond",serif;

overflow-x:hidden;

cursor:none;

}

.container{

width:75%;

max-width:900px;

margin:auto;

padding-top:10vh;

padding-bottom:10vh;

}

h1{

font-size:5rem;

font-weight:300;

letter-spacing:10px;

margin-bottom:10px;

}

.subtitle{

font-family:"IBM Plex Mono",monospace;

font-size:.8rem;

color:#777;

margin-bottom:70px;

}

nav{

display:flex;

flex-wrap:wrap;

gap:35px;

margin-bottom:80px;

}

nav a{

text-decoration:none;

color:#ddd;

font-family:"IBM Plex Mono";

transition:.4s;

}

nav a:hover{

opacity:.4;

letter-spacing:3px;

}

.quote{

font-size:2rem;

max-width:700px;

line-height:1.5;

margin-bottom:100px;

font-style:italic;

}

.about{

max-width:600px;

font-size:1.3rem;

line-height:2;

opacity:.85;

}

footer{

margin-top:120px;

font-family:"IBM Plex Mono";

font-size:.8rem;

display:flex;

justify-content:space-between;

align-items:center;

color:#666;

}

#music{

display:flex;

align-items:center;

gap:15px;

}

#play{

background:none;

border:1px solid #555;

color:white;

padding:8px 12px;

cursor:pointer;

}

#play:hover{

background:#333;

}

#cursor{

width:32px;

height:32px;

position:fixed;

pointer-events:none;

z-index:9999;

background:url("img/beetle.png");

background-size:contain;

background-repeat:no-repeat;

transform:translate(-50%,-50%);

}

#grain{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

opacity:.08;

pointer-events:none;

background-image:url("img/noise.png");

animation:grain .3s steps(2) infinite;

}

@keyframes grain{

0%{transform:translate(0,0);}
20%{transform:translate(-2%,2%);}
40%{transform:translate(2%,-1%);}
60%{transform:translate(-1%,1%);}
80%{transform:translate(1%,-2%);}
100%{transform:translate(0,0);}

}

#dust{

position:fixed;

width:100%;
height:100%;

pointer-events:none;

background-image:radial-gradient(white 1px,transparent 1px);

background-size:160px 160px;

opacity:.04;

animation:drift 80s linear infinite;

}

@keyframes drift{

from{

transform:translateY(0);

}

to{

transform:translateY(-500px);

}

}

::selection{

background:white;

color:black;

}