/* helvetix - neocities */

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

html{
    background:#0a0a0a;
}

body{
    background:#0a0a0a url("images/background.jpg") center top fixed;
    background-size:cover;
    color:#d8d4cf;
    font:16px/1.7 Georgia,"Times New Roman",serif;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(8,8,8,.72);
    pointer-events:none;
    z-index:0;
}

#wrapper{
    position:relative;
    z-index:1;
    width:960px;
    margin:40px auto;
    background:rgba(18,18,18,.94);
    border:1px solid #454545;
    padding:24px 28px 40px;
}

#banner{
    display:block;
    width:100%;
    height:240px;
    object-fit:cover;
    border:1px solid #505050;
    margin-bottom:18px;
}

#title{
    margin-bottom:18px;
}

h1{
    font-size:34px;
    font-weight:normal;
    color:#ece8e2;
}

#title p{
    color:#9c9892;
    font-style:italic;
    margin-top:3px;
}

nav{
    border-top:1px solid #3d3d3d;
    border-bottom:1px solid #3d3d3d;
    padding:9px 0;
    margin-bottom:30px;
}

nav a{
    text-decoration:none;
    color:#bdb8b3;
    font:12px Verdana,sans-serif;
    margin-right:18px;
}

nav a:hover{
    color:#fff;
}

#intro{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:28px;
    align-items:start;
}

.avatar{
    width:220px;
    border:1px solid #5d5d5d;
    background:#111;
    padding:5px;
}

.right p{
    margin:12px 0;
}

.divider{
    display:block;
    width:100%;
    max-width:700px;
    margin:34px auto;
    opacity:.75;
}

section{
    margin-bottom:18px;
}

h2{
    font-size:25px;
    font-weight:normal;
    color:#ece8e2;
    border-bottom:1px solid #3f3f3f;
    padding-bottom:6px;
    margin-bottom:15px;
}

table{
    width:100%;
    border-collapse:collapse;
}

td{
    padding:7px 4px;
    border-bottom:1px solid #2f2f2f;
}

td:first-child{
    width:170px;
    color:#aaa4a0;
}

ul{
    margin-left:22px;
}

li{
    margin:8px 0;
}

a{
    color:#b9c1cf;
}

a:hover{
    color:#fff;
}

footer{
    margin-top:34px;
    border-top:1px solid #3d3d3d;
    padding-top:15px;
    font-size:13px;
    color:#8f8b86;
}

::selection{
    background:#5b5563;
    color:#fff;
}

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#111;
}

::-webkit-scrollbar-thumb{
    background:#4b4b4b;
}

@media (max-width:980px){

#wrapper{
    width:94%;
}

#intro{
    grid-template-columns:1fr;
}

.avatar{
    width:260px;
    max-width:100%;
}

}