:root{
    /*White Theme*/
    --background-white: #dbdbdb;
    --background-accent: lightgreen;
    --titles-white: darkgreen;
    --text-white: black;
    --accent-white: rgb(0, 158, 0);
    --hover-white: darkgreen;

    --text-secondary: #cccccc;

    --products-background: white;
    --products-border-hover: darkgreen;

    /*Navbar colors*/
    --navbar-background-white: white;
    --navbar-buttons: invert(0) brightness(1);
    --navbar-input-background: white;
    --navbar-input-color: #121212;

    /*Footer colors*/
    --footer-background-white: lightgreen;

    /*Generic button colors*/
    --button-background-white: #f0f0f0;
    --button-hover-white: darkgreen;
    --button-text-white: darkgreen;
    --button-text-hover-white: white;

    --button-background: lightgreen;
    --button-text: darkgreen;
    --button-background-hover: darkgreen;
    --button-text-hover: white;

    --filter-button: invert(1) brightness(1);

    /*Dark theme*/
    --background-dark: #121212;
    --titles-dark: lightgreen;
    --text-dark: white;
    --accent-dark: darkgreen;
    --hover-dark: darkgreen;

    /*Navbar dark theme*/
    --navbar-background-dark: rgb(54, 54, 54);

    /*Footer dark theme*/
    --footer-background-dark: darkgreen;

    /*Generic button dark theme*/
    --button-background-dark: #1f1f1f;
    --button-text-dark: white;

    /*Login/register*/
    --form-background: white;
    --form-button-background: #1f1f1f;
    --form-button-background-hover: #f0f0f0;
    --form-submit-button-text:#f0f0f0;
    

    /*debug border*/
    --debug: dotted red 2px;
}

*{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

body {
    margin: 0;
    background-color: var(--background-white);
    color: var(--text-black);
    background: linear-gradient(45deg,var(--background-white),var(--background-accent),var(--background-white));
}
a{
    color: var(--text-white);
}

/*Custom things*/

.zinpeaWord{
    font-weight: bold;
    color: var(--titles-white);
}

/* Dark theme overrides */
body.dark-theme {
    --background-white: #121212;
    --background-accent: darkgreen;
    --titles-white: rgb(78, 189, 78);
    --text-white: white;
    --accent-white: rgb(78, 189, 78);
    --hover-white: darkgreen;

    /* Navbar */
    --navbar-background-white: #1f1f1f;
    --navbar-buttons: invert(1) brightness(2);
    --navbar-input-background: #3d3c3c;
    --navbar-input-color: white;

    /* Footer */
    --footer-background-white: darkgreen;

    /* Buttons */
    --button-background-white: #1f1f1f;
    --button-text-white: white;

    --button-background: darkgreen;
    --button-text: white;
    --button-background-hover: rgb(78, 189, 78);
    --button-text-hover: black;

    --filter-button: invert(0) brightness(1);

    /*Products*/
    --products-background: #1f1f1f;
    --products-border-hover: rgb(78, 189, 78);

    /*Login/register*/
    --form-background: #1f1f1f;
    --form-button-background: #3d3c3c;
    --form-button-background-hover: #1f1f1f;
    --form-submit-button-text: #f0f0f0;
}

.cursorPointer{
    cursor: pointer;
}


/*Animations*/

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes shake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-5px, 0); }
    50% { transform: translate(5px, 0); }
    75% { transform: translate(-5px, 0); }
    100% { transform: translate(0, 0); }
}

@keyframes shakeVertical {
    0% { transform: translate(0, 0); }
    25% { transform: translate(0, -5px); }
    50% { transform: translate(0, 5px); }
    75% { transform: translate(0, -5px); }
    100% { transform: translate(0, 0); }
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes showMenu {
    from { left: -100%; }
    to { left: 0; }
}

@keyframes hideMenu {
    from { left: 0; }
    to { left: -100%; }
}


@keyframes growMenu {
    from {
        height: 0px;
    }
    to {
        height: 60px;
    }
}

@keyframes shrinkMenu {
    from {
        height: 60px;
    }
    to {
        height: 0px;
    }
}


/*Mobile*/

.onMobile {
    display: none !important;
}

@media (max-width: 768px) {
    .onPC {
        display: none !important;
    }

    .onMobile {
        display: flex !important;
    }
}