@font-face {
  font-family: "Sarabun";
  src: url(../../../../../fonts/Sarabun/Sarabun-Regular.ttf);
}
@font-face {
  font-family: "Kanit";
  src: url(../../../../../fonts/Kanit/Kanit-Regular.ttf);
}
@font-face {
  font-family: "Prompt";
  src: url(../../../../../fonts/Prompt/Prompt-Regular.ttf);
}
@font-face {
  font-family: "PlexSans";
  src: url(../../../../../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Medium.ttf);
}
@font-face {
  font-family: "NotoSansThai";
  src: url(../../../../../fonts/NotoSansThai/NotoSansThai-Regular.ttf);
}
@font-face {
  font-family: "Fraunces";
  src: url(../../../../../fonts/Fraunces_72pt/Fraunces_72pt-Regular.ttf);
}
:root {
  font-family: Sarabun;
  font-weight: normal;
  font-size: 16px;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*, *:before, *:after {
  margin: 0;
  padding: 0;
}

body {
  padding: 0rem 0rem 2rem 0rem;
  overflow-x: clip;
}

img {
  display: block;
}

div.fwi {
  display: inline-block;
  margin-bottom: 2rem;
}

img.cover {
  height: auto;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

img.profilePic {
  position: absolute;
  width: 25%;
  border: 5px solid white;
  border-radius: 100%;
  right: 0;
  -webkit-transform: translate(-30%, -70%);
          transform: translate(-30%, -70%);
}

div.paraDiv {
  padding: 1rem 2rem 0rem 2rem;
}

h1, h2, h3 {
  font-family: helvetica, arial, sans-serif;
  color: hsl(175, 100%, 25%);
}

h1 {
  font-size: 2rem;
  margin: 0rem 33% 1rem 0rem;
}

p {
  font-size: 1.75rem;
  color: hsl(223, 12%, 27%);
}

@media (min-width: 1024px) {
  #hwDiv {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem;
  }
}
@media (min-width: 1900px) {
  #hwDiv {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
    padding: 2rem;
  }
}