/* RESET */

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

/* BODY + BACKGROUND */

body{
    font-family:"Share Tech Mono", monospace;
    color:#e6e6e6;

    background-image:url("images/bg.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

/* DARK OVERLAY */

body::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    pointer-events:none;
    z-index:0;
}

/* CONTAINER */

#container{
    max-width:1100px;
    margin:0 auto;
    padding:40px 20px;

    position:relative;
    z-index:1;
}

/* LAYOUT */

#layout{
    display:flex;
    gap:20px;
    margin-top:30px;
}

/* HEADER */

h1{
    font-size:64px;
    letter-spacing:4px;
    text-transform:uppercase;
    position:relative;
}

h1::before,
h1::after{
    content:attr(data-text);
    position:absolute;
    left:0;
    top:0;
}

h1::before{
    color:#ff2d2d;
    left:2px;
}

h1::after{
    color:#2d5cff;
    left:-2px;
}

/* SIDEBAR */

aside{
    width:240px;
    padding:16px;
    border:1px solid #2a2a2a;
    background:#111;
}

/* MAIN */

main{
    flex:1;
}

.window{
    border:1px solid #2a2a2a;
    background:#101010;
    padding:20px;
}

/* FOOTER */

footer{
    margin-top:40px;
    text-align:center;
    color:#666;
}