/* ===========================
RESET
=========================== */

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

/* ===========================
BODY
=========================== */

body{

    background:#f8f4ee;
    font-family:monospace;
    padding:18px;

}

/* ===========================
LAYOUT
=========================== */

.page{

    width:1402px;
    margin:auto;

    display:flex;
    gap:20px;

}

.left-sidebar,
.center-column,
.right-sidebar{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.left-sidebar{

    width:325px;

}

.center-column{

    width:700px;

}

.right-sidebar{

    width:302px;

}

/* ===========================
HEADER
=========================== */

.header{

    height:240px;

}

/* ===========================
TOP ROW
=========================== */

.top-row{

    display:flex;
    gap:20px;

}

.about,
.currently{

    width:340px;
    height:250px;

}

/* ===========================
LEFT
=========================== */

.wolf{height:191px;}
.menu{height:210px;}
.moon{height:170px;}
.news{height:160px;}
.player{height:145px;}
.status{height:110px;}

/* ===========================
CENTER
=========================== */

.interests{height:185px;}
.updates{height:220px;}

/* ===========================
RIGHT
=========================== */

.bat{height:170px;}
.extra{height:160px;}
.links{height:182px;}
.buttons{height:170px;}
.credits{height:182px;}

/* ===========================
BOX STYLE
=========================== */

.box,
.header{

    background:#faf6ef;

    border:2px solid #191919;

    padding:3px;

}

/* bordo interno */

.box::before,
.header::before{

    content:"";

    display:block;

    width:100%;
    height:100%;

    border:1px dashed #7a2a2a;

}