@charset "UTF-8";
#body {
  flex: 1;
  height: 100vh;
  display: flex;
  flex-flow: column;
}
#body #content {
  padding: 0 0 20px 0;
  color: #000326;
}
@media (prefers-color-scheme: dark) {
  #body #content {
    color: #Faf9f7;
  }
}
#body #content img {
  width: 100%;
  margin: 0 0 40px 0;
}
#body #content iframe {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  margin: 0 0 40px 0;
}
#body #content h1:before :lang(en) {
  content: "You are here: ";
}
#body #hello {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}
#body #hello .logo {
  width: 600px;
  height: 600px;
  background-image: url(../images/love-you-more.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
@media all and (max-width: 1200px) {
  #body #hello .logo {
    width: 500px;
    height: 500px;
  }
}
@media all and (max-width: 900px) {
  #body #hello .logo {
    width: 400px;
    height: 400px;
  }
}
#body #hello .logo img {
  width: 100%;
  height: 100%;
}

@font-face { /* Fonts */
  font-family: "BaiJamjuree Regular";
  src: url("../fonts/bai-jumjuree/bai-jamjuree-regular.woff2") format("woff2"), url("../fonts/bai-jumjuree/bai-jamjuree-regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "BaiJamjuree Regular Italic";
  src: url("../fonts/bai-jumjuree/bai-jamjuree-regular-italic.woff2") format("woff2"), url("../fonts/bai-jumjuree/bai-jamjuree-regular-italic.woff") format("woff");
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: "BaiJamjuree Bold";
  src: url("../fonts/bai-jumjuree/bai-jamjuree-bold.woff2") format("woff2"), url("../fonts/bai-jumjuree/bai-jamjuree-bold.woff") format("woff");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: "BaiJamjuree Bold Italic";
  src: url("../fonts/bai-jumjuree/bai-jamjuree-bold-italic.woff2") format("woff2"), url("../fonts/bai-jumjuree/bai-jamjuree-bold-italic.woff") format("woff");
  font-style: italic;
  font-weight: bold;
}
html {
  background: #Faf9f7;
}
@media (prefers-color-scheme: dark) {
  html {
    background: #000326;
  }
}
html body {
  display: flex;
  flex-flow: column;
  min-height: 98vh;
  margin: 0;
  padding: 0;
}
html body #body {
  padding: 0 10px 20px 10px;
}
html body hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, rgb(126, 206, 156) 0%, rgb(114, 190, 223) 33%, rgb(207, 114, 201) 66%, rgb(255, 125, 127) 100%);
  margin: 0 0 40px 0;
}

.scroll-indicator {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  padding: 0;
  margin: 0;
}

.progress-container {
  width: 100%;
  height: 5px;
  padding: 0;
  margin: 0;
}

.progress-bar {
  height: 5px;
  width: 0%;
  padding: 0;
  margin: 0;
  background: #72bedf;
}
@media (prefers-color-scheme: dark) {
  .progress-bar {
    background: #ff7d7f;
  }
}

#footer {
  text-align: center;
  margin-top: auto;
}
#footer p {
  margin: 0;
  padding: 0;
}

#header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0 10px 20px 10px;
}
#header ul {
  list-style: none;
  margin: 0;
  padding: 0 0 20px 0;
}

#language {
  text-align: right;
}
#language ul li {
  padding: 0;
}

.arch-link:before {
  mask: url(../images/links/arch.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/arch.svg) no-repeat 50% 50%;
}

.azuracast-link:before {
  mask: url(../images/links/azuracast.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/azuracast.svg) no-repeat 50% 50%;
}

.back-arrow-link:before {
  mask: url(../images/links/back-arrow.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/back-arrow.svg) no-repeat 50% 50%;
}

.down-arrow-link:before {
  mask: url(../images/links/down-arrow.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/down-arrow.svg) no-repeat 50% 50%;
}

.facebook-link:before {
  mask: url(../images/links/facebook.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/facebook.svg) no-repeat 50% 50%;
}

.forward-arrow-link:before {
  mask: url(../images/links/forward-arrow.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/forward-arrow.svg) no-repeat 50% 50%;
}

.google-maps-link:before {
  mask: url(../images/links/google-maps.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/google-maps.svg) no-repeat 50% 50%;
}

.grav-link:before {
  mask: url(../images/links/grav.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/grav.svg) no-repeat 50% 50%;
}

.inkscape-link:before {
  mask: url(../images/links/inkscape.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/inkscape.svg) no-repeat 50% 50%;
}

.instagram-link:before {
  mask: url(../images/links/instagram.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/instagram.svg) no-repeat 50% 50%;
}

