style.css

html, body { width: 100%; height:100%; margin:0px; padding:0px; }

/* scheme start */
.info1 {
    width: 30%;
    height: 50vh;
    background-color: rgb(123, 44, 191);
    float: left;
    border-bottom: 0.1px solid black;
    display: flex;
     flex-direction: column;
   }
.content
{
    width:70%;
     height: 100vh;
    background-color:#3c096c;
    float:right;
    overflow: auto;
}
.info2 {
    width: 30%;
    height: 50vh;
    background-color: #5a189a;
    float: left;
     display: flex;
     overflow:auto;
}
/* scheme end */

.pre-header{
  font-family: 'Arvo', serif;
  text-align:center;
  margin: 40px 5% 0px 0px;
  font-size:28px;

}
.header{
font-family: 'Arvo', serif;
text-align:center;
margin: 40px 5% 0px 0px;
font-size:28px;
}
.headerhr{
  height: 10px;
     background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg width=\'20\' height=\'10\'  viewBox=\'0 0 20 10\' xmlns=\'http://www.w3.org/2000/svg\' fill-rule=\'evenodd\' clip-rule=\'evenodd\' stroke-miterlimit=\'10\'%3e%3cpath fill=\'none\' d=\'M0 0h20v10H0z\'/%3e%3cclipPath id=\'a\'%3e%3cpath d=\'M0 0h20v10H0z\'/%3e%3c/clipPath%3e%3cg clip-path=\'url(%23a)\'%3e%3cpath d=\'M20 7.384c-4.999-.001-5-4.768-9.999-4.768C5 2.616 5 7.384 0 7.384\' fill=\'none\' stroke=\'%23000\'/%3e%3c/g%3e%3c/svg%3e');
    margin: 0;
    margin-top:20px;
    padding: 0;
    border: 0;
}
.bottom-text{
  font-family: 'Open Sans', sans-serif;
  margin: 80px 20px 10px 20px;
  font-size:20px;
  text-align:center;
  position:static;
  word-wrap: break-word;

}

/* left top panel overflow setting*/
main{
  overflow:auto;
}

/*icons*/
img {
    float: left;
    width:  64px;
    height: 64px;
    object-fit: cover;
   white-space: nowrap;

}
.image-container{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:2em;

}
.one, .two{margin-bottom:2.5em;}

#icon{
   cursor: pointer;
}