/* Style Settings */
@import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
:root {
    --bgColor:#1C1C1C;
    --accentColor: #E6E6E6;
    --font: 'Karla', sans-serif;
}
@font-face {
    font-family: 'CustomFont'; /* Este es el nombre que usarás en font-family */
    src: url('font.otf') format('opentype'); /* Aquí especificas la ruta al archivo */
    font-weight: normal;
    font-style: normal;
}

body{
    background-color: black;
    position: relative;
    overflow: hidden;
}

#spline-bg{
    z-index: -1200;
    filter: saturate(0%);
}

#background-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -800;
    object-fit: cover;
    filter: brightness(30%);
    opacity: 30%;
}

#userPhoto{
    margin-top: 130px !important;
    width: 110px;
    height: 110px;
    display: block;
    margin: 35px auto 20px;
    margin-bottom: 5px !important;
    border-radius: 50%;
    box-shadow: 6px 6px 58px 0px rgb(0, 0, 0);
}

/* Versión para celular */
@media (max-width: 768px) {
    #userPhoto {
        margin-top: 20px !important;
        width: 110px;
        height: 110px;
        display: block;
        margin: 20px auto 20px;
        border-radius: 50%;
    }
}
#userName{
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.25;
    /* display: block; */
    font-family:customFont;
    text-align: center;
    text-decoration: none;
    font-size: 2.7rem;
    letter-spacing: 2px;

}

#links{
    max-width: 675px;
    width: auto;
    display: block;
    margin: 27px auto;
}
.link{

    display: flex;
    align-items: center;
    background-color: rgb(27, 27, 27);
    color: rgb(255, 255, 255);
    font-family: var(--font);
   
    margin-bottom: 15px;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all .25s cubic-bezier(.08,.59,.29,.99);
    border-radius: 10px;
    min-height: 70px;
    /* max-height: 70px; */
    line-height: 1.25;
    overflow: hidden;
    white-space: normal;
    font-weight: 600;
    position: relative; /* Needed for absolute positioning of icon */
    padding-left: 60px; /* Space for icon (45px) + right margin (15px) */
    
}

.link span {
    text-align: center;
    flex-grow: 1;
    word-break: break-word;
    margin-right: 65px;
    margin-left: 10px;
}

.link:hover{
    background-color: rgb(27, 27, 27);
    color: rgb(255, 255, 255);
    transform: scale(1.05);
}

.user-info-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    margin: 0 auto;
}
.link-icon {
    width: 45px; /* Adjust size as needed */
    height: 45px; /* Adjust size as needed */
    margin-right: 15px; /* Add spacing between icon and text */
   
    object-fit: contain;
    flex-shrink: 0;
    border-radius:10px;
    position: absolute; /* Position icon absolutely */
    left: 15px; /* Position icon from the left edge */
    top: 50%; /* Vertically center the icon */
    transform: translateY(-50%); /* Adjust for vertical centering */
    z-index: 1;
}

.redes{
    filter: invert(1);
    opacity: 50%;
}
.redes:hover{
    opacity: 80%;
}