*{box-sizing:border-box}
body{
margin:0;
font-family:Tahoma,Arial,sans-serif;
color:white;
text-align:center;
background:#03131f;
overflow-x:hidden;
}

#bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
background:linear-gradient(120deg,#02141f,#06273a,#03131f);
}

#langBtn{
position:fixed;
top:20px;
left:20px;
padding:8px 14px;
background:#00cfff;
border:none;
border-radius:8px;
color:#002;
font-weight:bold;
cursor:pointer;
}

.hero{
padding:100px 20px 60px 20px;
}

.avatar{
width:150px;
border-radius:50%;
box-shadow:0 0 30px #00cfff;
margin-bottom:20px;
}

.btn{
display:inline-block;
margin-top:25px;
padding:12px 30px;
background:#00cfff;
color:#002;
text-decoration:none;
border-radius:10px;
font-weight:bold;
}

section{
padding:60px 20px;
max-width:900px;
margin:auto;
}

.bar{
background:#0a2233;
border-radius:20px;
margin:15px auto;
max-width:500px;
overflow:hidden;
}

.bar span{
display:block;
padding:10px;
background:#00cfff;
color:#012;
font-weight:bold;
}