body {
    background-image: url(https://celoscorner.neocities.org/pictures/lined%20paper.jpg);
    background-color: whitesmoke;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

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


header {
    height: 65px;
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    text-align: center;


        color: #602800;
        background: #f8e0a8;
        padding: 12px;
        background-clip: padding-box;
        border-image-slice: 14 16;
        border-image-width: 14px 16px;
        border-image-repeat: stretch;
        border-style: solid;
        border-color: transparent;
        image-rendering: pixelated;
        border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAeCAMAAAB+ITwmAAAAGFBMVEUAAACgUCj48KD4wJjooIhgKAD4+PjQaEhBMvh2AAAAAXRSTlMAQObYZgAAALVJREFUeNqN0lGO4CAMg2Ecx8v9b7wlyMpIAyP+N6qvLQBjhWvDIYKHItCEeYxocSPbAFeREgEMBCn5ISABPSIDNQ8/FP5VUFaMTG7CWOMFRrUQC5lU1AZGNk2oAp2NicXBNMFvgib+yPEzTXAiaGJxNO/k/qP36d4X/bB1jwfwfozSn5dB6StF9pXiEvsyamjOzPB13hezwH5zzo9In3GsPIicksZXmWNTo7K5CJNzP8mtIv8BqmUKm3X7XPgAAAAASUVORK5CYII=");

}

nav {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    border: black 2px solid;
    height: max-content;

      color: #602800;
  background: #f8e0a8;
  padding: 12px;
  background-clip: padding-box;
  border-image-slice: 14 16;
  border-image-width: 14px 16px;
  border-image-repeat: stretch;
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAeCAMAAAB+ITwmAAAAGFBMVEUAAACgUCj48KD4wJjooIhgKAD4+PjQaEhBMvh2AAAAAXRSTlMAQObYZgAAALVJREFUeNqN0lGO4CAMg2Ecx8v9b7wlyMpIAyP+N6qvLQBjhWvDIYKHItCEeYxocSPbAFeREgEMBCn5ISABPSIDNQ8/FP5VUFaMTG7CWOMFRrUQC5lU1AZGNk2oAp2NicXBNMFvgib+yPEzTXAiaGJxNO/k/qP36d4X/bB1jwfwfozSn5dB6StF9pXiEvsyamjOzPB13hezwH5zzo9In3GsPIicksZXmWNTo7K5CJNzP8mtIv8BqmUKm3X7XPgAAAAASUVORK5CYII=");
}

main {
        grid-row: 2 / 3 ;
        grid-column: 2 / 3;
        border: black 2px solid;
        height: max-content;

    color: #602800;
  background: #f8e0a8;
  padding: 12px;
  background-clip: padding-box;
  border-image-slice: 14 16;
  border-image-width: 14px 16px;
  border-image-repeat: stretch;
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAeCAMAAAB+ITwmAAAAGFBMVEUAAACgUCj48KD4wJjooIhgKAD4+PjQaEhBMvh2AAAAAXRSTlMAQObYZgAAALVJREFUeNqN0lGO4CAMg2Ecx8v9b7wlyMpIAyP+N6qvLQBjhWvDIYKHItCEeYxocSPbAFeREgEMBCn5ISABPSIDNQ8/FP5VUFaMTG7CWOMFRrUQC5lU1AZGNk2oAp2NicXBNMFvgib+yPEzTXAiaGJxNO/k/qP36d4X/bB1jwfwfozSn5dB6StF9pXiEvsyamjOzPB13hezwH5zzo9In3GsPIicksZXmWNTo7K5CJNzP8mtIv8BqmUKm3X7XPgAAAAASUVORK5CYII=");
}

footer{ 
        grid-row: 3 / 4;
        grid-column: 1 / 3;
            border: black 2px solid;

        color: #602800;
  background: #f8e0a8;
  padding: 12px;
  background-clip: padding-box;
  border-image-slice: 14 16;
  border-image-width: 14px 16px;
  border-image-repeat: stretch;
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAeCAMAAAB+ITwmAAAAGFBMVEUAAACgUCj48KD4wJjooIhgKAD4+PjQaEhBMvh2AAAAAXRSTlMAQObYZgAAALVJREFUeNqN0lGO4CAMg2Ecx8v9b7wlyMpIAyP+N6qvLQBjhWvDIYKHItCEeYxocSPbAFeREgEMBCn5ISABPSIDNQ8/FP5VUFaMTG7CWOMFRrUQC5lU1AZGNk2oAp2NicXBNMFvgib+yPEzTXAiaGJxNO/k/qP36d4X/bB1jwfwfozSn5dB6StF9pXiEvsyamjOzPB13hezwH5zzo9In3GsPIicksZXmWNTo7K5CJNzP8mtIv8BqmUKm3X7XPgAAAAASUVORK5CYII=");
}