body {

  font-family:georgia;
  font-size:18px;
}
    
    #container{
        width:875px;
        margin:15px 0 15px 0;
        position:absolute;
        left: 50%;
        transform: translateX(-50%);
    }     
    
    #header{
        height:175px;
        border:1px solid pink;
        margin:0 0 10px 0;
        
    }
    
    #header_img{
        /* "100%" specifies that the image will be as big as possible without overflowing outside the element. */
        width:100%;
        height:100%;
        /* background:position makes it where you can easily adjust the position of your header. the "50%" represents horizontal, and the "30%" represents vertical.  */
        object-fit: fill;
        background-position: 50% 30%; 
        background-image: url('<"https://64.media.tumblr.com/bf9f5a8a71772e77ac63974db076e8b4/b46b01ec0e969812-0e/s540x810/111cb5e920ed98067728bcf2d20bd84188451aea.pnj"/>');
    }    
    
    #links{
        border:1px solid pink;
        margin:0 0 10px 0;
        text-align:center;
        background:white;
        padding:5px;
    }


    /******************************
    
                CONTENT
    
    ******************************/  
    
    #content{
        border:1px solid pink;
        background:white;
        padding:10px;
        margin:0 0 10px 0;
        /* if you want the content to get taller endlessly, leave it as is. But if you want it to remain a specific height and start scrolling, include these properties outisde of this grey area:
        max-height:250px (can be changed to whatever number you like); 
        overflow-y:auto; */
    }
    
    #footer{
        border:1px solid pink;
        background:white;
        text-align:center;
        padding:5px;
    }