@charset "UTF-8";
/* CSS Document */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* BODY */
body{
font-family:Poppins, sans-serif;
background:linear-gradient(135deg,#ff9dfc,#8fd3ff);
color:white;
}

/* NAVBAR */
.navbar
{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:rgba(255,255,255,0.1);
backdrop-filter:blur(10px);
}

.logo{
width:140px
}

nav a{
margin-left:20px;
text-decoration:none;
color:white;
font-weight:bold;
}

/* HERO */
.hero{
text-align:center;
margin-top:150px;
padding:20px;
}

.hero h2{
font-size:60px;
margin-bottom:20px;
}

.hero p{
font-size:23px;
max-width:500px;
margin:auto;
}

/* BUTTON */
.button{
display:inline-block;
margin-top:30px;
padding:15px 30px;
background:#ff2ea6;
border-radius:30px;
text-decoration:none;
color:white;
box-shadow:0 0 20px #ff2ea6;
transition:0.3s;
}

.button:hover{
transform:scale(1.05);
box-shadow:0 0 30px #ff2ea6;
}

/* PAGE GENERAL */
.page{
text-align:center;
margin-top:120px;
padding:20px;
}

/* FEED */
.feed{
max-width:700px;
margin:100px auto;
}

.post{
background:rgba(255,255,255,0.15);
padding:20px;
margin-bottom:20px;
border-radius:15px;
}

/* PROFILE */
.profile{
text-align:center;
margin-top:120px;
}

.music{
margin-top:20px;
background:rgba(25,255,255,0.2);
padding:15px;
border-radius:20px;
}

/* FOOTER */
footer{
text-align:center;
margin-top:200px;
padding:20px;
font-size:20px;
opacity:0.8;
}

/* PROFILE PAGE */

.profile-page{
padding:40px;
}

/* Header */
.profile-header{
display:flex;
align-items:center;
gap:20px;
margin-bottom:30px;
}

.avatar{
width:120px;
border-radius:50%;
border:4px solid white;
}

.status{
color:#ff2ea6;
font-weight:bold;
}

/* Layout */
.profile-layout{
display:flex;
gap:30px;
}

/* Sidebar */
.sidebar{
width:45%;
}

/* Content */
.content{
width:70%;
}

/* Cards */
.card{
background:rgba(255,255,255,0.15);
padding:20px;
border-radius:15px;
margin-bottom:20px;
backdrop-filter:blur(10px);
}

/* Friends Grid */
.friends{
display:grid;

gap:20px;
}

.friends img{
width:100%;
border-radius:10px;
}

/* Post Images */
.post-img{
width:100%;
border-radius:10px;
margin:10px 0;
}




/* FRIENDS GRID */
.friends{
display:grid;
grid-template-columns:auto;
gap:10px;
}

.friends img{
width:100%;
border-radius:10px;
}

/* SIDEBARS */
.left-sidebar, .right-sidebar{
background:rgba(255,255,255,0.1);
padding:20px;
border-radius:15px;
backdrop-filter:blur(10px);
}

/* PROFILE CARD */
.profile-card{
text-align:center;
margin-bottom:20px;
}

.avatar-small{
width:60px;
border-radius:50%;
margin-bottom:10px;
}

/* MENU */
.menu a{
display:block;
margin:10px 0;
text-decoration:none;
color:white;
font-weight:bold;
}

/* FEED */
.feed{
display:flex;
flex-direction:column;
gap:20px;
}

/* POSTS */
.post{
background:rgba(255,255,255,0.15);
padding:20px;
border-radius:15px;
backdrop-filter:blur(10px);
}

/* POST HEADER */
.post-header{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.post-header span{
font-size:12px;
opacity:0.7;
}

/* POST IMAGE */
.post-img{
width:100%;
border-radius:10px;
margin-top:10px;
}

/* FRIENDS GRID */
.friends{
display:grid;
	
gap:10px;
}

.friends img{
width:100%;
border-radius:10px;
}

/* CARD */
.card{
background:rgba(255,255,255,0.15);
padding:15px;
border-radius:15px;
margin-bottom:20px;
}

/* HOVER EFFECT */
.menu a:hover{
color:#ff2ea6;
}

/* CUSTOMIZE PAGE */

.customize-page{
display:grid;
grid-template-columns:auto;
gap:10px;
}

/* LEFT PANEL */
.customize-sidebar{
background:rgba(0,0,0,0.6);
padding:20px;
color:white;
display:flex;
flex-direction:column;
gap:20px;
}

/* OPTION GROUP */
.option-group{
background:rgba(255,255,255,0.1);
padding:15px;
border-radius:15px;
}

.option-group h3{
margin-bottom:10px;
}

/* BUTTONS */
.option-group button{
display:block;
width:100%;
margin-bottom:10px;
padding:10px;
border:none;
border-radius:10px;
background:#ff2ea6;
color:white;
cursor:pointer;
}

/* PREVIEW AREA */
.preview{
display:flex;
justify-content:center;
align-items:center;
}

/* PREVIEW CARD */
.preview-card{
background:rgba(255,255,255,0.15);
padding:30px;
border-radius:20px;
text-align:center;
backdrop-filter:blur(10px);
width:300px;
}

/* PREVIEW BOX */
.preview-box{
margin-top:20px;
padding:20px;
background:rgba(255,255,255,0.2);
border-radius:10px;
}

/* CUSTOMIZE PAGE */

.customize-page{
display:grid;
grid-template-columns:auto;
gap:10px;
}
/* LEFT PANEL */
.customize-sidebar{
background:rgba(0,0,0,0.6);
padding:20px;
color:white;
display:flex;
flex-direction:column;
gap:20px;
}

/* OPTION GROUP */
.option-group{
background:rgba(255,255,255,0.1);
padding:15px;
border-radius:15px;
}

.option-group h3{
margin-bottom:10px;
}

/* BUTTONS */
.option-group button{
display:block;
width:100%;
margin-bottom:10px;
padding:10px;
border:none;
border-radius:10px;
background:#ff2ea6;
color:white;
cursor:pointer;
}

/* PREVIEW AREA */
.preview{
display:flex;
justify-content:center;
align-items:center;
}

/* PREVIEW CARD */
.preview-card{
background:rgba(255,255,255,0.15);
padding:30px;
border-radius:20px;
text-align:center;
backdrop-filter:blur(10px);
width:300px;
}

/* PREVIEW BOX */
.preview-box{
margin-top:20px;
padding:20px;
background:rgba(255,255,255,0.2);
border-radius:10px;
}

/* DASHBOARD LAYOUT */
.dashboard{
display:grid;
   grid-template-columns:250px;
gap:20px;
padding:20px;
min-height:100vh;
}
.left-sidebar,
.right-sidebar{
background:rgba(255,255,255,0.1);
padding:20px;
border-radius:15px;
backdrop-filter:blur(10px);
height:fit-content;
}
.feed{
display:flex;
flex-direction:column;
gap:20px;
}

.post{
background:rgba(255,255,255,0.15);
padding:20px;
border-radius:15px;
backdrop-filter:blur(10px);
}

.post-header{
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px;
}

.avatar-small{
width:50px;
height:50px;
border-radius:50%;
}
.post-img{
width:100%;
border-radius:10px;
margin-top:10px;
}
.friends{
display:grid;
grid-template-columns:auto
;gap:10px;
}

.friends img{
width:100%;
border-radius:10px;
}
@media (max-width: 900px){}
 
.dashboard{
display:flex;
gap:20px;
padding:20px;
min-height:100vh;
}

.left-sidebar{
width:250px;
background:rgba(255,255,255,0.1);
padding:20px;
border-radius:15px;
}


.left-sidebar,
.right-sidebar{
display:none;

}
.post, 

.left-sidebar, 

.right-sidebar{
box-shadow:0 0 15px rgba(255,255,255,0.2);
}

.right-sidebar{
width:250px;
background:rgba(255,255,255,0.1);
padding:20px;
border-radius:15px;
}