@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@import url(color.css);
@import url(navbar.css);
@import url(table.css);
@import url(checkbox_radio.css);

body {
    font-family: 'Inter';
    margin: 0;
    background-color: var(--background);
    color: var(--foreground);
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo {
    font-family: 'Space Grotesk';
}

.icon {
    color: var(--foreground);
    height: 24px;
    width: 24px;
}

.gradient {
    background-image: var(--gradient);
}

.glass {
    background-color: var(--glass);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--box-shadow);
}

.signin {
    min-height: calc(100vh - 56px);
}

.my-container {
    background-color: var(--background);
    /*border: 1px solid var(--border);*/
    border-radius: 1rem;
}

.my-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--box-shadow);
}

.my-preview {
    background-color: var(--background);
    border-radius: 1rem;
    box-shadow: var(--box-shadow);
}

.my-preview .preview-container {
    background-color: var(--card);
    border-radius: 0.75rem;
}

a.generic {
    color: var(--accent);
    text-decoration: none;
}

a.button {
    background-color: var(--primary);
    color: var(--primary-foreground);
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow);
}

a.generic:hover {
    text-decoration: underline;
}

a.button:hover {
    filter: brightness(1.2);
    text-decoration: none;
}

a.button:active {
    filter: brightness(1);
}

button {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

button.primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

button.secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
}

button.destructive {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
}

button.search {
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.25rem 0.25rem;
    line-height: 1;
}

button:hover {
    filter: brightness(1.2);
}

button:active {
    filter: brightness(1);
}

.search-row {
    display: flex;
    gap: 0.25rem;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    z-index: 2;
    border-radius: 1rem;
    padding: 0.5rem;
}

.dropdown-content a {
    display: block;
    color: var(--foreground);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.dropdown-content a:hover {
    background-color: var(--muted);
    color: var(--muted-foreground);
    filter: brightness(1);
}

.dropdown:hover .dropdown-content {
    display: block;
}

input,
select {
    background-color: var(--input);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: var(--box-shadow);
    padding: 0.25rem 0.75rem;
    outline: none;
}

input:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--ring);
}

footer {
    font-family: 'Space Grotesk';
    background-color: var(--background);
    border-top: 1px solid var(--border);
}