* {
    margin: 20px;
}

body{
    background-color: var(--lavenderGrey);
}

body,h1,h2,h3,h4,h5,h6 {
    font-family: 'Barlow Semi Condensed', sans-serif;
}

:root {
    --deepPurple: #242038;
    --slateBlue: #725AC1;
    --midBluePurp: #8D86C9;
    --lavenderGrey: #CAC4CE;
    --linen: #F7ECE1;
}

.header {
    padding: 1rem;
    background-color: var(--midBluePurp);
    color: white;
    text-align: center;
}

.h2-mood-text {
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.h4-img-text {
    text-align: center;
}

.emoji-row-1, .emoji-row-2 {
    padding-top: 5rem;
}

.icon-large {
    font-size: 400%;
}

.icon-med {
    font-size: 300%;
}

.custom-btn-details, .custom-btn-like, .custom-btn-submit {
    background-color: var(--midBluePurp);
    padding: 10px;
    border-radius: 20px;
}

.custom-btn-details:hover, .custom-btn-like:hover, .custom-btn-submit:hover {
    background-color: var(--slateBlue);
}

.custom-btn {
    background-color: var(--midBluePurp);
    margin-top: 5rem;
    max-width: 20%;
    border-radius: 10px;
}

.custom-btn:hover {
    background-color: var(--slateBlue);
}

.happy, .sad, .angry, .loving, .silly, .cheerful, .motivated, .sleepy, .try-again{
    opacity: 50%;
}

.happy:hover, .sad:hover, .angry:hover, .loving:hover, .silly:hover, .cheerful:hover, .motivated:hover, .sleepy:hover, .try-again:hover {
    opacity: 100%;
}


.opacityMax{
    opacity: 100%;
}

.card {
    margin: 40px;
    background-color: var(--linen);
    box-shadow: 10px 10px 5px #242038;
}

.card-divider {
    text-align: center;
    background-color: var(--midBluePurp);
}