html {
  background-image: url('/img/background.webp');
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  background-image: url('/img/blog_background.png');
  height: 70vh;
  width: 70vw;
  margin: 0;
  display: grid;
  grid-template-areas:
    ". header header header header"
    "nav nav main main ."
    ". footer footer footer footer";
  grid-template-columns: 0.5fr 0.5fr 2fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  border-width: 7px;
  border-style: solid;
  border-image: url("https://file.garden/ZZ2PUl9MPilKgIvB/collection/borders/xnxzti-1.png") 8 fill round;
       
}

body header {
  grid-area: header;
  text-align: center;
  background-color: red;
}

body nav {
  grid-area: nav;
  background-color: purple;
}

body main {
  grid-area: main;
  background-color: blue;
}

body footer {
  grid-area: footer;
  text-align: center;
  background-color: green;
}