/*
========================================
  RESET
========================================
*/

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}



/*
========================================
  PAGE / BACKGROUND
========================================
*/

body {

    min-height: 100vh;

}


.page {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;


    padding: 30px;


    background:

        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.45)
        ),

        url("../img/background.png");


    background-size: cover;

    background-position: center;

}


.link small {

    display: block;

    font-size: 0.75em;

    font-weight: normal;

    opacity: 0.9;

    margin-top: 2px;

}

/*
========================================
  CARD
========================================
*/

.card {

    width: 430px;

    max-width: 100%;


    padding: 35px;


    text-align: center;


    border-radius: 25px;


    background:

        rgba(255,255,255,.92);


    backdrop-filter: blur(10px);


    box-shadow:

        0 20px 50px rgba(0,0,0,.30);


    animation:

        fadeIn .5s ease;

}



@keyframes fadeIn {

    from {

        opacity:0;

        transform:translateY(20px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}



/*
========================================
  PROFILE
========================================
*/

.avatar {

    width: 140px;

    height: 140px;


    border-radius: 50%;


    object-fit: cover;


    border:

        5px solid white;


    box-shadow:

        0 5px 20px rgba(0,0,0,.25);

}



h1 {

    margin-top: 20px;

    margin-bottom: 10px;


    font-size: 28px;


}



.description {

    color:#666;


    margin-bottom:30px;


    font-size:16px;

}



/*
========================================
  LINKS
========================================
*/

.links {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    gap: 25px;
}



.link {

    width:100%;

    display:flex !important;

    align-items:center;

    justify-content:center;

    gap:20px;

    padding:16px;

    border-radius:14px;

    color:white;

    text-decoration:none;

    font-size:18px;

    font-weight:bold;

    transition:
        transform .2s,
        opacity .2s;

}



.link:hover {


    transform:

        translateY(-4px);


    opacity:.90;


}



.link i {


    width:30px;


    font-size:24px;


}



/*
========================================
  SOCIAL COLORS
========================================
*/


.instagram {

    background:#E4405F;

}


.facebook {

    background:#1877F2;

}


.linkedin {

    background:#0A66C2;

}


.github {

    background:#24292F;

}


.youtube {

    background:#FF0000;

}


.tiktok {

    background:#000000;

}


.whatsapp {

    background:#25D366;

}


.telegram {

    background:#0088CC;

}


.website {

    background:#1976D2;

}


.email {

    background:#EA4335;

}


.phone {

    background:#43A047;

}



/*
========================================
  ACTION BUTTONS
========================================
*/


.actions {


    margin-top:30px;


    display:flex;


    justify-content:center;


    gap:15px;


}



button {


    border:none;


    padding:13px 20px;


    border-radius:12px;


    cursor:pointer;


    font-size:16px;


    background:#222;


    color:white;


    transition:.2s;


}



button:hover {


    transform:

        translateY(-2px);


}



button i {


    margin-right:5px;


}



/*
========================================
  FOOTER
========================================
*/


.footer {


    margin-top:25px;


    color:#777;


    font-size:14px;


}



/*
========================================
  DARK MODE
========================================
*/


body.dark .page {


    background:

        linear-gradient(
            rgba(0,0,0,.75),
            rgba(0,0,0,.75)
        ),

        url("../img/background.jpg");


}



body.dark .card {


    background:

        rgba(20,20,20,.92);


    color:white;


}



body.dark .description {


    color:#ccc;


}



body.dark .footer {


    color:#aaa;


}



/*
========================================
  MOBILE
========================================
*/


@media(max-width:480px){


    .page {

        padding:15px;

    }


    .card {

        padding:25px;

    }


    h1 {

        font-size:24px;

    }


    .link {

        font-size:16px;

    }

}