body{
    font-family: Arial, Helvetica, sans-serif;
    background:#0e0e0e;
    color:#e6e6e6;
    margin:0;
}

nav{
    background:#111;
    padding:15px;
    text-align:center;
}

nav a{
    color:#e6e6e6;
    margin:0 12px;
    text-decoration:none;
    font-size:14px;
}

nav a:hover{
    color:#7cc7ff;
}

.hero{
padding:90px 20px;
text-align:center;
background:#0a0a0a;
border-bottom:1px solid #222;
}

.hero p{
color:#aaa;
font-size:18px;
}

.container{
max-width:950px;
margin:auto;
padding:20px;
line-height:1.7;
}

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:20px;
}

.project{
background:#151515;
padding:20px;
border-left:3px solid #7cc7ff;
}

.project a{
color:#7cc7ff;
text-decoration:none;
}

.diagram{
background:#111;
padding:20px;
font-family:monospace;
color:#7cc7ff;
white-space:pre;
}

footer{
margin-top:80px;
padding:30px;
text-align:center;
background:#111;
color:#888;
}

footer a{
color:#7cc7ff;
text-decoration:none;
margin:0 8px;
}