.main{
height: 100vh;
  border:2px solid #2f2f2f;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.header{
  background-color:#000088;
color:#fff;
  text-align:center;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:5%;
position:fixed;
  top:0;
  overflow:hidden;
    width:82%;
}

.left{
  background-color:#F55353;
    height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left: 5px;
padding-right: 0px;
  border:5px solid #fff;
  z-index: -1;
  box-shadow:1px 5px 20px #00000050;
  margin-right: 5px;
  left:0;
}

.middle{
  background-color:#FFF;
  height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  border:5px solid #fff;
  padding-right: 0px;
  padding-right: -20px;
  margin-right: -25px;
  border-right-width: 20px;
  box-shadow:1px 5px 20px #00000050;
}

.right{
 background-color:#EEEEEE;
 height:80vh;
  display:flex;
  align-items:left;
  justify-content:left;
  border:5px solid #fff;
  z-index: -1;
  box-shadow:1px 5px 20px #00000050;
  margin-left:5px;
}

.footer{
  margin-top:5%;
  background-color:#000088;
  color:#fff;
  text-align:center;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  bottom:0;
  width:82%;
}

.row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-direction:row;
  width:100%;
}

/*media for responsive*/
@media and screen (max-width:650px){
  .main{
    display:flex;
    flex-direction:column;
  }
  .row{
    display:flex;
    align-items:center;
    justify-content:center;
  }
}