@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root{

    --bg:#f7f4ed;
    --paper:#fffdf9;

    --border:#d8d0c7;

    --ink:#3b3835;

    --pink:#f2d7da;
    --green:#dde5c8;
    --blue:#dce6f5;
    --yellow:#f4e7bd;
    --purple:#e3d9f3;
}

*{
    box-sizing:border-box;
}

body{

    margin:0;
    padding:10px;

    background:var(--bg);

    background-image:
    radial-gradient(#ddd7ce .8px, transparent .8px);

    background-size:18px 18px;

    color:var(--ink);

    font-family:"Courier New", monospace;
    font-size:14px;
    line-height:1.5;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:#9b575f;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

/* ===================== */
/* SITE WRAPPER */
/* ===================== */

.site{

    max-width:1600px;

    margin:auto;
}

/* ===================== */
/* BANNER */
/* ===================== */

.banner{

    margin-bottom:18px;
}

.banner img{

    width:100%;

    display:block;

    border:1px solid #7f7368;

    image-rendering:pixelated;
}

/* ===================== */
/* MAIN GRID */
/* ===================== */

.layout{

    display:grid;

    grid-template-columns:

        340px
        1fr
        1fr
        400px;

    gap:14px;

    align-items:start;
}

/* ===================== */
/* CARDS */
/* ===================== */

.card{

    position:relative;

    background:var(--paper);

    border:1px solid var(--border);

    padding:16px;

    min-height:80px;
}

/* ===================== */
/* LABELS */
/* ===================== */

.label{

    position:absolute;

    top:-1px;
    left:12px;

    padding:3px 10px;

    border:1px solid var(--border);

    border-top:none;

    font-family:"VT323", monospace;

    font-size:28px;

    line-height:1;
}

.pink{
    background:var(--pink);
}

.green{
    background:var(--green);
}

.blue{
    background:var(--blue);
}

.yellow{
    background:var(--yellow);
}

.purple{
    background:var(--purple);
}

/* ===================== */
/* GRID POSITIONS */
/* ===================== */

.about{
    grid-column:1;
    grid-row:1;
}

.project{
    grid-column:2 / span 2;
    grid-row:1;
}

.music{
    grid-column:4;
    grid-row:1;
}

.navigation{
    grid-column:1;
    grid-row:2;
}

.latest-blog{
    grid-column:2 / span 2;
    grid-row:2;
}

.guestbook{
    grid-column:4;
    grid-row:2;
}

.status{
    grid-column:1;
    grid-row:3;
}

.devlog{
    grid-column:2 / span 2;
    grid-row:3;
}

.updates{
    grid-column:4;
    grid-row:3;
}

.project-shelf{
    grid-column:2;
    grid-row:4;
}

.archive{
    grid-column:3;
    grid-row:4;
}

.pixel-shelf{
    grid-column:4;
    grid-row:4;
}

.button-wall{
    grid-column:4;
    grid-row:5;
}

/* ===================== */
/* ABOUT */
/* ===================== */

.about-content{

    display:flex;

    gap:16px;
}

.avatar{

    width:110px;

    border:1px solid var(--border);

    image-rendering:pixelated;
}

.about h2{

    margin:0 0 6px;

    font-family:"VT323", monospace;

    font-size:36px;
}

.mini-list{

    list-style:none;

    padding:0;

    margin-top:10px;
}

.mini-list li{

    margin-bottom:6px;
}

.visitor{

    color:#c78686;

    margin-top:14px;
}

/* ===================== */
/* PROJECT */
/* ===================== */

.project{

    background:#f6f8ed;
}

.project-layout{

    display:grid;

    grid-template-columns:
    110px
    1fr
    220px;

    gap:20px;

    align-items:center;
}

.project h1{

    margin:0;

    font-family:"VT323", monospace;

    font-size:56px;

    font-weight:normal;
}

.project-icon img{

    border:1px solid var(--border);

    image-rendering:pixelated;
}

.progress-card{

    background:#fff6de;

    border:1px solid #e0d0aa;

    padding:12px;

    text-align:center;
}

.progress-card h3{

    margin:0 0 10px;

    font-family:"VT323", monospace;

    font-size:30px;
}

.progress-bar{

    height:18px;

    background:white;

    border:1px solid var(--border);

    margin-bottom:8px;
}

.progress-fill{

    width:60%;

    height:100%;

    background:#a6bf75;
}

/* ===================== */
/* MUSIC */
/* ===================== */

.music{

    background:#f5f8ff;
}

.music-layout{

    display:flex;

    gap:14px;
}

.music img{

    width:120px;

    border:1px solid var(--border);
}

/* ===================== */
/* NAVIGATION */
/* ===================== */

.navigation nav{

    display:flex;

    flex-direction:column;
}

.navigation a{

    display:block;

    padding:12px 4px;

    border-bottom:1px dashed #e7dfd6;
}

/* ===================== */
/* BLOG */
/* ===================== */

.latest-blog{

    background:#fff8f8;
}

.blog-layout{

    display:flex;

    gap:18px;
}

.blog-layout img{

    width:70px;
    height:70px;
}

.latest-blog h2{

    margin:0;

    font-family:"VT323", monospace;

    font-size:42px;
}

/* ===================== */
/* DEVLOG */
/* ===================== */

.devlog{

    background:#f7f9fd;
}

.devlog ul{

    margin:0;
    padding-left:18px;
}

.devlog li{

    margin-bottom:6px;
}

/* ===================== */
/* SHELF */
/* ===================== */

.books{

    display:flex;

    gap:10px;

    justify-content:center;
}

.book{

    width:75px;
    height:120px;

    border:1px solid #8d7d6d;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    font-family:"VT323", monospace;

    font-size:24px;
}

.book:nth-child(1){
    background:#a6ba7d;
}

.book:nth-child(2){
    background:#efc6cb;
}

.book:nth-child(3){
    background:#b8c8e6;
}

.book:nth-child(4){
    background:#d7c8aa;
}

/* ===================== */
/* ARCHIVE */
/* ===================== */

.archive{

    background:#faf7ff;
}

.archive ul{

    margin:0;
    padding-left:18px;
}

/* ===================== */
/* PIXEL SHELF */
/* ===================== */

.pixel-items{

    display:flex;

    justify-content:space-around;

    align-items:center;
}

.pixel-items img{

    width:60px;

    image-rendering:pixelated;
}

/* ===================== */
/* BUTTON WALL */
/* ===================== */

.buttons{

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}

.buttons img{

    width:88px;

    image-rendering:pixelated;
}

/* ===================== */
/* RESPONSIVE */
/* ===================== */

@media(max-width:1200px){

    .layout{

        grid-template-columns:1fr;
    }

    .layout > *{

        grid-column:auto !important;
        grid-row:auto !important;
    }

    .project-layout{

        grid-template-columns:1fr;
    }
}