body {
        margin: 0;
        padding: 0;
        font-family: "Chiron GoRound TC", sans-serif;
        font-optical-sizing: auto;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background-color: #e5d8d2;
        overflow-y: hidden;
}

header {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 4px;
        background-color: #e5d8d2;
}


#emailIcon {
        width: 86px;
        height: 56px;
}

.logo,
#Logo {
        width: 56px;
        height: 60px;
}

main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 16px;
}

.card {
        background: #e5d8d2;
        border-radius: 35px;
        overflow: hidden;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        width: 350px;
}

#imageHolder {
        position: relative;
}

.animal-img {
        width: 350px;
        height: 350px;
        display: block;
}

.placeholder-image {
        width: 350px;
        height: 350px;
        background-color: #e0e0e0;
        border-radius: 24px 24px 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999999;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
}

.info {
        padding: 24px 24px;
        text-align: center;
}

.name-and-org {
        display: flex;
        justify-content: space-around;
        align-items: center;
}

#data-name,
#data-organization,
#data-type,
#data-gender {
        list-style: none;
        padding: 0;
        margin: 0;
}

#data-name li {
        font-size: 36px;
        font-weight: bold;
        margin: 0 0 8px 0;
        color: #222;
}

#data-organization li {
        font-size: 20px;
        color: #555;
        margin: 0 0 12px 0;
}

.type-gender {
        display: flex;
        justify-content: space-around;
        align-items: center;
}

#data-type li::after {
        content: " • ";
        color: #888;
}

#data-type li.placeholder::after {
        content: "";
}

.placeholder {
        background-color: #e0e0e0;
        border-radius: 12px;
        color: #999999;
        text-align: center;
        margin: 12px auto;
        max-width: 90%;
}

#data-name .placeholder {
        font-size: 36px;
        font-weight: bold;
        padding: 24px 40px;
        color: #000;
}

#data-organization .placeholder {
        font-size: 20px;
        padding: 16px 32px;
}

.type-gender .placeholder {
        display: inline-block;
        font-size: 18px;
        padding: 10px 24px;
        border-radius: 30px;
        margin: 0 12px;
}

.adopt-button {
        display: inline-block;
}

.bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20px;
}

#shuffleButton {
        width: 90px;
        height: 100px;
        cursor: pointer;
}

#data-link,
#data-image {
        display: none;
}