@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

:root {
    --pico-font-family: "Montserrat", sans-serif;
    --pico-font-size: 95%;
    --panton-primary-50: #eff6ff;
    --panton-primary-100: #dceafd;
    --panton-primary-200: #c0dbfd;
    --panton-primary-300: #95c5fb;
    --panton-primary-400: #62a6f8;
    --panton-primary-500: #3e84f3;
    --panton-primary-600: #3e84f3;
    --panton-primary-700: #3e84f3;
    --panton-primary-800: #2042ad;
    /*logo color*/
    --panton-primary-900: #203c8a;
    --panton-primary-950: #182553;
}

[data-theme="light"],
:root:not([data-theme="dark"]) {
    --pico-color: var(--panton-primary-950);
    --pico-primary: var(--panton-primary-900);
    --pico-primary-hover: var(--panton-primary-700);
    --pico-primary-focus: var(--panton-primary-700);
}

/* Dark color scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --pico-color: var(--panton-primary-50);
        --pico-primary: var(--panton-primary-500);
        --pico-primary-hover: var(--panton-primary-400);
        --pico-primary-focus: var(--panton-primary-400);
    }
}

/* Dark color scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
    --pico-color: var(--panton-primary-50);
    --pico-primary: var(--panton-primary-500);
    --pico-primary-hover: var(--panton-primary-400);
    --pico-primary-focus: var(--panton-primary-400);
}

article {
    padding: 5%;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--pico-primary);
}

footer {

}

/* Mobile (Portrait) */
.responsive-logo {
    width: 80%;
    max-width: 80%;
    margin: 5rem auto;
    color: var(--pico-primary)
}

/* Landscape */
@media (min-width: 600px) and (orientation: landscape) {
    .responsive-logo {
        width: 50%;
        max-width: 50%;
        margin: 5rem auto;
        color: var(--pico-primary)
    }
}