:root {
    color-scheme: dark;
}

html,
body {
    font-family: 'Inter', 'Nunito Sans', 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #111827;
}

a {
    color: #60a5fa;
    transition: color 120ms ease-in-out;
}

a:hover {
    color: #3b82f6;
}

button {
    cursor: pointer;
}

.focus-ring {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.upload-icon {
    width: 3.5rem;
    height: 3.5rem;
}

.mb-tight {
    margin-bottom: 14px;
}

.page-body-pad {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (min-width: 640px) {
    .page-body-pad {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

.page-container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .page-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .page-container {
        width: 75%;
    }
}

@media (min-width: 1024px) {
    .page-container {
        width: 66.666667%;
    }
}

@media (min-width: 1280px) {
    .page-container {
        width: 50%;
    }
}

.card-pad-lg {
    padding: 1.5rem;
}

@media (min-width: 640px) {
    .card-pad-lg {
        padding: 2rem;
    }
}

.card-pad-md {
    padding: 1rem;
}

@media (min-width: 640px) {
    .card-pad-md {
        padding: 1.5rem;
    }
}