/* Just ordinary style to make our elements visible */

*{
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

:root{
  --footer_height: 20px;
}


.wrapper{
  font-weight: bold;
  text-align: center;
}

.wrapper *{
  padding: 10px;
}

.header{
  background-color: tomato;
}

.footer{
  background-color: lightgreen;
}

.main{
  background-color: deepskyblue;
  text-align: left;
}

.aside-1{
  background-color: gold;
}

.aside-2{
  background-color: hotpink;
}

.header, .footer{
  height: var(--footer_height);
}
.main{
  min-height: calc(100vh - 180px);
}
/* media query to posutuon our elements for medium-size devices */

@media all and (min-width: 600px){
  .wrapper{
    display: flex;  /*define our container as a flex box. So, all elements inside of it will be flex-items*/
    flex-wrap: wrap; /*allow to create many rows inside container. By default all elements inside container will be placed in ONE row only*/
  }
  .aside-1, .aside-2{
    flex: 1;  /*each element will take 1 fraction of a row. So, in case of medium size screen there will be two elements in the row and they will take 50% each.*/
  }
  .header, .footer{
    flex:1 100%; /*enables these elements to take entire 1 row*/
  }
.main{
  min-height: calc(100vh - 140px);
}

}

/* media query to posutuon our elements for large-size devices */

@media all and (max-width: 799px){
  .aside-1, .aside-2{
    height: 20px;
  }
}

@media all and (min-width: 800px){
  .main{
    flex: 3; /*define that this element will take 3 fraction of a row. In case of large screen in the row will be 3 elements: .aside-1, .aside-2 and .main. Both asides will take 1 fraction of the row (we defined it in previous nedia query and it will be also applied) and main will take 3 fraction. So, there will be 5 fractions in the row. Asaides will take 1 fraction or 20% of the width each and main will take 60% of the width*/
    min-height: calc(100vh - 100px);
  }

  /*change the order*/
  .aside-1{
    order: 1;
  }
  .main{
    order: 2;
  }
  .aside-2{
    order: 3;
  }
  .footer{
    order: 4;
  }

}