@import "components/Cards/Cards.css";
@import "components/Store/Store.css";
@import "components/Header/Header.css";
@import "components/Login/Login.css";
@import "components/CardHeader/CardHeader.css";

:root {
    --color-dark: #000000;

    --color-light: #FFFFFF;
    --color-background-accent: #f8f8f8;

    --color-accent: #fe7743;
    --color-accent-hover: #d75523;

    --color-success: #4ebd6c;
    --color-success-hover: #1e893a;

    --color-err: #f45959;
    --color-err-hover: #da1f1f;

    --color-primary: #3e586b;
    --color-secondary: #447d9b;
    --color-hover: #273f4f;

    --color-input-stroke: #ccc;
    --color-blue: #0000FF;

    --color-dark-transparent: rgba(0, 0, 0, 0.3);
    --color-dark-transparent-hover: rgba(0, 0, 0, 0.5);

    --shadow: 0 4px 12px rgba(0.2, 0.2, 0.2, 0.2);
    --shadow-hover: 0 4px 12px rgba(0.5, 0.5, 0.5, 0.5);

    --border-radius-small: 8px;
    --border-radius-medium: 16px;
    --border-radius-large: 24px
}


* {
    background-color: revert;
    font-family: Arial, sans-serif;
    font-size: 18px;
    text-align: center;
    color: black;
    text-decoration: none;
}

button {
    border-radius: 20px;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    height: 70px;
    padding: 0 20px;

    border-radius: 30px;
    background-color: whitesmoke;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    box-sizing: border-box;
}

main {
    overflow-y: auto;
    box-sizing: border-box;

    width: 100vw;
    min-height: 100vh;

    padding: 85px 10vw 0 10vw;

    background-color: revert;
}

footer {
    display: block;
    box-sizing: border-box;

    height: 60px;

    flex-shrink: 0;
    background-color: lightgray;

    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}