body {
  margin: 40px;
  font-family: 'Encode Sans Expanded', sans-serif;
  font-size: 14px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
  position: relative;
  display: grid;
  grid-gap: 10px;
  justify-items: stretch;
}

.header {
  grid-area: header;
  align-self: end;
}

.logo {
  grid-area: logo;
}

.footer {
  grid-area: footer;
}

.empty {
  grid-area: empty;
}

/* colors used */ 
/* #555E7B, #B7D968, #B576AD, #E04644, #FDE47F, #7CCCE5 */

@media (max-width: 900px) { 
  body {
    background-color: rgba(181, 118, 173, 0.3);
    transition: background-color 2s ease;
  }
  
  .wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "header"
      "content"
      "sidebar"
      "footer";
    color: #444;
    justify-content: center;	
  }

  .header::after {
    content: "Small Device Size";
  }

  .empty {
    display: none;
  }

  .col-3 {
    display: none;
  }

  .col-4 {
    display: none;
  }
}

@media (min-width: 901px) and (max-width: 1300px) { 
  body {
    background-color: rgba(253, 228, 127, 0.3);
    transition: background-color 2s ease;
  }
  
  .wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 200px 400px 200px;
    grid-template-areas:
        "logo header header"
        "sidebar content content"
        "footer footer footer";
    color: #444;
    justify-content: center;	
  }

  .header::after {
    content: "Medium Device Size";
  }

  .empty {
    display: none;
  }

  .col-1 {
    display: none;
  }

  .col-4 {
    display: none;
  }
}

@media (min-width: 1301px){ 
  body {
    background-color: rgba(124, 204, 229, 0.3);
    transition: background-color 2s ease;
  }
  
  .wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 200px 400px 400px 200px;
    grid-template-areas:
        "logo header header empty"
        "sidebar content content empty"
        "footer footer footer empty";
    color: #444;
    justify-content: center;	
  }

  .header::after {
    content: "Large Device Size";
  }

  .col-1 {
    display: none;
  }
}

.grid-box {
  border-style: dashed;
  border-color: #E04644;
  border-width: 1px;
  z-index: 5;
  position: relative;
  border-radius: 5px;
  min-height: 100px;
}

.box {
  background-color: #555E7B;
  color: #B7D968;
  border-radius: 5px;
  padding: 50px;
  font-size: 150%;
  z-index: 10;
  margin: 1px;
}

.box:hover {
  background-color: rgba(85, 94, 123, 0.8);
}

.light-box {
  background-color: #B7D968;
  color: #555E7B;
  border-radius: 5px;
  padding: 50px;
}

.light-box:hover {
  background-color: rgba(183, 217, 104, 0.8);
}

.header,
.footer {
  background-color: #B7D968;
  color: #555E7B;
}

/* css properties control box */ 

.control-box {
  position: fixed;
  bottom: 50px;
  right: 10px;
  z-index: 100;
}

.control-box > div {
  background-color: rgba(124, 204, 229, 0.7);;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}