*
{
    font-family: "Kanit", serif;
    
    font-style: normal;
   
}
main{
    width:87%;
    margin-left: auto;
    margin-right: auto;
}

.intro .base
{
    /* word-spacing: 1px; */
    /* line-height: 1.6em; */
    text-align: left;
    /* margin-right: 50px; */
    /* margin-left: 30px; */
    font-size: 18px ;
    font-weight: 300;
    color: grey;
}
.intro h1
{
    /* margin-left: 30px; */
    margin-bottom: 20px;
    color: black;

}
article p{
    text-align: justify;

}
p{
    font-size:18px;
}
.container
{

    width: 40%;
    /* max-width: 410px; */
    /* min-height: 900px; */
    background: whitesmoke;
    margin-left: 20px;
    /* margin-right: 20px; */
    /* display: grid; */
   padding:10px;
    /* float: right; */
    border-radius: 8px;
}
#content{
    display:flex;
    flex-direction:row;
    padding:10px;
    margin-top:10px;
    margin-bottom:10px;
    justify-content: space-evenly;
    /* margin-left: auto; */
    /* margin-right: auto; */
}
.container ul{
    padding-left:5px;
    padding-right:5px;
}
.container ul li{
    font-size:16px;
    color:gray;
}
#padding
{
    padding: 1vh;
}

.leftside
{
    margin-top: 20px;
    font-weight: 300;
    /* word-spacing: 1px; */
    /* line-height: 1.6em; */
    /* margin-left: 30px; */
    font-size: 18px ;
    /* margin-bottom: 200px; */
    margin-right: 30px;    
    color: grey;
    width:60%;
    margin-left: 0px;
    padding-left: 0px;
    text-align: justify;
}
h6
{
    color: #333333  ;
    font-size: 25px ;
    margin-top: 10px;
}

.container .rightside
{
    margin: 15px;
    font-weight: 3000;
    color: grey;
    line-height: 1.6em;
    font-size: 18px ;
    margin-bottom: 20px;
    
    
}

.downbox
{
    float: bottom;
    background: rgb(241, 243, 245);
    border-radius: 8px;
    width: 1000x;
    min-height: 490px;
    
    margin-left: 30px;
    margin-right: 30px;
    
}

.downbox .left
{
    color: grey;
    width: 40%;
    height: 200px;
    margin-top: 60px;
    /* margin-left: 30px; */
    /* margin-right: 50%; */
    grid-template-columns: 1fr 2fr;
    font-weight: 300;
    margin-top: 40px;
    float: left;
    margin-left: 50px;
    line-height: 1.6em;
}
.downbox h4
{
    font-size: 18px ;
    font-weight: 500;
    margin-bottom: 10px;
    
    color: black;
    line-height: 1.6em;
    word-spacing: 1px;
}
.downbox .right
{
    color: grey;
    width: 40%;
    height: 200px;
    /* margin-left: 30px; */
    /* margin-left: 50%; */
   float: right;
    font-weight: 300;
    word-spacing: 2px;
    line-height: 1.6em; 
  margin-right: 50px;
    margin-top: 40px;
}

#linkSection #linkNav a{
    text-decoration: none;
    font-family: "Kanit", serif;
    color:white;
    background-color:#444444;
    padding:8px;
    font-size:  16px;
    border-radius:8px;
    margin:5px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 5px 5px 5px #888888;
}
#linkSection #linkNav {
    /* float:right; */
    padding-right:40px;
    margin-top:10px;
    margin-bottom:10px;
}
#linkSection{
    width:100%;
    height:60px;
    text-align:right;
    align-items:center;
    justify-content:center;
    /* padding:20px */
}

@media(max-width:850px){
    *
{
    font-family: "Kanit", serif;
    
    font-style: normal;
   
}
main{
    width:87%;
    margin-left: auto;
    margin-right: auto;
}

.intro .base
{
    /* word-spacing: 1px; */
    /* line-height: 1.6em; */
    text-align: left;
    /* margin-right: 50px; */
    /* margin-left: 30px; */
    font-size: 18px ;
    font-weight: 300;
    color: grey;
}
.intro h1
{
    /* margin-left: 30px; */
    margin-bottom: 20px;
    color: black;

}
article p{
    text-align: justify;

}
p{
    font-size:18px;
}
.container
{

    width: 100%;
    /* max-width: 410px; */
    /* min-height: 900px; */
    background: whitesmoke;
    margin-left: 00px;
    /* margin-right: 20px; */
    /* display: grid; */
   padding:10px;
   padding-left: 30px;
   margin-top: 25px;
    /* float: right; */
    border-radius: 8px;
}
#content{
    display:flex;
    flex-direction:column;
    padding:5px;
    margin-top:10px;
    margin-bottom:10px;
    justify-content: space-evenly;
    width: 100%;
    /* margin-left: auto; */
    /* margin-right: auto; */
}
.container ul{
    padding-left:5px;
    padding-right:5px;
}
.container ul li{
    font-size:16px;
    color:gray;
}
#padding
{
    padding: 1vh;
}

.leftside
{
    margin-top: 10px;
    font-weight: 300;
    /* word-spacing: 1px; */
    /* line-height: 1.6em; */
    /* margin-left: 30px; */
    font-size: 18px ;
    /* margin-bottom: 200px; */
    margin-right: 0px;    
    color: grey;
    width:100%;
    margin-left: 0px;
    padding-left: 0px;
    text-align: justify;
}
h6
{
    color: #333333  ;
    font-size: 25px ;
    margin-top: 10px;
}

.container .rightside
{
    margin: 0px;
    font-weight: 500;
    color: grey;
    line-height: 1.6em;
    font-size: 18px ;
    margin-bottom: 0px;
    width: 100%;
    margin-top: 20px;
    
    
}

.downbox
{
    float: bottom;
    background: rgb(241, 243, 245);
    border-radius: 8px;
    width: 1000x;
    min-height: 490px;
    
    margin-left: 30px;
    margin-right: 30px;
    
}

.downbox .left
{
    color: grey;
    width: 40%;
    height: 200px;
    margin-top: 60px;
    /* margin-left: 30px; */
    /* margin-right: 50%; */
    grid-template-columns: 1fr 2fr;
    font-weight: 300;
    margin-top: 40px;
    float: left;
    margin-left: 50px;
    line-height: 1.6em;
}
.downbox h4
{
    font-size: 18px ;
    font-weight: 500;
    margin-bottom: 10px;
    
    color: black;
    line-height: 1.6em;
    word-spacing: 1px;
}
.downbox .right
{
    color: grey;
    width: 40%;
    height: 200px;
    /* margin-left: 30px; */
    /* margin-left: 50%; */
   float: right;
    font-weight: 300;
    word-spacing: 2px;
    line-height: 1.6em; 
  margin-right: 50px;
    margin-top: 40px;
}

#linkSection #linkNav a{
    text-decoration: none;
    font-family: "Kanit", serif;
    color:white;
    background-color:#444444;
    padding:8px;
    font-size:  16px;
    border-radius:8px;
    margin:5px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 5px 5px 5px #888888;
}
#linkSection #linkNav {
    /* float:right; */
    padding-right:40px;
    margin-top:10px;
    margin-bottom:10px;
}
#linkSection{
    width:100%;
    height:60px;
    text-align:right;
    align-items:center;
    justify-content:center;
    /* padding:20px */
}
}