body {
    /* increases the pink border to cover the entire screen why? */
    margin: 0;
    /* temporary css that clarifies how the body tag works  */
    /* Only affects the bottom part of the screen and not the header because the header overrides it?
    Is this correct ? */
    background: yellow;
}


h1 {
  font-family: "Lora", serif;
  font-weight: 400;
  color: #143774;
  font-size: 2rem;
  /* Why is this needed + how does it work?
  it seems to decrease the space between the h1 tag + subtitle class */
  margin: 0;

}



.subtitle {
font-weight: 700;
color: #1792d2;
font-size: .75 rem;
}



header {
    background: pink;
    /* review centering things with css */
    /* centers the text  */
    text-align: center;
    /* increase the padding in the up+down direction why? */
    padding: 2em 0;


}


nav ul {
    /* temporary css that clarifies how the nav ul element works  */
    border: 1px solid magenta;
    /* removes the dots in the list for the navbar */
    list-style: none;
    /* uses flexbox for the element and puts it on the same horizintal line */
    display: flex;
    /* centers the navbar using flexbox  */
    justify-content: center;

    /* Makes it so the navbar doesn't have space on the left and right side */
    padding: 0;
    /*
    Don't use "justify-content: space-between;" or witdh...
    because there could be multiple navbar links and it won't work.
    The solution is to use margin in the  navbar links
    */
}

.searchform{
    /* uses flexbox and puts the word search + the search form and the search button on one horizintal line */
    display: flex;

}




nav li {
    /* temporary css that clarifies how the  element works   */
    border: 2px dotted orange;
    /* add margin to the left and right side */
    margin: 0 1em;
}


nav a  {
    /* removes the underline from links */
    text-decoration: none;
    color: #707070;
    font-weight: 700;
}


nav a, .searchform {
    /* temporary css that clarifies how the elements works  */
    border: 3px solid green;
    /* Makes  text bigger to better align with the navbar*/
    font-size: 1.35rem;
}


/*
    hovering works with Mice.
    focusing works with Keyboard. users (or users with screen readers) get the same visual feedback when.
    So when I hover or focus the link changes color
*/
nav a:hover,
nav a:focus {
  color: #1792d2;
}