/* Teal Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    --primary: #00897b;
    --primary-hover: #00796b;
    --primary-focus: rgba(0, 137, 123, 0.125);
    --primary-inverse: #FFF;
}

/* Teal Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #00897b;
        --primary-hover: #009688;
        --primary-focus: rgba(0, 137, 123, 0.25);
        --primary-inverse: #FFF;
    }
}

/* Teal Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
    --primary: #00897b;
    --primary-hover: #009688;
    --primary-focus: rgba(0, 137, 123, 0.25);
    --primary-inverse: #FFF;
}

/* Teal (Common styles) */
:root {
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);
}

/*-------- Custom page CSS from Pico's "Company" example: ----------*/

/* Global CSS variables */
:root {
    --spacing-company: 3rem;
    --font-weight: 400;
    --border-radius: 0;
}

/* Typography */
h2,
h3,
hgroup> :last-child {
    font-weight: 200;
}

small {
    color: var(--muted-color);
}

/* Header */
.hero {
    background-color: #394046;
    background-image: url("https://images.unsplash.com/flagged/photo-1570854241180-a9c3a5fc10ad?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80");
    /* background-image: url("https://images.unsplash.com/photo-1560813962-ff3d8fcf59ba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80"); */
    background-position: center;
    background-size: cover;
}

header {
    padding: var(--spacing-company) 0;
}

header hgroup> :last-child {
    color: var(--h3-color);
}

header hgroup {
    margin-bottom: var(--spacing-company);
}

/* Nav */
summary[role="link"].contrast:is([aria-current], :hover, :active, :focus) {
    background-color: transparent;
    color: var(--contrast-hover);
}

/* Main */
@media (min-width: 992px) {
    main .grid {
        grid-column-gap: var(--spacing-company);
        grid-template-columns: auto 25%;
    }
}

form.grid {
    grid-row-gap: 0;
}

/* Aside nav */
aside img {
    margin-bottom: 0.25rem;
}

aside p {
    margin-bottom: var(--spacing-company);
    line-height: 1.25;
}

.round {
    border-radius: 5px;
}

.shadow {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.tag {
    margin-bottom: 5px;
    font-size: x-small;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.pix-tl {
    max-width: 30% !important;
}

.pix-tl {
    float: left !important;
    margin-top: 0;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
    margin-left: 0;
}

.disclaimer-footer>p {
    font-size: xx-small;
}