:root {
    --primary: rgb(0, 0, 0);
    --grey: #888;
    --card-width: 320px;
    --image-width: calc(var(--card-width) / 1.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

main {
    min-height: 100vh;
    background-image: linear-gradient(to bottom right, rgb(62, 73, 161), rgb(64, 117, 146));
    display: flex;
    align-items: center;
    justify-content: center;
}

.card {
    position: relative;
    width: 100%;
    max-width: var(--card-width);
    background-color: rgb(185, 198, 198);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: 0.4s;
}

.card .image {
    position: relative;
    width: 100%;
    width: var(--image-width);
    height: var(--image-width);
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    margin: -8rem auto 1.5rem;
    padding: 0.25rem;
    overflow: hidden;
    background-color: #FFF;
    transition: 0.4s;
}

.card .image img {
    width: 100%;
    border-radius: 50%;
    border: 3px solid var(--primary);
    transition: 0.4s;
}

.card .name {
    color: #000;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    transition: 0.4s;
}

.card .content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: 0.4s;
}

.card .content p {
    color: var(--grey);
    font-size: 1.125rem;
}

.card .content .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
}

.card .content .buttons button {
    appearance: none;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    display: block;
    padding: 0.5rem 1rem;
    min-width: 170px;
    background-color: var(--primary);
    color: #FFF;
    font-size: 1.25rem;
    border-radius: 0.5rem;
    margin: 0 0.5rem;
    transition: 0.4s;
}

.card .content .buttons button:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-0.5rem) scale(1.15);
}

.card:hover {
    --card-width: 480px;
    --image-width: calc(var(--card-width) / 2);
}

.card:hover .image {
    margin-top: -4rem;
    border-radius: 2rem;
}

.card:hover .image img {
    border-radius: 2rem;
}

.card:hover .name {
    margin-bottom: 1.5rem;
}

.card:hover .content {
    max-height: 300px;
    opacity: 1;
    overflow: visible;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(0, 0, 0);
    color: white;
    text-align: center;
}