body{

margin:0;
font-family:sans-serif;
color:white;

background:#140028;

background-image:
radial-gradient(circle at 20% 30%,#7b2cff,transparent),
radial-gradient(circle at 80% 70%,#a64cff,transparent);
text-align:center;

}

nav{

display:flex;
justify-content:space-between;
align-items:center;

padding:15px 25px;

background:rgba(0,0,0,0.3);

position:fixed;
width:100%;

top:0;

backdrop-filter:blur(10px);

}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
background:#6a00ff;
color:white;
position:fixed;
width:100%;
top:0;
}

.nav-menu{
list-style:none;
display:flex;
gap:20px;
text-align:left;
}

.nav-menu{
list-style:none;
display:flex;
gap:20px;

}

.nav-menu a{
color:white;
text-decoration:none;
}

header{
margin-top:80px;
}

.avatar{
width:150px;
border-radius:50%;
}

.card{
background:rgba(255,255,255,0.08);
backdrop-filter:blur(10px);
padding:20px;
margin:20px auto;
max-width:800px;
border-radius:10px;
text-align:left;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.sns a{
color:white;
font-size:30px;
margin:10px;
}

.back-to-top{
position:fixed;
bottom:20px;
right:20px;
background:#6a00ff;
color:white;
padding:10px 15px;
border-radius:50%;
text-decoration:none;
}

.logo{

font-weight:bold;
font-size:18px;

}

h2{
text-align:left;
max-width:800px;
margin:40px auto 10px;
border-left:5px solid #6a00ff;
padding-left:10px;
}

.avatar{

width:140px;
border-radius:50%;

border:4px solid #c084ff;

box-shadow:0 0 25px #c084ff;

}

.fade{
opacity:0;
transform:translateY(40px);
transition:1s;
}

.fade.show{
opacity:1;
transform:translateY(0);
}

.back-to-top{

position:fixed;
right:20px;
bottom:20px;

width:50px;
height:50px;

background:#8b5cf6;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

z-index:1000;

}

/* 矢印 */

.back-to-top::before{

content:"";

width:12px;
height:12px;

border-top:3px solid white;
border-left:3px solid white;

transform:rotate(45deg);

}

footer{
margin:40px;
}

/* ハンバーガー */

.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
}

.hamburger span{
width:25px;
height:3px;
background:white;
margin:4px;
}

.back-to-top:hover{

transform:translateY(-5px);

background:#a855f7;

}

a{
color:white;
text-decoration:none;
}
/* スマホ */

@media(max-width:768px){

.nav-menu{
position:fixed;
right:-100%;
top:60px;
flex-direction:column;
background:#120822;
width:200px;
height:100vh;
padding:20px;
transition:0.3s;
}

.nav-menu.active{
right:0;
}

.hamburger{
display:flex;
}

}