* {
  font-family: 'Kanit', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}



/* body {
  min-height: 100vh;
  background: url(../image/background-1.jpg) no-repeat;
  backdrop-filter: blur(5px);
  background-size: cover;
  background-position: center;

} */

.Center {
  display: flex;
  justify-content: center;
}

.font_size {
  font-size: clamp(3px, 2.2vw, 20px);
}

/* .hidden {

  display: none !important;
} */

.body_modal {

  display: flex;
  justify-content: center;
  align-items: center;

}

.btn1 {
  margin: 10px;
  width: 9.5rem;
  height: 2.5rem;
  border-radius: 10px;
  cursor: pointer;
  background: #e40b0b9b;
  font-size: clamp(16px, 2.5vw, 23px);
  color: rgb(232, 232, 232);
  display: flex;
  justify-content: center;
  align-items: center;
}

.card_white {
  background-color: rgb(255, 255, 255);
  height: 85%;
  width: 85%;
  justify-content: center;
  position: absolute;
  box-shadow: inset 0 0 29px 11px rgba(255, 31, 31, 0.46);
}

.lable_main {
  font-size: xx-large;
  font-family: initial;

}

.block_1 {
  background-color: rgb(255, 255, 255);
  box-shadow: inset 0 0 29px 11px rgba(84, 84, 84, 0.46);
  padding: 25px 0;
  justify-content: center;
  text-align: center;
  font-size: clamp(3px, 2.2vw, 20px);
  max-height: 300px;
  text-decoration: none;
  color: rgba(37, 37, 37, 0.489);
  font-weight: bold;

}
.block_1:hover {
  background-color: rgb(196, 143, 143);
  box-shadow: inset 0 0 29px 11px rgba(142, 62, 62, 0.827);
  padding: 25px 0;
  justify-content: center;
  text-align: center;
  font-size: clamp(3px, 2.2vw, 20px);
  max-height: 300px;
  text-decoration: none;
  color: rgb(183, 22, 22);
  font-weight: bold;

}

.grid_4 {
  display: grid;
  grid: auto auto / auto auto;
  grid-gap: 10px;
  padding: 10px;
}