:root{
  --bg:#F6F2EB;
  --dot:rgba(0,0,0,.05);
  --text:#222;
  --muted:#555;
}
[data-theme="dark"]{
  --bg:#0f0f0f;
  --dot:rgba(255,255,255,.05);
  --text:#f5f5f5;
  --muted:#ccc;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:'Inter',sans-serif;
  background:var(--bg);
  /*background-image:radial-gradient(var(--dot) 1px,transparent 1px);*/
  background-size:10px 10px;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
}
.screen{
  text-align:center;
  padding:40px 24px;
}
.logo{
  max-width: 200px;
  margin-bottom:24px;
  width: auto;
  transform:translateY(-60px);
}
h1{
  font-family:'Cinzel', serif;
  letter-spacing:0.08em;
  margin-bottom:40px;
  color:#6b6b6b;
  font-weight:lighter;
  font-size:30px;
  transform:translateY(-90px);
}
.socials{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  transform:translateY(70px);
}
.social{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  text-decoration:none;
  color:var(--text);
  background:var(--bg);
  /*rgba(238,228,219,1.0);*/
  transition:.25s ease;
}
[data-theme="dark"] .social{
  border-color:rgba(255,255,255,.15);
  background:var(--bg);    /*rgba(0,0,0,1.0);*/
}
.social:hover{
  transform:translateY(-2px);
}
.social img{
  width:15px;
}

[data-theme="dark"] .svg{
  filter: invert(1) brightness(2);
}

/* Toggle */
.theme-toggle{
  position:fixed;
  top:20px;
  right:20px;
  border:none;
  background:rgba(0,0,0,.05);
  padding:10px 14px;
  border-radius:50%;
  font-size:16px;
  cursor:pointer;
}
[data-theme="dark"] .theme-toggle{
  background:rgba(255,255,255,.1);
  color:#fff;
}