*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: montserrat;
}
body { 
 background-color: 	#9370DB;
}
container{
background: purple;
max-width: 800px;
margin: 60px auto;
height: 1250px; 
padding: 20px;
box-shadow:  20px 20px rgba(0,0,0,0.3);
}
.header{
text-align: center;
}
.header h1{
margin-bottom: 10px;
color: black;
}
.header h3{
     position: relative;
  left: 30px;
text-transform: uppercase;
font-size: 15px;
font-weight: 500;
color: #2F4F4F;
}
.img-area{
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 25px auto;
border: 15px groove	darkolivegreen;
}
.img-area img{
 width: 100%;
}
.main{
display: flex;
flex-wrap: wrap;
}
.left{
flex: 1;
padding: 30px;
}
.left p{
     position: relative;
  left: 30px;
line-height: 2;
}
.left ul li {
     position: relative;
  left: 30px;
line-height: 2;
}
h2{
background:#00BFFF;
padding: 15px;
color: black;
margin: 30px 0;
font-size: 20px;
border-radius: 50px 50px;
}
.right{
flex: 1;
padding: 30px;
}
.right h3{
     position: relative;
  left: 30px;
margin-bottom: 15px;
}
.right p{
     position: relative;
  left: 30px;
line-height: 2.9;
}

.right ul li {
     position: relative;
  left: 30px;
line-height: 2;
}
@media only screen and (min-width: 768px) and (max-width:991px){ .container{
width: 95%;
height: auto;
}
h2{
font-size: 18px;
}
}
@media screen and (max-width: 600px) {
.main{
flex-direction: column;
}
.left,
.right{
flex: none;
width: 100%;
.container{
width: 95%;
height: auto;
}
h2 {
font-size: 15px;
}
}