html {
    background: url(images/indexbg2.png);
}

.container {
    max-width: 800px;
    margin: 50px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 250px minmax(0, 1fr);
}

<! main, footer {
    
    border: black 2px solid;
    
}

header {
   border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAmtJREFUeF7tnUtyxCAMBT3L3P+wWU7WhpS7XkngcdLZSjCieZIw88nr/X28j+Dv9XW8Avc/7zryewm0tucCrfGbRgt0NVCa35JwTWhSqECJgEBrhMLRKjQERu4x0HRC8n/6OZZ6SvmQTi8wAhYoSE6gZ0AqlGrUYCcBlYFSPBTA00rC1ISGuw2BkiJAoWNPEKhAQwLN7ren/LietKbeXWMp3u0pL9DmFBGoQE8EHpfy9ChKC1pdY6kJTa+/WJDT9GmAAg2f/VVoUdIqtBlgd83rLgk0H2XU7Y+eFCDtJwFIN5Dmo3gFml7PwSdnBPp0oJQylOKpnVKY5kvj3a7QNEBaMNkFSoRCu0BDYOT+eKC0gN0pXwWextteQwVKWxjaBRoCI3eBEqHQnl5+hNO3u3fHu7yGpkW9nVjzdSLFJ9DhWzBVAQj004D+9ybU/p6SQM9IyykvUIFefhXz9qbUfY6jY0nVvjre9pSv7nAVGI0XKBEK7QINgZH7xwG1q19vWVxDBSrQpcek8pOSCt2sUGoKu49Vq5vQcoUKlAgMdkp5mk6FCpQ0crLjsYkUSYqj8VMNKv4uFL0exRvR+8VZoFWCw3iBCvSawONSvrsGEYC0xu4+d8bn0NUBCrTYhccdFahAL4v41OVJMd01lJosxUPjd8crUNqR0C7QEBi5C5QIhXYEursGhfEfaY1dvR6BpjsI/gIV6JnAx6U8BbS65jQLZJqO1pfeFVC8+Dv2AiWEZ7tAxwvi4qO1QFcDfXqKZwl6tJ9jJ4UK9HpLiI9Am/9bj0AFmlbJmn98jl39nlFtOfePFmjzHgj0ZqA/aaMnw/l+3ZQAAAAASUVORK5CYII=') 28 /  28px / 0 round;
    border-width:  5px;
    border-style:  solid; 
    
    font-family: "jinxedwizards";
    letter-spacing: normal;
    
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}

nav {
    font-family: pictochat;
    letter-spacing: normal;
    line-height: 14px;
    
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
    
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA3ElEQVRYR+2Y6wqAIAyF9f0fuhsJNnRzYnPKCfpTlodvN7cYQjiu2/0VVxR6i86vRDo9n0o+J7qcUGuS1GJFC5aILic0+auVj7L7cETdC63l1L+ivttH3Qt1XZ22qEySC9AC0WoR6uvSf571XGWCUEIARGmJbfXNtA4+SomBaMWHkJ6k4EIwIZheAqhMyKPIo1LC5Ahl79TB1LmvzWdb90w2CMnctqdnciNUe2gYLbw4pNPMnkYLau1yq+fRWUTZcacnomqhViamXSk71fMQ9TWSH+FLJnxrk6v2OwFcO4wBZR+gbgAAAABJRU5ErkJggg==') 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid; 
    background: url(images/dsbg.jpg) ;
}


main {
    font-family: pictochat;
    letter-spacing: normal;
    line-height: 14px;
    right: em;
    
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    height: max-content;
    
    border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAA3ElEQVRYR+2Y6wqAIAyF9f0fuhsJNnRzYnPKCfpTlodvN7cYQjiu2/0VVxR6i86vRDo9n0o+J7qcUGuS1GJFC5aILic0+auVj7L7cETdC63l1L+ivttH3Qt1XZ22qEySC9AC0WoR6uvSf571XGWCUEIARGmJbfXNtA4+SomBaMWHkJ6k4EIwIZheAqhMyKPIo1LC5Ahl79TB1LmvzWdb90w2CMnctqdnciNUe2gYLbw4pNPMnkYLau1yq+fRWUTZcacnomqhViamXSk71fMQ9TWSH+FLJnxrk6v2OwFcO4wBZR+gbgAAAABJRU5ErkJggg==') 14 /  14px / 0 round;
    border-width:  14px;
    border-style:  solid; 
    background: url(images/dsbg.jpg) ;
    
}

footer {
    font-family: pictochat;
    letter-spacing: normal;
    
    grid-row: 3 / 4;
    grid-column: 1 / 3;
}

@font-face{
        font-family: pictochat;
        src: url(/fonts/pictochat.otf.woff2);
    }

@font-face{
    font-family: jinxedwizards;
        src: url(/fonts/jinxedwizards.woff);
}

 .zonk
    {
        width: 150px;
        height: 150px;
        background-image:url("images/zonk.png");
        background-size:cover;
        position: relative;
        float: left;
    }

.waterdivider
    {
    width: 475px;
        height: 20px;
        background-image:url("images/waterdivider.gif");
        background-size:cover;
        position: relative;
        float: bottom;
    }