#conversion-form
{
    max-width: 600px;
}

#format
{
    font-size: var(--font-size-m);
    margin: 0 0 40px;
    max-width: 20rem;
}

#drop-area
{
    margin-bottom: var(--space-l);
    padding: 40px 20px;
    text-align: center;
    transition: 200ms background;
}

#drop-area.highlight
{
    background: var(--colour-neutral-500);
}

#or
{
    font-size: .8em;
    margin: 20px auto;
    max-width: 140px;
    position: relative;
    text-transform: uppercase;
}

#or,
#drop-images-here
{
    transition: 200ms opacity;
}

#or::before
{
    content: "";
    display: inline-block;
    height: 2px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: -1;
}

#or span
{
    padding: 6px;
}

#drop-images-here
{
    margin-bottom: 0;
    transition: 200ms color;
}

#drop-area.highlight #drop-images-here
{
    color: var(--text-primary);
}

#drop-area.highlight p:not(#drop-images-here),
#drop-area.highlight .button
{
    opacity: 0;
}

#custom-quality
{
    display: none;
    margin: 40px auto 0 auto;
}

#custom-quality .label
{
    display: block;
    font-size: .8em;
    margin-bottom: 10px;
}

#quality-range
{
    margin: 0 0 30px 0;
    width: 100%;
}

#quality-description
{
    font-size: .8em;
    margin-bottom: 0;
}

#submit
{
    display: none;
}

#results
{
    display: none;
    margin-bottom: 40px;
}

@media (max-width: 800px)
{

    #results td[data-title="Thumbnail"],
    #results tbody td[data-title="Download"]
    {
        text-align: center;
    }

    #results td[data-title="Thumbnail"]::before,
    #results tbody td[data-title="Download"]::before
    {
        content: "";
    }

    #results tbody td[data-title="Download"]
    {
        padding-bottom: 40px;
    }

    #results tfoot td[data-title="Format"],
    #results tfoot td[data-title="Download"]
    {
        display: none;
    }

}

.thumbnail
{
    display: inline-block;
    height: auto;
    max-width: 80px;
    width: 100%;
}

@media (max-width: 800px)
{

    .thumbnail
    {
        max-width: 200px;
    }

}

#results tfoot td
{
    border-top: 2px solid var(--background-tertiary);
    font-family: var(--font-family-secondary);
}

.download
{
    float: right;
}

#note
{
    font-size: var(--font-size-m);
    margin-top: var(--space-l);
}