.line-link:before {
  mask: url(../images/links/line.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/line.svg) no-repeat 50% 50%;
}

.manjaro-link:before {
  mask: url(../images/links/manjaro.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/manjaro.svg) no-repeat 50% 50%;
}

.mastodon-link:before {
  mask: url(../images/links/mastodon.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/mastodon.svg) no-repeat 50% 50%;
}

.odoo-link:before {
  mask: url(../images/links/odoo.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/odoo.svg) no-repeat 50% 50%;
}

.tiktok-link:before {
  mask: url(../images/links/tiktok.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/tiktok.svg) no-repeat 50% 50%;
}

.up-arrow-link:before {
  mask: url(../images/links/up-arrow.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/up-arrow.svg) no-repeat 50% 50%;
}

.whatsapp-link:before {
  mask: url(../images/links/whatsapp.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/whatsapp.svg) no-repeat 50% 50%;
}

.youtube-link:before {
  mask: url(../images/links/youtube.svg) no-repeat 50% 50%;
  -webkit-mask: url(../images/links/youtube.svg) no-repeat 50% 50%;
}

.arch-link:before, .azuracast-link:before, .back-arrow-link:before, .down-arrow-link:before, .facebook-link:before, .forward-arrow-link:before, .google-maps-link:before, .grav-link:before, .inkscape-link:before, .instagram-link:before, .line-link:before, .manjaro-link:before, .mastodon-link:before, .odoo-link:before, .tiktok-link:before, .up-arrow-link:before, .whatsapp-link:before, .youtube-link:before {
  width: 15px;
  height: 15px;
  display: inline-block;
  content: "";
  mask-size: cover;
  margin-right: 5px;
  background-color: #000326;
}
@media (prefers-color-scheme: dark) {
  .arch-link:before, .azuracast-link:before, .back-arrow-link:before, .down-arrow-link:before, .facebook-link:before, .forward-arrow-link:before, .google-maps-link:before, .grav-link:before, .inkscape-link:before, .instagram-link:before, .line-link:before, .manjaro-link:before, .mastodon-link:before, .odoo-link:before, .tiktok-link:before, .up-arrow-link:before, .whatsapp-link:before, .youtube-link:before {
    background-color: #Faf9f7;
  }
}

html {
  font-family: "BaiJamjuree Regular", sans-serif;
  font-size: 20px;
  line-height: 28px;
}
html h2, html h3, html h4, html h5, html h6 {
  font-family: "BaiJamjuree Bold", sans-serif;
}
html h1, html h2, html h3, html h4, html h5, html h6, html p, html ul, html ol, html div, html table, html span, html blockquote {
  margin: 0 0 40px 0;
}
html h1 {
  font-size: 20px;
  line-height: 28px;
  color: #000326;
}
@media (prefers-color-scheme: dark) {
  html h1 {
    color: #Faf9f7;
  }
}
html h1 {
  font-weight: normal;
}
html h2, html h3, html h4, html h5, html h6 {
  font-size: 25px;
  margin: 0 0 10px 0;
}
html strong, html bold {
  font-family: "BaiJamjuree Bold", sans-serif;
}
html a {
  text-decoration: underline;
  color: #000326;
}
@media (prefers-color-scheme: dark) {
  html a {
    color: #Faf9f7;
  }
}
html a:hover {
  color: #72bedf !important;
}
@media (prefers-color-scheme: dark) {
  html a:hover {
    color: #ff7d7f !important;
  }
}
html p:has(+ ul) {
  margin: 0 !important;
}
html :lang(en) h1:before {
  content: "You are here: ";
}
html :lang(th) h1:before {
  content: "คุณอยู่ที่นี่: ";
}
html ::selection {
  color: #000326;
  -webkit-text-fill-color: #000326;
  background-color: #72bedf;
}
@media (prefers-color-scheme: dark) {
  html ::selection {
    color: #Faf9f7;
    -webkit-text-fill-color: #Faf9f7;
    background-color: #72bedf;
  }
}
html .selected {
  color: #72bedf !important;
}
@media (prefers-color-scheme: dark) {
  html .selected {
    color: #ff7d7f !important;
  }
}
html blockquote {
  text-align: center;
}
html blockquote p {
  margin: 0;
  font-family: "BaiJamjuree Bold", sans-serif;
  line-height: 50px;
  font-size: 30px;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(90deg, rgb(126, 206, 156) 0%, rgb(114, 190, 223) 33%, rgb(207, 114, 201) 66%, rgb(255, 125, 127) 100%);
  background-clip: text;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

#navigation ul li {
  padding: 0 20px 0 0;
}