.global-padding
{
    padding-left: 20rem;
    padding-right: 20rem;
}

.flex-center
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-input
{
    width: 100%;
    height: calc(var(--spacing) * 14);
    padding: calc(var(--spacing) * 4);
    border-color: #d1d5db;
    border-style: solid;
    border-width: 1px;
    border-radius: var(--radius-xs);
}

.main-input:hover
{
    border-color: #6b7280;
}

.btn-primary
{
    color: white;
    background-color: #4299e1;	
    font-weight: 500;
    font-size: var(--text-sm);
    border-radius: .25rem;
    margin: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    padding-inline: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 2);
    margin-inline-end: calc(var(--spacing) * 2);

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
}

.btn-primary:hover
{
    background-color: #2b6cb0;
}

.btn-main
{
    color: var(--color-white);
    background-color: var(--color-black);
    cursor: pointer;
    width: 24rem;
    height: calc(var(--spacing) * 12);
    margin: calc(var(--spacing) * 4);
    margin-top: calc(var(--spacing) * 16);
}

.btn-main:hover
{
    background-color: #1e3a8a;
}

.animated
{
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
}