:root{
  --ink:#e9eefc;
  --brand:#7c9cff;
  --accent:#22d3ee;
  --line:#243055;
  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,3vw,32px);
  background-color: #000000c9;
  background-blend-mode: overlay;
  background-image:url('./image/bg-th.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

@media (max-width:768px){
  body{background-attachment:scroll}
}

.wrap{
  text-align:center;
  /*background:rgba(11,16,32,.7);*/
  border-radius:var(--radius);
  padding:40px 20px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}


h1{
  font-size:clamp(1.8rem,4vw,3rem);
  background:linear-gradient(90deg,var(--ink),var(--accent),var(--brand),var(--ink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-size:300% 100%;
  animation:sheen 6s linear infinite;
  margin:0 0 10px;
}

main.wrap p {
    font-size: 20px;
}


@keyframes sheen{0%{background-position:0% 50%}100%{background-position:300% 50%}}

.illus{
  width:100%;
  max-width:200px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.social{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
}

.social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#0f1736;
  border:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  font-size:1.3rem;
}

.social a:hover{
  outline:2px dashed var(--accent);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  h1{animation:none}
}