/* === CUSTOM FONTS === */
@font-face {
    font-family: 'Magazine';
    src: url('MagazineLetterByBrntlbrnl-Regular.ttf');
}

@font-face {
    font-family: 'Determination';
    src: url('determination.ttf');
}

/* === PAGE BACKGROUND === */
body {
    margin: 0;
    padding: 0;
    background-image: url('https://64.media.tumblr.com/11c4d1baeb88812bdfbb5ada7580b7bf/tumblr_inline_ml80ro3rxg1qz4rgp.gif');
    background-repeat: repeat;
    font-family: 'Determination', sans-serif;
}

/* === MAIN CONTAINER === */
#container {
    width: 950px;
    min-height: 1100px;
    margin: auto;
    background-image: url('https://64.media.tumblr.com/4852817c1173f74569222eca275f13cd/tumblr_inline_mw4aq1lET01s5t339.png');
    border: 4px solid #5e587f;
    padding-bottom: 20px;
}

/* === BANNER === */
#banner img {
    width: 950px;
    height: 250px;
    display: block;
}

/* === MARQUEE TOP === */
#topmarquee {
    background: #0c6378;
    color: #c0b9ee;
    padding: 5px;
    font-family: 'Magazine';
    font-size: 22px;
}

/* === LEFT COLUMN === */
#leftcolumn {
    width: 200px;
    float: left;
    padding: 10px;
}

/* === NAVIGATION === */
#nav {
    width: 150px;
    height: 500px;
    background: #a5bfe4;
    padding: 10px;
    border: 3px solid #5e587f;
}

#nav a {
    display: block;
    margin-bottom: 10px;
    padding: 5px;
    text-decoration: none;
    background: #c0b9ee;
    color: #0c6378;
    text-align: center;
}

#nav a:hover {
    background: #559bd8;
    color: white;
}

/* === STATUS BOX === */
#status {
    margin-top: 15px;
    background: #c0b9ee;
    padding: 10px;
    border: 3px solid #5e587f;
}

/* === INTRO BOX === */
#intro {
    width: 500px;
    height: 300px;
    background-image: url('https://www.partitionwizard.com/images/uploads/articles/2020/05/virtualbox-no-bootable-medium-found/virtualbox-no-bootable-medium-found-1.png');
    background-size: cover;
    padding: 40px;
    color: white;
    border: 3px solid #5e587f;
    float: left;
    margin-top: 20px;
}

/* === PET AREA === */
#pets {
    width: 200px;
    height: 200px;
    float: left;
    margin-top: 40px;
}

/* === UPDATES BOX === */
#updates {
    width: 150px;
    height: 300px;
    float: right;
    margin-top: 40px;
    background: #a5bfe4;
    overflow-y: scroll;
    padding: 10px;
    border: 3px solid #5e587f;
}

/* === BOTTOM MARQUEE === */
#bottommarquee {
    clear: both;
    margin-top: 40px;
    background: #0c6378;
    padding: 5px;
}