@import url("https://fonts.googleapis.com/css2?family=Playpen+Sans+Thai:wght@400;700&family=Noto+Sans+Thai:wght@400;700&display=swap");

* {margin:0;}

:root {
  --font-display: "Playpen Sans Thai", "Noto SansThai", sans-serif;
  --color-1: #8E96EE;
  --color-2: #7883FC;
  --color-3: #515FFC;
  --color-4: #1D2FF6;
  --color-pure-blue: #0015FF;
  --red-1: #FF9B9B;
  --red-2: #FF6767;
  --red-3: #FF3E3E;
  --red-4: #FF2222;
  --red-5: #FF0000;
  --red-pure: #E20000;
  --rounded: 999px;
  --center-align: center;
  --smooth: 22px;
  --dim-1: #CFCFCF;
  --bg-1: linear-gradient(150deg, var(--color-1), white, var(--red-2));
  --bg-2: linear-gradient(200deg, var(--color-1), var(--red-2));
  --radius-1: 10px;
}

body {
  background: var(--bg-1);
  background-attachment: fixed;
  text-align: var(--center-align);
}

h1 {
  font-family: var(--font-display);
  text-align: center;
  display: table;
  margin: auto;
  background: var(--bg-2);
  max-height: 100%;
  height: 20%;
  width: 80%;
  border-radius: var(--rounded);
  color: #fff;
  margin-bottom: 0;
  border: 3px solid #fff;
  font-size-adjust: 100%;
  margin-top: 5%;
}

.icon {
  margin: 5% auto;
  height: 45%;
  width: 45%;
  border-radius: var(--rounded);
  border: 5px solid var(--red-2);
  object-fit: cover;
}

.card {
  background: linear-gradient(100deg, var(--red-1), var(--color-1));
  color: white;
  display: table;
  margin: auto;
  padding: 2rem;
  border-radius: var(--smooth);
  border: 5px solid #FFF;
}

.card h2 {
  font-size: 99%;
  margin-bottom: 5%;
}

#line {
  margin-left: 15%;
  background: green;
  color: lime;
  text-decoration: none;
}

#call {
  background: var(--color-3);
  color: white;
  text-decoration: none;
}

footer {
  color: var(--red-5);
  margin-top: 50%;
  font-family: var(--font-display);
}

.contacts {
  border-radius: var(--radius-1);
  border: 2px solid white;
  padding: 5% 10%;
}