body{
    background-color: white;
    color: black;
    font-size: 2em;
    font-family: "Kanit", sans-serif;
}
.pic{
    float: right;
    margin-top: 50px;
}
.pic a{
    display: inline-flex;
    padding: 0%;
    margin-right: 2px   ;
}
svg{
    stroke: black;
}
.List{
    list-style-type: none;
    margin-top: 80px;
    margin-left: 300px;
    padding: 0;
    width: 190px; 
}
ul{
    list-style-type: none;
    margin-top: 80px;
    margin-left: 100px;
    padding: 0;
}
li a{
    display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  border-right: solid 2px #c6c6c6;
}
  li a:hover:not(.active) {
    background-color: black;
    color: silver;
  }
.Text1{
    margin-left: 100px;
    margin-top: 80px;
}
.Text2{
    background: -webkit-linear-gradient(#c14dc7, #cef009);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.Current a{
    color: #c14dc7;
    border-right: solid 2px #c14dc7;
}
.name{
    font-family: "Kanit", sans-serif;
    padding: 0;
    margin-top: 50px;
    margin-left: 100px;
}
.br { 
    display: block; 
    margin-top: 1em; 
} 
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 0.5px solid #ccccccde;
    margin: 0px;
    padding: 0;
}
div{
    display: inline-flex;
    padding: 0%;
}
hr.dashed {
    border-top: 1px dashed #bbb;
    margin-bottom: 5px;
  }