.badges-banner {
    position: fixed;
    bottom: 66px;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, hsl(0, 0%, 14%, 0), #000000 70%);
    padding: 40px 120px;
    z-index: 10000000000;
    max-height: 60vh;
    overflow-y: auto;
}

.badges-banner p.title {
    font-size: 54px;
    font-weight: 600;
    margin-bottom: 16px;
}

.badges-banner .content {
    color: #FFFFFF;
    font-size: 20px;
    font-family: 'proxima-nova';
    padding-top: 160px;
}

.guest-badges-banner .content { 
    padding-top: 160px;
}

.guest-badges-banner.minimized .content {
    padding: 16px 0 0 0;
}

.guest-badges-banner .content a,
.guest-badges-banner .content .guestJoin {
    color: var(--collection-color);
}

.guest-badges-banner .content .guestJoin {
    text-decoration: underline;
    cursor: pointer;
}

.badges-banner p.title span {
    color: #6E6E6E;
}

.user-badges-banner .proof-link {
    color: #6C5EFF;
    font-weight: 700;
    text-decoration: underline;
}

.user-badges-banner .requirement {
    margin-bottom: 8px;
}

.user-badges-banner .requirement::before {
    --dimension: 15px;
    content: '';
    border: 4px solid #6C5EFF;
    border-radius: 3px;
    width: var(--dimension);
    min-width: var(--dimension);
    max-width: var(--dimension);
    height: var(--dimension);
    min-height: var(--dimension);
    max-height: var(--dimension);
    display: inline-block;
    margin-right: 8px;
    position: relative;
    bottom: -4px;
}

.user-badges-banner .requirement.done::before {
    display: none;
}

.user-badges-banner .requirement .checkmark {
    display: none;
}

.user-badges-banner .requirement.done .checkmark {
    display: inline-block;
    position: relative;
    top: 5px;
    color: #6C5EFF;
}

.user-badges-banner p:last-of-type {
    margin-top: 20px;
}

.user-badges-banner .requirement span {
    font-weight: 700;
}

.user-badges-banner .badge-title {
    font-weight: 900;
    margin-bottom: 8px;
    margin-top: 16px;
    text-transform: uppercase;
}

.user-badges-banner {
    padding-top: 140px;
    background: linear-gradient(180deg, hsl(0, 0%, 14%, 0), #000000 40%);
    border-bottom: 1px solid #6E6E6E;
}

.guest-badges-banner {
    border-bottom: 1px solid #6E6E6E;
}

.user-badges-banner.multiple-badges {
    background: linear-gradient(180deg, hsl(0, 0%, 14%, 0), #000000 18%);
    padding-top: 80px;
}

.user-badges-banner .content {
    padding-top: 0;
}

.user-badges-banner.minimized .title,
.guest-badges-banner.minimized .title {
    font-size: 32px;
}

.guest-badges-banner.minimized p:not(.title) {
    display: none;
}

.badges-banner:not(.minimized) .title span.hover {
    display: none;
}

.badges-banner.minimized .title span.dismiss {
    display: none;
}

.user-badges-banner.minimized .badges-info {
    display: none;
}

.user-badges-banner.minimized,
.guest-badges-banner.minimized {
    padding-top: 0;
    padding-bottom: 0;
    background: #000000;
}

.user-badges-banner .hover.mobile {
    display: none;
}

.reading.collection.advanced {
    padding-top: 40px !important;
}

.reading.collection.advanced.banner-for-users {
    padding-bottom: 200px !important;
}

.user-badges-banner .work-question {
    font-size: 16px;
    margin-left: 35px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-weight: 600;
}

.user-badges-banner .work-description {
    font-size: 16px;
    margin-left: 35px;
}

.user-badges-banner .work-description span {
    font-weight: 600;
}

.user-badges-banner .work-link {
    color: #FFFFFF;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 600px) {
    .reading.collection.advanced.guest {
        padding-bottom: 450px !important; 
        padding-bottom: 50px !important;
    }

    .user-badges-banner .requirement::before {
        --dimension: 10px;
        margin-right: 6px;
    }

    .badges-banner {
        bottom: 50px;
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 20px;
        background: linear-gradient(180deg, hsl(0, 0%, 14%, 0), #000000 10%);
    }

    .badges-banner p.title {
        font-size: 40px;
    }

    .badges-banner .content {
        font-size: 16px;
    }

    .user-badges-banner.minimized .title {
        font-size: 18px;
    }

    .user-badges-banner .hover.mobile {
        display: inline-block;
    }

    .user-badges-banner .hover.desktop {
        display: none;
    }
}