@font-face {
  font-family: ProximaNova;
  src: url('fonts/ProximaNova-Regular.otf') format('OpenType');
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/kanit/Kanit-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/kanit/Kanit-ExtraLight.ttf') format('truetype');
}
/* kanit-500italic - latin */
@font-face {
  font-family: 'Kanit';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/kanit/Kanit-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/kanit/Kanit-Regular.ttf') format('truetype');
}

body {
  /*background: url(img/zeta_landscape.jpg) no-repeat center center fixed;
  background-size: cover;*/
  /*background-repeat: repeat-x;
  background-color: #ffffff;
  margin: 112px 25% 0 15%;
  padding: 0;*/
  /*font-family: ProximaNova, Helvetica, sans-serif;*/
  font-family: Kanit, Helvetica, sans-serif;
  /*font-size: 100%;*/
  text-align: justify;

  /*font-size: 100%;*/

  /*background: rgb(29, 28, 45);
  background: linear-gradient(180deg, rgba(29, 28, 45, 1) 0%, rgba(73, 71, 101, 1) 100%);
  background-attachment: fixed;*/

  background-color: #09090A;
  background-color: #d1dae8;
  background-color: #D3CEDB;
  background-color: #6EDECA;
  background-color: #00ffbd;
  background-color: #2b294c;
/*  background-color: #111;*/

  font-weight: 200;

  color: #99b1ba;
}

.intro p {

}


.links {
  margin-top: 30px;
}

.links section {
  margin-top: 50px;
}

h1, h2, h3 {
  /*color: #aaa;*/
  /*color: #00ffbd;*/
  /*color: #00ffbd;*/
  /*line-height: 1.5em;*/
  /*color: #222;*/
  color: #EEE;
  color: #00ffbd;
}

h2.title {
  margin-bottom: 20px;
}

span.white {
  color: #eee;
}

span.cyan {
  color: #5cc6cc;
}

span.emph {
  color: #00ffbd;
}

span.emph2 {
  color: #8592D2;
}

span.deemph {
  /*color: #99b1ba;*/
  color: #aaa;
}

span.small {
  font-size: 0.7em;
}

a.dmt {
  color: #5cc6cc;
}

.title, .footer {
  color: #8592D2;
}

.date_future {
  color: #8592D2;
}

a {
/*.title a {*/
/*  text-underline-offset: 5px;*/
}

a:hover {
/*.title a:hover {*/
/*  text-underline-offset: 2px;*/
}

a {
  color: #888;
  color: #51f5c8;
  color: #27B1BE;
  color: #41468f;
  color: #00ffbd;
  /*font-weight: bold;*/
  /*line-height: 1.2em;*/
  color: #EEE;
  color: #00ffbd;
  text-underline-offset: 7px;
}

a:hover {
  color: #3dffec;
  color: #292c5a;

  color: #00ffbd;
  color: #EEE;
  color: #5cc6cc;
  text-underline-offset: 4px;
}

.noise-pattern {
    position: absolute;
    top: 0;
    right: 0;
    width: min(50vw, 50rem);

    z-index: -1;

    /*opacity: 0.5;*/
  }

  img.mesh {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    max-width: min(800px, 50vw);
    height: auto;

    z-index: -1;
  }

p {
  /*color: #7EACBD;*/
  line-height: 1.0em;

  /*font-size: calc(8px + 0.8vw);*/
}

.c1 {
  color: red;
}

.c2 {
  color: green;
}

.c3 {
  color: blue;
}

.c4 {
  color: cyan;
}

.c5 {
  color: orange;
}

.c6 {
  color: violet;
}

div.work {
  max-width: 700px;
  margin-top: 10px;
  text-align: center;
  padding: 50px 0;
  font-size: 1.2em;
}

img.profile {
  float: left;
  width: 250px;
  padding: 10px;
}

/*.intro {
  overflow: auto;
}*/

/*.video {
  margin-bottom: 20px;
}*/

.bio {
  /*border-left: 3px solid #AAA;*/
  /*border-left: 3px solid #8592D2;
  border-left: 3px solid #41468f;*/

  font-size: 0.85em;
  line-height: 1.5em;
  color: #99b1ba;
  color: #00ffbd;
/*  color: white;*/
/*  color: #EEE;*/
  width: 430px;
  max-width: 95%;
}

a.uniqpath {
  text-decoration: none;
/*  max-width: 350px;*/
/*  max-width: 500px;*/
  max-width: 50%;
  display: block;

/*  margin: 0 auto;*/
  font-size: 0.6em;
  margin-top: 50px;
}

p.quote {
  /*border-left: 3px solid #AAA;*/
  /*border-left: 3px solid #8592D2;
  border-left: 3px solid #41468f;*/
  border-left: 3px solid #8592D2;
  padding-left: 10px;
  line-height: 1.5em;
  color: #444;
  color: #EEE;
  width: 444px;
  max-width: 95%;
}

/*p.quote span {
  color: #999;
  color: #8592D2;
}*/

main {
  max-width: 500px;
  padding: 20px;
  margin: 0 auto;
  padding-top: 70px;
  line-height: 1.2em;
  /*font-size: 0.8em;*/
}

@media only screen and (max-width: 768px) {
  main {
    padding-top: 50px;
  }
}

main img {
  width: 100%;
}

main p.question, main p.answer {
  width: 444px;
  max-width: 95%;
  line-height: 1.5em;
  text-align: justify;
}

main p.question {
/*  color: #00ffbd;*/
  color: #3dffec;
}

main p.answer, main p.question span {
/*  color: #3dffec;*/
  color: white;
}

main .video {
  padding-top: 10px;
  padding-bottom: 20px;
}

main img.banner {
/*  width: 100%;*/
/*  width: 565px;*/
/*  max-width: 95%;*/
  /*opacity: 0.9;*/
/*  border-radius: 20px;*/
/*  margin-top: 0px;*/
}

/*main img.banner:hover {
  opacity: 0.8;
  cursor: pointer;
}*/

/*main img.banner:hover {
  opacity: 1.0;
}*/