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

body{
  background:#000;
  color:#fff;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}


body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:200%;
  background-image:radial-gradient(white 1px, transparent 1px);
  background-size:40px 40px;
  opacity:0.15;
  animation:starsMove 80s linear infinite;
  pointer-events:none;
}

@keyframes starsMove{
  from{background-position:0 0;}
  to{background-position:0 -1000px;}
}


nav{
  padding:25px;
  font-size:24px;
  font-weight:900;
  cursor:default;
  display:flex;
  justify-content: space-between;
  align-items: center;
  color:#777
}

.logostyle{
  cursor:pointer;
  text-decoration: none;
  color: white;
}


.lang-btn{
  margin-left: 5px;
  padding:5px 12px;
  border-radius:10px;
  border:none;
  background:#444;
  color:white;
  font-weight:700;
  cursor:pointer;
}

.lang-btn:hover{
  background:#666;
}


.container{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
}


.card{
  background:#111;
  padding:50px;
  border-radius:40px;
  width:520px;
  text-align:center;
  box-shadow:0 20px 60px rgba(255,255,255,0.05);
  animation:fadeIn 0.6s ease;
}

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


h1{
  font-weight:900;
  margin-bottom:20px;
}


input{
  width:85%;
  padding:15px;
  border-radius:25px;
  border:none;
  background:#1c1c1c;
  color:white;
  font-size:15px;
  font-weight:700;
}


button{
  margin-top:15px;
  padding:13px 28px;
  border-radius:25px;
  border:none;
  background:white;
  color:black;
  font-weight:1000;
  cursor:pointer;
  transition:0.2s;
}

button:hover{
  transform:scale(1.07);
}


#result{
  margin-top:25px;
  line-height:1.9;
  font-weight:700;
  animation:fadeIn 0.5s ease;
}


.avatar{
  border-radius:100%;
  margin-bottom:15px;
  box-shadow:0 0 25px rgba(255,255,255,0.2);
  animation:pop 0.4s ease;
}

@keyframes pop{
  from{transform:scale(0.7); opacity:0;}
  to{transform:scale(1); opacity:1;}
}


.copyBox{
  margin-top:15px;
  background:#1c1c1c;
  padding:12px;
  border-radius:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
}


.idBox{
  width:calc(100% - 45px);
}


.copyBtn{
  position:absolute;
  right:-45px;
  top:50%;
  transform:translateY(-50%);
  width:35px;
  height:35px;
  border-radius:8px;
  border:none;
  background:white;
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  transition:0.2s;
}

.copyBtn:hover{
  transform:translateY(-50%) scale(1.1);
}

.copyBtn.copied{
  background:lime;
  color:black;
}


.code{
  background:#0a0a0a;
  padding:4px 8px;
  border-radius:6px;
  font-family:Consolas, monospace;
  font-size:13px;
  color:#e6e6e6;
}


footer{
  text-align:center;
  padding:15px;
  color:#777;
  font-size:13px;
}