h1 {
    color: red;
    text-align: center;
}
.nav-bar {
    display: flex;
    justify-content: space-evenly;
    padding: 10px;
    margin: 10px 50px 10px 50px;
    border: 2px solid black;
}
#Teal-div, #Third {
    border-radius: 20px;
    text-align: center;
    background-color: aqua;
    padding: 20px 10px 20px 10px;
    margin: 10px 50px 10px 50px;
}
#second, #Forth {
    border-radius: 20px;
    text-align: center;
    background-color: lightgrey;
    padding: 20px 10px 20px 10px;
    margin: 10px 50px 10px 50px;
}
.text-color {
    color: darkblue;

}
a {
    text-decoration: none;
}

img {
    height: 70px;
    width: auto;
}

/*  7. OK, let's draw a border around the whole thing.  While we're at it, let's set the background-color */

/*  8.  Our border is too square.  Can we soften it a bit?  How can we do that? */

/* 9  Let's make a few of these - What if we wanted them to alternate colour?  Hmmm...classes to the rescue!   Notice that .even trumps div     */

/*  10  What if we wanted to target a single div?   ID to the rescue!   #     Let' make the last div have a double border*/

/* 11.  Let's talk padding....then margins!   */

/*12 Hey, would that work on our nav too? 
        First, let's add a border
        Next, let's apply some padding to the nav
        And maybe a tiny bit of margin
        Question - how can we make more room between our anchors?


/* 13.  ok, we can center our text, but how about our img?   Hmmm...images are displayed inline by default...how can we change that?   Let's make our img smaller

/*  14.  Since everything inside of our anchor is now clickable, let's  make our text not underlined.  looks like time to decorate or text! */

/* 15. So, I still want the h1 in my header to be red, but I want all my other h1s to be black.  If only I could target div h1....wait a minute! I can!  */