@font-face {
   font-family: CourierPrime-Regular;
   src: url("CourierPrime-Regular.ttf") format("truetype");
}

@font-face {
   font-family: Sawasdee;
   src: url("Sawasdee.ttf") format("truetype");
}

html {
   box-sizing:border-box;
   background-repeat: repeat;*/
   background-color: #e7e9eb; 
}
*, *:before, *:after {
   box-sizing: inherit;
}
html, body{
   overflow-x: hidden;
   scroll-behavior: smooth;
}

body {
   font-family: "CourierPrime-Regular";
   font-size: 12px;
   background-color: #e7e9eb;
   margin: 3px;
   text-align: left;
   max-width: 720px;
   width: 100%;
   margin: 15px auto;
   padding:25px;
}

main{
   margin: 5px auto 5px auto;
   padding: 0 24px;
   text-align: left;
   font-size: 22px;
   line-height: 160%;
}

header{
   text-align: center;
   margin: 0;
}

a {
   color: red;
   text-decoration: none;
}

h5 {
   line-height: 110%;
   color: #525252;
   font-weight: normal;
}

p {
   font-family: "Sawasdee";
   font-size: 18px;
}

p1 {

   font-family: "CourierPrime-Regular";
   font-size: 12px;
}

/* 3 img row (33.33% = 3 / 25% = 4 / 50% = 2) */
.column {
   float: left;
   width: 10%;
   padding: 3px;
}

/* Clear floats after image containers */
.row::after {
   content: "";
   clear: both;
   display: table;
}

.column1 {
   float: left;
   width: 50%;
   padding: 3px;
}

/* Clear floats after image containers */
.row::after {
   content: "";
   clear: both;
   display: table;
}

div.gallery {
   border: 1px solid #ccc;
}

div.gallery:hover {
   border: 3px solid red;
}

div.gallery img {
   width: 100%;
   height: auto;
}

div.desc {
   padding: 15px;
   text-align: center;
   font-size: 10px;
}

* {
   box-sizing: border-box;
}

.responsive {
   padding: 0 6px;
   float: left;
   width: 19.9999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
   content: "";
   display: table;
   clear: both;
}

.promo {
   display: block;
   margin-left: 2px;
   margin-right:10px;
   margin-bottom: 5px;
   width: 450px;
   height: auto;
   padding: 5px 5px;
   background-color: #fff;
   border: 1px solid #ddd;  
}

.img-top {
   display: block;
   margin-left: 2px;
   margin-right:10px;
   margin-bottom: 5px;
   width: 250px;
   height: auto;
   padding: 5px 5px;
   background-color: #e7e9eb;
   border: 1px solid #fff;  
}

.header-top {
   font-family: "Sawasdee";
   align: center;   
   font-size: 6vw;
   font-weight: bold;
   color: red;
}

.header-down {
   font-family: "CourierPrime-Regular";
   align: center;   
   font-size: 12px;
   font-weight: normal;
   color: #000;
   margin-bottom: 10px;
}

.header-bottom {
   font-family: "CourierPrime-Regular";
   align: center;   
   font-size: 14px;
   font-weight: normal;
   color: #000;
   margin-bottom: 10px;
}

.header-links-th {
   font-family: "Sawasdee";
   align: center;   
   font-size: 18px;
   font-weight: bold;
   color: red;
   background-color: #e7e9eb;
}

.header-links {
   font-family: "CourierPrime-Regular";
   align: center;   
   font-size: 14px;
   color: #ff6437;
   background-color: #e7e9eb;
}
  
h1 {
   font-family: "Sawasdee";
   font-size: 22px;
   font-weight: bold;
}

h2 {
   font-family: "CourierPrime-Regular";
   font-size: 16px;
   font-weight: bold;
}

color {
   font-size: 16px;
   font-weight: bold;
   color: #333;
}

footer {
   font-family: var(--font-stack);
   text-align: center;
   font-size: 10px;
   padding: 10px 0;
}