
/*===== GOOGLE FONTS =====*/
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap');

/*===== VARIABLES CSS =====*/
:root{
    /*===== Colors =====*/
    --first-color: #272A3A;
    --first-color-light: #8A8EAA;
    --first-color-lighten: #F8F8FC;

    /*===== Font and typography =====*/
    --body-font: 'Ubuntu', sans-serif;
    
    --normal-font-size: 1rem;
    --smaller-font-size: .813rem;
}

/*===== BASE =====*/
*,::before,::after{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    font-family: var(--body-font);
    background-color: var(--first-color-lighten);
}
h1{
    margin: 0;  
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
    height: auto;
}

/*===== DRAG and DROP =====*/
.drop{
    height: 100vh;
    display: grid;
    align-items: center;
    justify-content: center;

    &__container{
        display: grid;
        row-gap: 1rem;
        padding: 2rem;
        box-shadow: 4px 4px 16px #E1E1E1;
        border-radius: 1rem;
    }
    &__card, &__data{
        display: flex;
        align-items: center;
    }
    &__card{
        width: 360px;
        justify-content: space-between;
        padding: .75rem 1.25rem .75rem .75rem;
        background-color: var(--first-color-lighten);
        box-shadow: 4px 4px 16px #E1E1E1, -2px -2px 16px #FFF;
        border-radius: 2.5rem;
    }
    &__img{
        width: 55px;
        height: 55px;
        border-radius: 50%;
        margin-right: 1rem;
    }
    &__name{
        font-size: var(--normal-font-size);
        color: var(--first-color);
        font-weight: 500;
    }
    &__profession{
        font-size: var(--smaller-font-size);
        color: var(--first-color-light);
    }
    &__social{
        margin: 0 .375rem;
        color: var(--first-color-light);
        transition: .4s;
        
        &:hover{
            color: var(--first-color);
        }
    }
}

/* Class name for the chosen item */
.sortable-chosen{
    box-shadow: 8px 8px 32px #E1E1E1;
}

/* Class name for the dragging item */
.sortable-drag{
    opacity: 0;
}





