@import "variables/variables.css";

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    height: 100%;
    background-color: var(--gray-900);
    font: normal 16px sans-serif;
}

#header {
    height: 5%;
}

#content {
    min-height: calc(100% - 25%);
}

#footer {
    height: 20%;
    width: 100%;
    position: absolute;
}

.form-container {
    background-color: var(--white);
    color: #35373a;
    border-radius: 20px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}

.hide {
    display: none;
}

.bg-gray-900 {
    background-color: var(--gray-900);
}

.bg-gray-800 {
    background-color: var(--gray-800);
}

.bg-gray-700 {
    background-color: var(--gray-700);
}

.border-gray-600 {
    border-color: var(--gray-600);
}

.border-b-2 {
    border-bottom: 2px solid var(--gray-600);
}

.z-50 {
    z-index: 50;
}

.relative {
    position: relative;
}

.text-white {
    color: var(--white);
}

.text-gray-300 {
    color: var(--gray-300);
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.w-auto {
    width: auto;
}

.h-8 {
    height: 2.5rem;
}

.font-medium {
    font-weight: 500;
}

.text-sm {
    font-size: 1rem;
    line-height: 1.25rem;
}

.rounded-md {
    border-radius: .375rem;
}

/* For devices smaller than 576px */
@media (max-width: 576px) {
    body {
        padding: 0;
    }

    .form-container__size {
        padding: 0;
    }
}