<style>
/* fonts go here */  
    @font-face{
        font-family: porky's;
    }
    
    @font-face{
        font-family: rainyhearts;
    }
/* main container elements */    
    body{
        background: url('images/bg.png'); 
        background-size: cover;
        background-repeat: repeat-y;
    }
        
    #container{
        width: 800px;
        margin: 120px auto; 
        font-size: 1rem;
        font-family: serif;
    }
    
    .misc{ /*hey if you want the margins to look different mess with the padding. :P */
        grid-area: misc;
        padding: 10px;
        border: 10px solid white;
            border-bottom-left-radius: 25px;
        overflow:auto;
        background: white;
    }
    
    .directory{
        grid-area: directory;
        border: 10px solid white;
            border-top-left-radius: 25px;
        font-size: 20px;
        background: white;
    }
        .header{
            text-align: center; 
            padding: 10px; 
            background: linear-gradient(to bottom, #f5f5f5, #FF69B4); 
            font-family: porkys; 
                font-size: 20px;
                letter-spacing: 2px;
            border: 1px ;
    }
        .link{
            text-align: left;
            padding: 3px;
                padding-left: 15px; 
            background: linear-gradient(to bottom, #f5f5f5, #FF69B4);
            border: 1px solid #c4dca4;
            height: 20px;
            font-size: 18px;
    }
    
    main{
        grid-area: main;
        padding: 20px;
        border: 1px dashed #f7f7ec;
        display: grid;
            grid-template-columns: 200px 1fr;
            grid-template-rows: 150px 50px 1fr;
            grid-template-areas: 'picture statuscafe'
                                 'picture buttons' 
                                 'sidebar content';
        background: white;
    }
    
/* "main" elements */    
    
    .picture{
        grid-area: picture;
        background-image: url('images/3dscartridge.jpg');
        background-size: cover;
    }
    .statuscafe{
        grid-area: statuscafe;
        background-image: url('images/speechbubble.gif');
        background-size: 100% 100%;
        display: grid;
            grid-template-columns: 300px 250px;
            grid-template-areas: 'status update';
    }
        .updates{
            grid-area: update;
            border: 1px solid #c4dca4;
            width: 210px;
            margin: 0 auto;
            height: 155px;
        }
    
    .buttons{
        grid-area: buttons;
        padding: 15px;
    }
    .sidebar{
        grid-area: sidebar; /* #e6f6c5*/
            background-color: #FF6EC7;
            background: linear-gradient(to top right, #FF6EC7, #f5f5f5);
        border-radius: 10px;
            border: 1px dashed #f7f7ec;
        padding: 20px;
    }
    .content{
        grid-area: content;
        padding: 5px;
        margin-left: 20px;
    }

/* purely aesthetic-based things */
    a{text-decoration: none; color: black;}
    a:hover{font-style: italic;}
    
    li{list-style-image: url('images/s13.gif'); padding: 5px; margin-left: 20px;}
    
    .scrollbar-hide{
        -ms-overflow-style: none; 
        scrollbar-width: none;
    }
.chatbox {
	width: 225px;
	height: 425px;
	position: absolute;
	right: 20px;
	top: 120px;
}
</style>