:root {
    --textcolor: #000;
    --textselect: #ddd;
    --textselectbg: #23694e;

    --footercolor: #ddd;

    --headercolor: #ddd;

    --linkcolor: rgb(35, 105, 78);
    --linkhover: #76bda2;
    --linkvisited: #9ab1a8;

    --bgcolor: #000;
    --boxcolor: #dbdbdb;
    --sideboxcolor: #ececec;

    --border: #000;

    font: 13pt "Hubballi", sans-serif;
}

* { margin: 0; padding: 0; }
* { transition: all 0.5s ease; }
* { box-sizing: border-box; }
img { max-width: 100%; }

/* CENTERED PAGE */
/* header, h1, page-content, footer { margin: auto; } */
/*  */

/* LEFT ALIGNED PAGE */
header, h1, page-content, footer { margin-left: 10px; }
/*  */

body {
    background-color: var(--bgcolor);
    background-image: url(/images/backgrounds/noise.png);
    background-attachment: fixed;
    color: var(--textcolor);
}

::selection {
    background-color: var(--textselectbg);
    color: var(--textselect);
}

page-content {
    width: 800px;
    display: flex;
    border: 1px solid var(--border);
}

header { 
    width: 800px;
    height: 200px;
    background-image: url(/images/backgrounds/ghosts.png);
    border: 1px solid var(--border);
    border-bottom: none;
    }

header h1 { 
    color: var(--headercolor); 
    margin-top: 150px;
    padding-left: 10px;
    font-size: 36pt;
    letter-spacing: 8pt;
    animation: floating 3s infinite ease-in-out;
}

@keyframes floating {
    0% { transform: translate(0, 0px); }
    50% { transform: translate(0, -10px); }
    100% { transform: translate(0, 0px); }
}

aside {
    width: 200px;
    padding: 10px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--boxcolor);
}

sidebar-box {
    width: 180px;
    padding: 10px;
    border: 1px solid var(--border);
    background-color: var(--sideboxcolor);
    max-height: 300px;
    overflow: auto;
    scrollbar-width: thin;
}

main {
    width: 400px;
    padding: 10px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    line-height: 1.1em;
    background-color: var(--boxcolor);
}

footer {
    width: 800px;
    color: var(--footercolor);
    padding: 10px 0;
    text-align: center;
}

a { color: var(--linkcolor); text-decoration: none; font-weight: bold; }
a:hover, a:focus { color: var(--linkhover); }
a:visited { color: var(--linkvisited); }

nav { text-align: center; }
nav a { display: block; }
nav a:hover, a:focus { letter-spacing: 0.1em; }

ul, ol { list-style-type: none; }

.baby { position:relative; bottom: 0; width: 200px;}

.buttons, .status, .sites, .tunes { overflow: hidden; width: 100%; }
.buttons, .sites { margin: 5px 0; }

.linkback { text-align: center; }
.grow img { padding: 5px; transition: 0.5s ease; }
.grow img:hover { transform: scale(1.2); }

.jump img { position: relative; transition: 0.25s ease-in-out; }
.jump img:hover { transform: translateY(-20%); }

.tilt img { transition: all 0.5s ease; }
.tilt img:hover { transform: rotate(10deg); }

.masonry { column-count: 4; column-gap: 2px; }
.masonry img { max-height: 200px; display: block; margin-bottom: 10px; }