:root {
    --background-color: #F75EBA;
    --semi-transparent-white: #C4E4F3;
    --drink-color: #ce3333;
    --drink-shadow: #96a6ad;
    --media-background: #635389;
    --media-transparent: #292d2f;
    --media-drink: #004110;
    --media-shadow: #ffffff;
}

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

.content {
    position: relative;
    margin: auto;
    display: block;
    margin-top: 10%;
    margin-bottom: 10%;
    width: 37.5rem;
    height: 37.5rem;
    background: var(--background-color);
}

.cup {
    position: absolute;
    top: 9.375rem;
    left: 10.938rem;
    height: 15.625rem;
    width: 13.75rem;
    /* border: solid white; */
}

.cup::before {
    content: "";
    position: absolute;
    height: 12.5rem;
    width: 15.625rem;
    background: linear-gradient(to bottom, var(--semi-transparent-white), var(--semi-transparent-white) 40%, var(--drink-color) 10%);
    clip-path: polygon(10% 100%, 90% 100%, 100% 0, 0 0);
}

.cup::after {
    content: "";
    position: absolute;
    top: -2.813rem;
    width: 15.5rem;
    height: 5rem;
    background: var(--semi-transparent-white);
    border: 0.063rem solid white;
    border-radius: 50%;
}

.cup-bottom {
    position: absolute;
    width: 12.5rem;
    top: 10.625rem;
    left: 1.563rem;
    height: 4.375rem;
    background: var(--drink-color);
    border-radius: 0 0 50% 50%;
}

.cup-bottom::before {
    content: "";
    position: absolute;
    width: 14.125rem;
    height: 3.75rem;
    border-radius: 50%;
    background: var(--drink-color);
    border: 0.063rem solid var(--drink-shadow);
    top: -7.188rem;
    left: -0.875rem;
}

.cup-shadow {
    position: absolute;
    top: 20rem;
    left: 12.375rem;
    width: 18.75rem;
    height: 6.25rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
}

@media only screen and (max-width: 600px) {
    body {
        background-color: var(--media-background);
    }
    .content {
        background-color: var(--media-background);
    }
    .cup::before {
        background: linear-gradient(to bottom, var(--media-transparent), var(--media-transparent) 40%, var(--media-drink) 10%);
    }
    .cup::after {
        background-color: var(--media-transparent);
    }
    .cup-bottom {
        background-color: var(--media-drink);
    }
    .cup-bottom::before {
        background: var(--media-drink);
        border: 0.063rem solid var(--media-shadow);
    }
    .cup-shadow {
        background-color: #ae00ff;
    }
}