* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
  
html,
body {
    -webkit-text-size-adjust: 100%;
    width:100%;
    padding:0;
    margin:0;
    color: #000000;
    background-color: #ffffff;
    font-family: "Kanit", sans-serif;
}

img {
    width: 100%;
    height: auto;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

@media screen and ( min-width: 300px ) {
    .page-container {
        display: block;
        position: relative;
        width: 100%;
        margin: 0px auto;
    }

    .site-header {
        display: block;
        width: 100%;
        padding: 0px 20px;
        background-color: #fef752;
    }

    .site-footer {
        position: fixed;
        bottom: 0px;
        display: block;
        min-height: 50px;
        width: 100%;
        background-color: #fef752;
    }

    .site-logo {
        display: block;
        max-width: 200px;
    }

    .page-content,
    .page-content-monitor {
        display: block;
        max-width: 500px;
        margin: 0px auto;
        text-align: center;
    }

    .page-content-monitor {
        max-width: 100%;
    }

    .page-topic {
        display: block;
        font-size: 36px;
        font-weight: bold;
        margin: 20px auto;
    }

    .page-label,
    .page-input {
        display: block;
        text-align: left;
        width: 70%;
        margin: 20px auto;
    }

    input[type='text'],
    select {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 18px;
        padding: 10px;
        color: #000000;
        background-color: #ffffff;
    }

    .page-button {
        display: block;
        text-align: center;
    }

    .normal-btn {
        display: block;
        margin: 20px auto;
        width: 40%;
        padding: 10px 20px;
        background-color: #fef752;;
        color: #000000;
        text-decoration: none;
        font-weight: bold;
        font-size: 24px;
        border: 2px solid #000000;
    }

    .red-font {
        color: #ff0000;
    }

    .hidden {
        display: none;
    }

    .contact-card {
        display: inline-block;
        width: 98%;
        margin: 10px auto;
        padding: 10px;
        border-radius: 20px;
        border: 1px solid #000000;
        text-align: justify;
    }

    .contact-no,
    .contact-name,
    .contact-detail,
    .contact-info,
    .contact-budget {
        display: block;
        text-align: left;
        margin: 10px auto;
    }
}