body {
  background-image: url(https://i.pinimg.com/1200x/be/7a/85/be7a857d1e9033ab115b1a83908318f6.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  margin: 100px;
  padding: 90px;
  letter-spacing: 1px;
}

div {
  display: block;
  unicode-bidi: isolate;
}

/* grid layout */
.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
    border-color: gray;
    min-height: 0;
    min-width: 0;
    margin: 3px;
}
    
.header {
    grid-column: span 5 / span 5;
  background-color: lightgreen;
  border-radius: 5px;
}

.aside1 {
    grid-row: span 2 / span 2;
    grid-row-start: 2;
    background-color: lightblue;
    border-radius: 5px; 
}

.aside2 {
    grid-column-start: 1;
    grid-row-start: 4;
    background-color: lightyellow;
    border-radius: 5px;
}

.main {
    grid-column: span 3 / span 3;
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 2;
    background-color: lightpink;
    border-radius: 5px;
}

.right {
    grid-row: span 3 / span 3;
    grid-column-start: 5;
    grid-row-start: 2;
    background-color: #CBC3E3;
    border-radius: 5px;
}

.footer {
    grid-column: span 5 / span 5;
    grid-row-start: 5;
    background-color: lightgreen;
    border-radius: 5px;
}
        
/* containers for grid sections */
#navigation {
  position: absolute;
  height: 50px;
  padding: 5px;
}