.angercode-countdown
{
    
    float       : right;
    width       : 30%;
    max-width   : 200px !important;
    border-left : 1px solid #ccc;
    margin      : 0 20px !important;
    padding     : 20px !important;
    
    span
    {
        display    : block;
        width      : 100%;
        text-align : center;
    }
    
    span.angercode-only
    {
        font-size : 0.9rem;
    }
    
    span.angercode-units
    {
        font-size : 4rem;
        color     : var(--accent-color-lilac);
    }
    
    span.angercode-event-title
    {
        font-size   : 1.2rem;
        font-weight : bold;
        margin-top  : 1rem;
    }
    
    a.angercode-event-link
    {
        display          : block;
        position         : relative;
        margin           : 1rem auto 0;
        text-align       : center;
        border-radius    : var(--default-border-radius);
        background-color : var(--accent-color-lilac);
        color            : var(--button-text-color) !important;
        padding          : 5px 20px;
        transition       : var(--default-transition);
        text-decoration  : none;
        &:hover {
            background-color : var(--accent-color-green);
        }
    }
}

@media screen and (max-width : 800px)
{
    .angercode-countdown {

        background: var(--default-preview-background);
        font-size: 0.9rem;
        float: right;
        width: 33%;
        max-width: 250px !important;
        padding: 10px!important;
        span.angercode-units {
            font-size: 3rem;
        }
        span.angercode-event-title
        {
            font-size: 1.1rem;
            hyphens: auto;
            word-break: break-word;
        }

        a.angercode-event-link
        {
            padding: 5px 10px;
        }

    }
}