body {
  background-image: url('https://hillhouse.neocities.org/materials/backgrounds/images/fabric-heartsplaid.png');
cursor: url(https://cur.cursors-4u.net/nature/nat-9/nat839.cur), auto !important;
    font-size: 16px;
}

p { font-family: Courier New; }


.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.centre2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Link colours 
 unvisited link */
a:link {
  color: #d010109c;
}

/* visited link */
a:visited {
  color: #41933b9c;
}

/* mouse over link */
a:hover {
  color: #d0101058;
}

/* selected link */
a:active {
  color: brown;
}
/*to target the <div> in the html by class name we put a fullstop before the name. ie box becomes .box*/
.box {
    max-width: 1000px; /* finish off each bit with a semi-colon*/
    margin:100px auto;
    display: grid;
    grid-gap: 10px; /* puts space between each content area*/
    grid-template-columns: 250px minmax(0,1fr);
}
header, nav, main, footer {

    
    
border-width:7px;
border-style:solid;
border-image: url("https://static.tumblr.com/yn7vk7p/DfHmp40xm/bo-ha26.gif") 8 fill round;
    
} /* this tells each of this named areas the border colour, thickness, and line style.
* Simple version code here, after curly bracket {
   * border: brown 2px dashed;
   * */



      


header {
    grid-row: 1 / 2 ;
    grid-column: 1 / 3 ;
     text-align: center;
    border: 0px
}
nav {
    grid-row: 2 / 3 ;
    grid-column: 1 / 2 ;
    height: max-content; /* prevents from box growing past content size*/
    
}

main {
    grid-row: 2 / 3 ;
    grid-column: 2 / 3 ;
    height: max-content;
    
}

footer {
    grid-row: 3 / 4 ;
    grid-column: 1 / 3 ;
    text-align: center;
}