body{
margin:0;
background:white;
font-family:Arial, Helvetica, sans-serif;
overflow:hidden;
}

/* scene container */

.scene{
position:relative;
height:100vh;
width:100vw;
display:flex;
align-items:center;
justify-content:center;
}

/* center layout */

.content{
display:flex;
align-items:center;
gap:80px;
z-index:10;
transform:scale(1.35);
}

/* profile */

.profile{
text-align:center;
width:220px;
}

.pfp{
width:110px;
height:110px;
border-radius:50%;
object-fit:cover;
margin-bottom:6px;
}

.subtitle{
font-style:italic;
font-size:13px;
margin-bottom:10px;
}

.tags{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:6px;
margin-bottom:10px;
}

.tags span{
border:1px solid black;
padding:5px 10px;
font-size:14px;
}

.music{
font-size:12px;
}

/* discord */

.discord img{
width:320px;
border-radius:10px;
}

/* manga bubbles */

.bubble{
position:absolute;
z-index:1;
}

.bubble img{
max-width:180px;
}

/* bubble positions */

.b1{top:10%;left:6%;}
.b2{top:20%;right:6%;}
.b3{bottom:25%;left:10%;}
.b4{bottom:28%;right:10%;}

/* fade animation */

.hidden{
opacity:0;
transform:scale(.7);
}

.show{
animation:fadeIn .5s forwards;
}

@keyframes fadeIn{
from{opacity:0;transform:scale(.7);}
to{opacity:1;transform:scale(1);}
}

/* banner */

.banner{
position:fixed;
bottom:0;
width:100%;
display:flex;
justify-content:center;
}

.banner img{
max-height:220px;
width:auto;
}

/* mobile */

@media (max-width:700px){

.content{
flex-direction:column;
gap:20px;
}

.discord img{
width:200px;
}

.bubble img{
max-width:180px;
opacity:.7;
}

.banner img{
max-height:100px;
}

}