:root {
    --surface:#181b23;
    --main:#0047ab;
    --text:#f3f4f6;
    --muted:#9ca3af;
    --accent:#5865F2;
    --border:#2a2f3b;
}

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

body {
    background:url("../images/PurpleSky.png");
    color:var(--text);
    font-family:"JetBrains Mono", monospace;
    display:flex;
    min-height:100vh;
}


nav {
    width:190px;
    height:100vh;
    background:rgba(120,120,120,0.18);
    backdrop-filter:blur(10px);
    border-right:1px solid rgba(255,255,255,0.15);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

nav a {
    color:var(--main);
    margin-top: 3%;
    text-decoration:none;
    padding-left:10px;
}

main {
    padding:80px;
    max-width:850px;
}

.hero {
    font-family:"Press Start 2P", monospace;
    font-size:24px;
    margin-bottom:30px;
}

.hero p {
    color:var(--muted);
    line-height:1.8;
    margin-bottom:20px;
}