@import 'https://fonts.googleapis.com/css?family=Kanit|Prompt';
article 
{
    margin-top:70px;
    font-family: 'Kanit', Sans-Serif;
    font-size:larger;
    }
* {
  box-sizing: border-box;
}
h1
{
    color: #BF61A5;
    font-family: 'Prompt', Sans-Serif;
    text-align:center;
    font-size:30px;
}
h2
{
    color: #BF61A5;
    font-family: 'Prompt', Sans-Serif;
    text-align:center;
    font-size:25px;
}

content
{
    font-family: 'Prompt', Sans-Serif;
    font-size:18px;
}
img
{
    max-width:100%;
    height:auto;
}
.buttom {
       font-family: 'Prompt', Sans-Serif;
       clear:both;
    }
.clear
{
    clear:left;
}
.middle
{
    float:left;
    padding:0 0 0 15%;
    width:100%;
    font-weight:bold;
} 
.middle li
{
    padding:0 0 0 30px;
    font-weight:normal;
}   
.highlight
{
    padding:0 0 0 0;
    width:100%;
    font-weight:bold;
    color:Red;
    text-align:center;
} 
.left 
{
    float:left;
    padding:0 0 0 15%;
    width:40%;
    font-weight:bold;
}
.right {
    float:left;
    width:60%;
    text-align:left;
}

@media screen and (max-width:1200px) {
  /* For mobile phones: */
   .left
    {
        margin-top:0px;
        padding:0 0 0 10%;
         width:35%;
         font-weight:bold;
  }
   .right 
    {
        margin-top:0px;
        padding:0 0 0 30px;
         width:65%;
  }
  .middle
{
    float:left;
    padding:0 0 0 10%;
    width:100%;
    font-weight:bold;
}    
  h1
{
    color: #BF61A5;
    font-family: 'Prompt', Sans-Serif;
    text-align:center;
    font-size:25px;
}
h2
{
    color: #BF61A5;
    font-family: 'Prompt', Sans-Serif;
    text-align:center;
    font-size:20px;
}
}

@media screen and (max-width:768px) {
  /* For mobile phones: */
   .left
    {
        margin-top:0px;
        padding:0 0 0 20px;
         width:100%;
         font-weight:bold;
  }
   .right 
    {
        margin-top:0px;
        padding:0 0 0 30px;
         width:100%;
  }
 .middle
{
    float:left;
    padding:0 0 0 20px;
    width:100%;
    font-weight:bold;
}    
}