/*************************************************/
/* GLOBAL PAGE STYLE */
/*************************************************/

body
{
    background:
        linear-gradient(
            135deg,
            #fffdf5,
            #f8f9fa
        );

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color:#333;

    min-height:100vh;
}



/*************************************************/
/* PAGE HEADER */
/* Funny page introduction */
/*************************************************/

.fun-header
{
    text-align:center;

    padding:50px 20px 45px;
}



/* Logo above title */

.fun-logo
{
    width:110px;

    height:110px;


    margin:0 auto 25px;


    display:flex;

    justify-content:center;

    align-items:center;


    background:white;


    border-radius:50%;


    box-shadow:
        0 10px 25px rgba(0,0,0,.15);
}


.fun-logo img
{
    width:85px;

    height:auto;
}



/* Main title */

.fun-header h1
{
    font-size:48px;

    font-weight:800;


    color:#333;


    margin-bottom:15px;
}



/* Subtitle */

.fun-header p
{
    max-width:800px;

    margin:auto;


    font-size:20px;

    line-height:1.6;


    color:#666;
}



/*************************************************/
/* CANDIDATE CARD */
/*************************************************/

.fun-card
{
    background:#fff;

    border-radius:30px;


    overflow:hidden;


    height:100%;


    position:relative;



    box-shadow:

        0 15px 40px rgba(0,0,0,.15);



    transition:

        transform .35s ease,

        box-shadow .35s ease;
}



/* Funny emoji badge */

.fun-card::before
{
    content:"😄";


    position:absolute;


    top:15px;

    right:15px;


    font-size:28px;


    z-index:5;
}



/* Hover */

.fun-card:hover
{
    transform:
        translateY(-12px)
        rotate(-1deg);


    box-shadow:

        0 25px 55px rgba(0,0,0,.25);
}



/*************************************************/
/* CARD HEADER */
/* Association logo background */
/*************************************************/

.fun-top
{
    height:120px;


    display:flex;


    justify-content:center;


    align-items:center;



    background:

        linear-gradient(

            135deg,

            #198754,

            #0d6efd

        );
}



/* Logo */

.logo
{
    width:90px;


    height:90px;


    object-fit:contain;



    background:#fff;


    padding:10px;



    border-radius:50%;



    box-shadow:

        0 8px 20px rgba(0,0,0,.20);
}



/*************************************************/
/* PHOTO SECTION */
/*************************************************/

.fun-photo
{
    position:relative;


    text-align:center;


    margin-top:-25px;
}



.fun-photo img
{
    width:180px;


    height:180px;


    object-fit:cover;



    border-radius:50%;



    border:

        8px solid #fff;



    box-shadow:

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



    transition:

        transform .3s ease;
}



/* Photo animation */

.fun-card:hover .fun-photo img
{
    transform:scale(1.05);
}



/*************************************************/
/* NUMBER BADGE */
/*************************************************/

.number
{
    position:absolute;


    right:35%;


    bottom:0;



    width:45px;


    height:45px;



    display:flex;


    justify-content:center;


    align-items:center;



    border-radius:50%;



    background:#dc3545;


    color:white;



    font-size:22px;


    font-weight:bold;



    box-shadow:

        0 5px 10px rgba(0,0,0,.25);
}



/*************************************************/
/* CARD CONTENT */
/*************************************************/

.fun-body
{
    padding:25px;


    text-align:center;
}



/* Name */

.fun-name
{
    font-size:28px;


    font-weight:800;


    margin-top:10px;
}



/* Job */

.fun-job
{
    color:#777;


    font-size:16px;


    margin-bottom:10px;
}



/*************************************************/
/* FUNNY INFORMATION BOX */
/*************************************************/

.fun-box
{
    margin-top:20px;


    padding:18px;



    background:#f8f9fa;



    border-radius:20px;



    text-align:left;



    border:

        1px dashed #ccc;
}



.fun-box div
{
    margin:10px 0;


    font-size:15px;


    line-height:1.4;
}



/*************************************************/
/* MOTTO */
/*************************************************/

.motto
{
    margin-top:20px;


    padding:10px;



    font-style:italic;


    font-weight:600;



    color:#198754;
}



/*************************************************/
/* FOOTER */
/*************************************************/

.fun-footer
{
    background:#212529;


    color:white;



    padding:15px;



    text-align:center;



    border-radius:

        0 0 30px 30px;



    font-size:15px;
}



.fun-footer i
{
    margin-right:8px;

    color:#ffc107;
}



/*************************************************/
/* MOBILE OPTIMIZATION */
/*************************************************/

@media(max-width:576px)
{

    .fun-header
    {
        padding-top:30px;
    }



    .fun-header h1
    {
        font-size:36px;
    }



    .fun-header p
    {
        font-size:17px;
    }



    .fun-photo img
    {
        width:150px;

        height:150px;
    }



    .number
    {
        right:32%;
    }



    .fun-name
    {
        font-size:24px;
    }

}