/* Adds in the google font but atom doesn't recomend using this way  */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

/* This just sets the font styles  - text dec none removes the underlines*/
li, a, button {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #0f0f0f;
    text-decoration: none;

}

bar {
    display: flex;
    /* Puts elements next to one another, not on top */
    justify-content: space-between;
    /* This pushes the left & right items to far edges and adds space between  */
    align-items: center;
    /* Centers everything in the header - horizontally not vertivally */
    padding: 30px 10%;
}

.logo {
    font-family: "Montserrat", sans-serif;
    cursor: pointer;
    /* When hover, shows it can be clicked(remember you tried cross hair)*/
}

.nav_links {
    list-style: none;
    /* Removes bullets */
}

.nav_links li {
    /* targets nav links and each item */
    display: inline-block;
    /* puts all the nav links side by side */
    padding: 0px 20px;
}

/* LINK COLOURS ON HOVER */

.nav_links li a {
    /* Need to target the a's so that the transition colour works */
    transition: all 0.3 ease 0s;
}

.nav_links li a:hover {
    color: #0088a9;
}

/* BUTTON */

button {
    padding: 9px 25px;
    background-color: rgba(174, 0, 197, 0.8);
    color: white;
    /* Needs to be rgba so we can drop the opactiy */
    border: none;
    /* removes border */
    border-radius: 50px;
    /* makes rounded */
    cursor: pointer;
    transition: all 0.3 ease 0s;
}

button:hover {
    background-color: rgba(204, 0, 231, 0.8);
    /* same colour as above but alpha value (last value)makes it darker  */
}