      @import url('https://fonts.googleapis.com/css2?family=Mitr:wght@300&display=swap');

*{
      font-family: 'Mitr', sans-serif;
      margin:0; padding:0;     
    }
/*  CSS ตัวเลขนับถอยหลัง */
      #timer {
        font-size: 1.5em;
        font-weight: 300;
        padding: 5px;
        color: #a4cb15;

      }

      #timer div {
        text-align: center;
        display: inline-block;
        min-width: 75px;
        padding: 5px;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #444;
        margin: 2px;
      }

      #timer div span {
        color:#15932e;
        display: block;
        margin-top: 2px;
        font-size: .6em;
        font-weight: 300;
      }    
#loading{
        position :fixed;
        top:0;
        left:0;
        z-index:1000;
        background-color :rgba(255,255,255,0.9);
        height:100vh;
        width:100vw;
    }
    body{
      background:url("https://img.freepik.com/premium-photo/abstract-background-images-wallpaper-ai-generated_643360-48163.jpg");
      background-repeat: no-repeat;
      background-attachment: fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-position: center;
      font-family: "Mitr", sans-serif;
      font-size:1.15rem;
      margin-bottom:0px;
      position:relative;
      color:var(--primary);
      min-width:100vw;
    }    
 .card-form{
      box-shadow: var(--box-shadow);
      border: .1rem solid var(--gray-color);
      border-radius: .5rem;
      background: #fff;
      font-size: 1.15rem;
      width: 95%;
      margin-bottom:20px;
    }

    .card-form input{
      font-size: 1.15rem;
    }

    .card-form textarea{
      font-size: 1.15rem;
    }
.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}