body {
   background-image: url("../assets/base/bg1.png");
                background-size: 37%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: mediumpurple
}

#content {
 margin-left: auto;
 margin-right: auto;
 width: 80%;
 background-color: #fff5f7;
  box-sizing: border-box;
  display: block;
  padding: 5px;
  border: 20px solid pink;
  background-clip: padding-box;
                border-image-repeat: round round;
                border-image: url("../assets/base/border.png") 23 round;
}

/* grid-area: rowstart / column start / rowend /column end */
 
#content-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 200px 100px 100px 100px 200px 300px;
  column-gap: 5px;
  grid-row-gap: 5px;
  border-width: 5px;
}

#main-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: .6fr .6fr .6fr;
  column-gap: 5px;
  grid-row-gap: 5px;
  border-width: 0px;
  padding: 5px;
}

#big-main-grid {
  grid-template-columns: (1, 4fr);
  grid-template-rows: 2.5fr;
  display: grid;
  border-width: 0px;
  padding: 5px;
}


#header {
background-color: #fff5f7;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                border-image: url(.png) 30 round;
}

#nav {
  grid-area: 1 / 1 / 6 / 2;
}

#main {
  grid-area: 1 / 2 / 7 / 6;

}

#leftbox {
  grid-area: 6 / 1 / 7 / 2;
}

#footer {
background-color: #fff5f7;
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                border-image: url(.png) 30 round;
                grid-area: 7 / 1 / 8 / 6;
}

.box {
border-color: pink;
border-style: solid;
border-width: 10px;
background-color: #fff5f7;
overflow: auto;
padding: 5px;
border-image-repeat: round round;
border-image: url("../assets/base/small-border.png") 10 round;
scrollbar-width: thin;
scrollbar-color: #fa9dd3 #fac5e4;
}

.divider {
display: block;
margin:auto;
}