:root {
    --pico-font-family-sans-serif: "Montserrat", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);

    --capalo-curved-corners: 25px 0px 25px 0px;
    --capalo-round-corners: 25px;
    --pico-border-radius: var(--capalo-round-corners);
}

/* NOTE: switching to dark theme is not currently supported */
[data-theme=light],
:root:not([data-theme=dark]) {
    --capalo-dark-grey: #283941;
    --capalo-forest-green: #678e7c;
    --capalo-sky-blue: #4591a3;
    --capalo-greenish-light-grey: #f5f7f4;
    --capalo-forest-sky-gradient: linear-gradient(45deg, var(--capalo-forest-green) 0%, var(--capalo-sky-blue) 100%);
    --capalo-red: #e71c2a;

    --pico-background-color: var(--capalo-greenish-light-grey);
    --pico-color: var(--capalo-dark-grey);
    --pico-text-selection-color: var(--capalo-sky-blue);
    --pico-primary: var(--capalo-dark-grey);
    --pico-primary-background: var(--capalo-dark-grey);
    --pico-primary-underline: var(--capalo-dark-grey);
    --pico-primary-hover: var(--capalo-forest-green);
    --pico-primary-hover-background: var(--capalo-forest-green);
    --pico-primary-focus: var(--capalo-forest-green);
    --pico-secondary: var(--capalo-forest-green);

    --pico-form-element-background-color: var(--capalo-greenish-light-grey);
    --pico-form-element-border-color: var(--capalo-dark-grey);
    --pico-form-element-color: var(--capalo-dark-grey);

}

header {
    background-color: var(--capalo-dark-grey);
    color: var(--capalo-greenish-light-grey);
}

header a {
    color: var(--capalo-greenish-light-grey);
    font-weight: 500;
}

header a:hover {
    color: var(--capalo-forest-green);
    text-decoration: none;
}


#tech-leaf {
    width: 200px;
    margin: 20px auto;
}

@media (max-width: 768px) {
    #tech-leaf {
        width: 150px;
    }
}

@media (max-width: 576px) {
    #tech-leaf {
        width: 100px;
    }
}