:root {
    --clr-primary-200: #f3eed9;
    --clr-primary-400: #824936;

    --clr-neutral-100: #fff;
    --clr-neutral-900: #212121;

    --ff-primary: "Roboto", sans-serif;
    --ff-accent : "Playfair Display", serif;
}


*,
*::before,
*::after {
    box-sizing: border-box;
    padding   : 0;
    margin    : 0;
}


body {
    font-family: var(--ff-primary);
    font-weight: 400;
    font-size  : 1.3125rem;
    line-height: 1.6;
}

body,
h1,
h2,
h3,
p {
    margin: 0;
}

h1,
h2,
h3 {
    color      : var(--clr-primary-400);
    font-family: var(--ff-accent);
    font-weight: 900;
    line-height: 1;
}

h2,
h3,
p {
    margin-bottom: 1em;
}

img {
    display  : block;
    max-width: 100%;
}

.text-center {
    text-align: center;
}

header,
section {
    padding: 4rem 0;

    @media (min-width: 40em) {

        header,
        section {
            padding: 7rem 0;
        }
    }
}

.container {
    margin-inline: auto;
    width        : min(90%, 70.5rem);
}

.split {
    display       : flex;
    flex-direction: column;
}

@media (min-width: 40em) {
    .split {
        flex-direction: row;
    }

    .split>* {
        flex-basis: 100%;
    }

    .split>*+* {
        margin-left: 2em;
    }
}

.container--narrow {
    max-width: 34rem;
}

.bg-light {
    background-color: var(--clr-primary-200);
}

.bg-primary {
    color           : var(--clr-neutral-100);
    background-color: var(--clr-primary-400);
}

.bg-dark {
    color           : var(--clr-neutral-100);
    background-color: var(--clr-neutral-900);
}

.bg-primary h2,
.bg-dark h2 {
    color: var(--clr-primary-200);
}



/* Nav Styling */


/* ............/navbar/............ *

/* desktop mode............/// */

.navbar input[type="checkbox"],
.navbar .hamburger-lines {
    display: none;
}

.navbar {
    box-shadow: 0px 5px 10px 0px #aaa;
    position  : fixed;
    width     : 100%;
    background: #fff;
    color     : #000;
    opacity   : 0.85;
    height    : 50px;
    z-index   : 12;
}

.navbar-container {
    display        : flex;
    justify-content: space-between;
    height         : 64px;
    align-items    : center;
}

.menu-items {
    order  : 2;
    display: flex;
}

.menu-items li {
    list-style   : none;
    margin-left  : 1.5rem;
    margin-bottom: 0.5rem;
    font-size    : 1.2rem;
}

.menu-items a {
    text-decoration: none;
    color          : #444;
    font-weight    : 500;
    transition     : color 0.3s ease-in-out;
}

.menu-items a:hover {
    color     : #117964;
    transition: color 0.3s ease-in-out;
}

.logo {
    order        : 1;
    font-size    : 2.3rem;
    margin-bottom: 0.5rem;
}


/* ......../ media query /.......... */

@media (max-width: 768px) {
    .navbar {
        opacity: 0.95;
    }

    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines {
        display: block;
    }

    .navbar-container {
        display : block;
        position: relative;
        height  : 64px;
    }

    .navbar-container input[type="checkbox"] {
        position: absolute;
        display : block;
        height  : 32px;
        width   : 30px;
        top     : 20px;
        left    : 20px;
        z-index : 5;
        opacity : 0;
    }

    .navbar-container .hamburger-lines {
        display        : block;
        height         : 23px;
        width          : 35px;
        position       : absolute;
        top            : 17px;
        left           : 20px;
        z-index        : 2;
        display        : flex;
        flex-direction : column;
        justify-content: space-between;
    }

    .navbar-container .hamburger-lines .line {
        display      : block;
        height       : 4px;
        width        : 100%;
        border-radius: 10px;
        background   : #333;
    }

    .navbar-container .hamburger-lines .line1 {
        transform-origin: 0% 0%;
        transition      : transform 0.4s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2 {
        transition: transform 0.2s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3 {
        transform-origin: 0% 100%;
        transition      : transform 0.4s ease-in-out;
    }

    .navbar .menu-items {
        padding-top   : 100px;
        background    : #fff;
        height        : 100vh;
        max-width     : 300px;
        transform     : translate(-150%);
        display       : flex;
        flex-direction: column;
        margin-left   : -40px;
        padding-left  : 50px;
        transition    : transform 0.5s ease-in-out;
        box-shadow    : 5px 0px 10px 0px #aaa;
    }

    .navbar .menu-items li {
        margin-bottom: 1.5rem;
        font-size    : 1.3rem;
        font-weight  : 500;
    }

    .logo {
        position : absolute;
        top      : 5px;
        right    : 15px;
        font-size: 2rem;
    }

    .navbar-container input[type="checkbox"]:checked~.menu-items {
        transform: translateX(0);
    }

    .navbar-container input[type="checkbox"]:checked~.hamburger-lines .line1 {
        transform: rotate(35deg);
    }

    .navbar-container input[type="checkbox"]:checked~.hamburger-lines .line2 {
        transform: scaleY(0);
    }

    .navbar-container input[type="checkbox"]:checked~.hamburger-lines .line3 {
        transform: rotate(-35deg);
    }