/* Colours of the Project

    #9C9FA6   - Grey

    #FAF7F4   - Off White

    #D8CBC4   - Mokka Beige

    #455359   - Sea Green

    #A67153(old)  #6A4C39(new)   - Brown

    #0D0D0D   - Black-Brown */

    /* These fonts are imported from Google Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Lemonada:wght@300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');


    /* This styling is set for the whole project as a deafault */
    body {
        color: #0D0D0D;
        background-color: #D8CBC4;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
    }

    /* Navigaiton styling starts here */
    header {
        padding: 10px 20px 50px 20px;
        text-align: center;
        background: #D8CBC4;
        font-size: 30px;
    }

    #navigation {
        font-family: 'Open Sans', sans-serif;
        font-weight: 500;
        font-size: 100%;
        letter-spacing: 4px;
        color: #0D0D0D;
    }


    #navigation li {
        float: right;
        list-style-type: none;
        margin-right: 30px;
    }

    /* Activates when howering over */
    a {
        text-decoration: none;
        color: inherit;
    }

    a:hover {
        background-color: #6A4C39;
        color: #FAF7F4;
    }

    /* This background colour is here in case the title image does not load, so the title that is in white, is still possible to read */
    #banner-container {
        background-color: #455359;
    }

    #title1 {
        font-family: 'Lemonada', cursive, sans-serif;
        font-weight: 400;
        font-size: 3rem;
        letter-spacing: 0.1em;
        line-height: 90%;
        padding: 120px 50px 50px 50px;
        color: #FAF7F4;
        text-align: right;
    }

    #title1 h2 {
        font-size: 0.9rem;
    }

    /* This banner is recognizable as the project's title image, a mother holding an toddler and pointing to the lifehacks */
    #banner1 {
        height: 500px;
        width: 100%;
        display: block;
        background: url('../images/pexels-tatiana-syrikova-3933395-banner.png') center;
        background-size: cover;
    }

    /* Fixed navigation item that leads to the top of the page */
    .top {
        background: #D8CBC4;
        opacity: 1;
        position: fixed;
        bottom: 10px;
        right: 5px;
        font-size: 90%;
        letter-spacing: 1px;
        padding: 5px 5px;
    }

    .navigation-menu-heading {
        font-family: 'Open Sans', sans-serif;
        text-align: center;
        padding-top: 20px;
        padding-left: 10px;
        font-weight: 600;
        font-size: 1.5rem;
        letter-spacing: 0.1em;
        line-height: 90%;
    }

    .three-images {
        display: flex;
        justify-content: space-around;
    }

    .three-images img {
        width: 30%;
    }

    /* Lifehacks navigation start here */
    #jump-to-a-lifehack-heading {
        background-color: #D8CBC4;
    }

    #jump-to-lifehack {
        font-size: 1em;
        text-align: left;
        background: #D8CBC4;
        justify-content: center;
        line-height: 200%;
        letter-spacing: 1px;
        padding: 50px;
    }

    /* h2 is for all the main section titles */
    h2 {
        clear: both;
    }

    #work-life {
        padding: 50px 50px 50px 50px;
        clear: left;
        background-color: #FAF7F4;
    }

    #work-life p {
        text-align: left;
    }

    /* Round images in the beginning of each lifehack */
    .medalions img {
        border-radius: 50%;
        width: 300px;
        height: 300px;
        padding: 10px;
        text-align: center;
        margin: auto;
        display: block;
    }

    .column-two {
        columns: 2;
    }

    /*The column-count class will be responsible for adjusting the amount of content colums to different devices*/
    .column-count {
        columns: 3;
    }


    .lifehack {
        padding: 50px 50px 50px 50px;
        background-color: #FAF7F4;
    }

    /* h3 is for each lifehack's heading */
    h3 {
        font-family: 'Lemonada', cursive, sans-serif;
        text-align: center;
    }

    .lifehack div {
        padding: 15px 15px;
        text-align: left;
    }

    /* Visual content block dividers */
    .even-number-hack {
        background-color: #D8CBC4;
    }

    .odd-number-hack {
        background-color: #FAF7F4;
    }

    /* The two large landscape images after the 5th and the 10th lifehacks */
    .free-image {
        padding: 0px;
    }

    .free-image img {
        width: 100%;
        object-fit: contain;
        text-align: center;
        padding: 0px;
    }

    /* The content of the contact section is centralised */
    #contact {
        text-align: center;
        padding: 50px 50px 50px 50px;
    }

    p {
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        text-indent: 30px;
        line-height: 32px;
    }

    /* Contact form */
    input[type=text],
    input[type=email],
    select,
    textarea {
        background-color: #FAF7F4;
        font-family: inherit;
        width: 100%;
        padding: 12px;
        border: none;
        box-sizing: border-box;
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
    }

    input[type=submit] {
        background-color: #6A4C39;
        color: #FAF7F4;
        padding: 12px 20px;
        border: none;
        cursor: pointer;
    }

    input[type=submit]:hover {
        background-color: #6A4C39;
    }

    .container {
        color: #0D0D0D;
        background-color: #D8CBC4;
        padding: 20px;
    }

    #form-response {
        text-align: center;
        padding: 50px;
    }

    /* Social media icons */
    #footer div {
        text-align: left;
        text-indent: 30px;
        padding: 20px;
    }