*, *::before , *::after {
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
:root {
    --primary:#02071a;
    --text:#0f0b00;
    --bg:#FFFFFF ;
    
}

body{
    background-color:var(--bg);
    color:var(--text);
    font-family: 'Segoe UI', Arial, sans-serif;
}
body.dark{ 
--bg: #0d1117;
--text: #FFFFFF;
--primary: #93C5FD;
}
.profile-header{
   display:flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 60px 20px;
   background-image: url('cover.jpg');
   background-repeat:cover;
   background-size:cover;
}

.profile-info{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:10px;
gap: 16px;
}

img.avatar{
    border-radius: 50%;
    width: 70px;
}
.profile-info i {
    display: inline-flex;
    align-items: center; 
    font-size: 14px;
    justify-content: left;
    margin-right: 4px;
    color: #9198a1;
}



.social-media {
   display: flex;
   flex-direction:row;
   color:var(--primary);
   align-items: center;
   gap:20px;
   padding: 20px 0;
   justify-content:center; 
   flex-wrap: nowrap;
}
.social-media a{
 display: flex;
 color:white;
 align-items: center;
 gap:20px;
 padding: 20px 0;
 justify-content:center; 
 flex-wrap: nowrap;
 text-decoration: none;

}
a:hover{
    color: rgba(255,255,0.6);
}