@charset "UTF-8";

html {
     font-size: 1.2em;
}

body {
     font-family: "Arial","Times New Roman","sans-serif","Microsoft JhengHei","SimSun";
     background-color: #f6f5ed;
     letter-spacing: 1px;
     margin: 0px;
}

*:lang(en) {
     letter-spacing: 0px;
}

h1 {
     font-size: 1.4em;
     background-color: #ba9c78;
     color: white;
     padding: 6px;
}

h1, #LbPrivacy p {
     margin-block-start: 0px;
     margin-block-end: 0px;
}

input {
     font-size: 1em;
     &[type="email"] {
          width: 90%;
          max-width: 300px;
     }

     &[type="number"]::-webkit-outer-spin-button,
     &[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none;
     }
     &[type=submit]{
        display:block;
        margin:0 auto;
    }
}

a {
     text-decoration: none;
}

textarea {
     font-size: 1.2em;
     height: 5em;
     width: 90%;
}

header {
     width: 100%;
     background-color: white;
     box-shadow: 0 12px 12px -12px rgba(0, 0, 0, 0.5);
     position: fixed;
     z-index: 99;
     div {
          height: 5em;
          margin: auto;
          display: flex;
          align-items: center;
          max-width: 1000px;
     }

     img {
          max-width: 100%;
     }

     span {
          margin-left: auto;
     }

     a {
          white-space: nowrap;
     }
}

nav {
     padding-bottom: 5px;
}

#DivBody {
     margin: 0 auto;
     padding-top: 5.5em;
     max-width: 1000px;
}

main {
     padding: 1em;
     display: grid;
     grid-template-columns: 170px 1fr;
     gap: 5px;
     background-color: #f4ece3;
     > div:nth-child(odd) {
          text-align: right;
          font-weight: bold;
     }

     > div:last-child {
          text-align: center;
          grid-column: 1 / span 2;
     }
}

#TxtContact {
     width: 80%;
     max-width: 300px;
}

#TxtPhone {
     width: 20%;
     min-width: 100px;
}

#LbPrivacy {
     padding-right: 2em;
     font-size: smaller;
}

div.g-recaptcha {
     width: 304px;
     margin:1em auto;
}

.smallfont {
     font-size: smaller;
}

@media only screen and (min-width: 320px) and (max-width: 500px) and (orientation: portrait) {
     html {
          font-size: 1em;
     }

     header div {
          height: 4em;
     }

     nav {
          padding-top: 2px;
          padding-bottom: 0px;
     }

     #DivBody {
          padding-top: 4.5em;
          margin-bottom: 1em;
     }

     main {
          padding: 3px;
          grid-template-columns: 80px 1fr;
     }
}