/** Create dark and light mode styles variables **/
:root {
    --background-color: #ffffff;
    --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #121212;
        --text-color: #ffffff;

        --baltic-blue: hsl(206, 51%, 37%);
        --cerulean: hsl(203, 48%, 44%);
        --alabaster-grey: #d9dcd6ff;
        --yale-blue: #16425bff;
        --sky-blue-light: #81c3d7ff;

        --bulma-primary-h: 206;   /* Hue: 0 (red) */
        --bulma-primary-s: 51%; /* Saturation: 100% */
        --bulma-primary-l: 37%;  /* Lightness: 41% */
    }
}

.tony-hero-section {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background-color: var(--background-color);
}


.project-card {
    color: var(--alabaster-grey);
}

.project-card:hover {
    background-color: var(--yale-blue);
    color: var(--sky-blue-light);
    transition: background-color 0.3s, color 0.3s;
    
}