* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --text-color: rgb(255, 255, 255);
    --bg-url: url(Assets/desktop.png);
    --strok-color:  rgb(255, 255, 255);
    --surface-color: rgba(0, 0, 0, 0.815);
    --surface-color-hover: rgba(145, 0, 0, 0.836);
    --highlight-color: rgba(145, 0, 0, 0.836);

}

@media (max-width:932px) { :root { --text-color: rgb(255, 255, 255);
    --bg-url: url(./Assets/bg-mobile.png);
    --strok-color:  rgb(255, 255, 255);
    --surface-color: rgba(0, 0, 0, 0.815);
    --surface-color-hover: rgba(145, 0, 0, 0.836);
    --highlight-color: rgba(145, 0, 0, 0.836);

    }

}
   

body{
    background: var(--bg-url) no-repeat top center/cover;
    display: block;
    width: 100%;
    height: auto;
    
}
 body * {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
 }
    

#container {
   width: 100%;
   max-width: 588px;
   margin: 0px auto 24px;
   padding:  12px;

}

/* profile */
#profile {
    text-align: center;
    padding: 0px;
}

#profile img {
    width: 200px;
    margin-top: 80px;
}

#profile p {
    font-weight: 800;
    line-height: 24px;
    margin-top: 24px;
    --text-color: rgb(37, 37, 37);
}

/* links */ 
ul {
list-style: none;

display: flex;
flex-direction: column;
gap: 19px;

padding:60px 0;


}


ul li a {

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

    padding: 20px 24px;

    background: var(--surface-color);
    border: 0.1px solid var(--strok-color);
    border-radius: 15px;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    text-decoration: none;
    font-weight: 500;

    transition: background 0.2s;
    
    
}

/* pseudo-selector */
ul li a:hover {
   background: var(--surface-color-hover);
   border: 1.5px solid var(--text-color);
}
/* social links */
#social-links {
    display: flex;
    justify-content: center;

    padding: 24px 0;

    font-size: 24px;
    --text-color: rgb(241, 241, 241);
}

#social-links a {
    display: flex;
    align-items: auto;
    justify-content: auto;
    padding: 12px;
    transition: background 0.2s;
    border-radius: 50%;
    margin-top: 40px;
}

#social-links a:hover {
    background: var(--highlight-color);
}

footer {
    padding: 80px 0;
    text-align: center;
    font-size: 14px;
    --text-color: rgb(255, 255, 255); 
    
}

/* animation */
@keyframes slide-in {
    from{
        left: 0;
    }
    to{
        left: 50%;
    }
}
@keyframes slide-back {
    from {
        left: 50%;
    }
    to {
        left: 0;
    }
}