@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@200;300;400;500;700;800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {

    --body-font: 'Ubuntu', sans-serif;
    --normal-font-size: 1rem;
    --smaller-font-size: .813rem;
}

*,::before,::after { box-sizing: border-box; }
body { 
    margin: 0; 
    padding: 0; 
    font-family: var(--body-font); 
    background-image: url('img/ff-bg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
h1 { margin: 0; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }

.drop, .drop-container { display: grid; }
.drop { height: 100vh; align-items: center; justify-content: center; }
.drop-container { 
    row-gap: 1rem; 
    padding: 2rem; 
    box-shadow: 4px 4px 16px #F9BB6E;
    background: transparent;
    backdrop-filter: blur(20px); 
}
.drop-card, .drop-data { display: flex; align-items: center; }
.drop-card { 
    width: 360px; 
    justify-content: space-between; 
    padding: 0.75rem 1.25rem .75rem .75rem; 
    background-color: transparent;
    backdrop-filter: blur(10px); 
    box-shadow: 4px 4px 16px #4B3007, -2px -2px 16px #2B2C23;
    border-radius: 2.5rem; 
}
.drop-img { width: 55px; height: 55px; border-radius: 50%; margin-right: 1rem; }
.drop-name { font-size: var(--smaller-font-size); color: #F8F8FC; font-weight: 500; }
.drop-profession { font-size: var(--smaller-font-size); color: #F6C07A; }
.drop-social { margin: 0 .375rem; color: #F6C07A; transition: .4s; }
    .drop-social:hover { color: #FFD700; }
.sortable-chosen { box-shadow: 8px 8px 32px #E1E1E1; }
.sortable-drag { opacity: 0; }

@media screen and (max-width: 430px) {
    .drop-container { padding: 2rem 1rem; }
    .drop-card { width: 280px; }
    .drop-social { margin: 0.125rem; }
}