:root{
  --bg:#0d0d16;
  --fg:white;
  --muted:#707070;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins';
  background:var(--bg);
  color:var(--fg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem;
  animation:fadeIn 1.2s ease forwards;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.container{
  padding-top: 13rem;
  width:100%;
  max-width:500px;
  text-align:center;
}

header{margin-bottom:0.5rem}
.name{
  color: white;
}

.head {
  width: 30%;
}

h1 {
  font-size: 2rem;
 color: #fff;
 text-transform: uppercase;
 text-shadow:
   -2px -2px 0 #0d0d16,
   2px -2px 0 #0d0d16,
   -2px 2px 0 #0d0d16,
   2px 2px 0 #0d0d16,
   3px 3px 0 white;
 letter-spacing: 5px;
}

.description{margin:1.25rem 0 1.7rem;color:var(--muted)}

.links{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:15rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1rem;
  border-radius:50px 50px 0px 50px;
  text-decoration:none;
  background:transparent;
  border:1px solid var(--muted);
  color:var(--fg);
  font-weight:600;
  transition:transform .3s;
}
.btn:hover{
  transform:translateY(-10px);
  opacity:1;
}

.meta{
  margin-top:0.85rem;
  color:var(--muted);
  font-size:0.95rem;
}


.controls{
  display:flex;
  gap:0.5rem;
  justify-content:center;
  margin-top:1rem;
  opacity:0;
  animation:fadeIn 1.5s ease forwards;
  animation-delay:0.6s;
}

@media(min-width:640px){
  .name{font-size:3rem}
  .description{font-size:1.2rem}
}

.link-underline{border-bottom:1px dashed var(--muted)}

footer{margin-top:2.5rem;color:var(--muted);font-size:0.9rem;opacity:0;animation:fadeIn 0.5s ease forwards;animation-delay:0.9s;}