* {
    box-sizing: border-box;
    transition: all ease 0.6s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

:root {
    /* Kolory */
    --global-white: #F4E8D8;
    --global-whiter: #FAF4EC;
    --global-black: #17100D;
    --accent-color: #baa388;
    --accent-color-2: #7c6750;
    --accent-color-3: #453428;
    --accent-color-4: #a58757;

    /* Text */
    --global-font: "Inter", serif;
    --accent-font: "Berkshire Swash", cursive;

    /* Dimension :3 */
    --global-radius-mobile: 2.5vw;
    --global-padding: clamp(0.75rem, 2vw, 1.5rem);
    --global-radius:  clamp(0.5rem, 1.2vw, 1rem);

    --content-wide: 1200px;
}


/* ---------- Body ---------- */

body {
    font-family: var(--global-font);
    display: flex;
    width: 100%;
    height: fit-content;
    margin: 0;
    padding: 0;

}

#view {
    width: 100%;
    background: var(--global-white);
}

#view.menu-open::after {
    content: "";
    position: fixed;
    top: 200px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(from var(--global-black) r g b / 85%);
    z-index: 1;
}


/* ---------- Header ---------- */

.header {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    height: clamp(70px, 8vw, 110px);
    border-radius: 0 0 var(--global-radius) var(--global-radius);
    background: linear-gradient(0deg, var(--accent-color-2), var(--accent-color-3));
    border: none;
    padding: 0 var(--global-padding);
}

.header nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--global-padding);
    justify-content: flex-end;
    border: none;
    gap: 0.25rem;
}

.header div {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: center;
}

.header div:first-child {
    justify-content: flex-start;
}


/* ---------- Main ---------- */

.main {
    width: 100%;
    height: fit-content;
    min-height: 100vh;
    padding: var(--global-padding);
    max-width: var(--content-wide); /* Do Przemyślenia */
    margin: 0 auto;
}

/* ---------- Footer ---------- */

.footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 2rem;
    color: var(--global-white);
    padding: 1.25rem var(--global-padding);
    background: var(--accent-color-3);
}