body {
    /* 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;
}


/* ****************************************************************
Layout
**************************************************************** */



header {
    /* temporary css that clarifies how the header element works    */
    background: pink;
    border: 8px dotted green;
    /* review centering things with css */
    /* centers the text  */
    text-align: center;
    /* increase the padding in the up+down direction why? */
    padding: 2em 0;
    text-align: center;

    display: flex;
    /* spaces the titles and the navbar  */
    justify-content: space-evenly;
    /*Create Space between the titles and the navbar when they get to close */
    /* why does margin make the box smaller? */
    padding: 0 1em;
}

/* If [device width] is less than or equal to 675px */
@media (max-width: 675px) {
    header {
        flex-direction: column;
    }
}


.container {
  width: 90%;
  max-width: 900px;
}

/* ****************************************************************
Typography
**************************************************************** */

.title {
  font-family: "Lora", serif;
  font-weight: 400;
  color: #143774;
  font-size: 2rem;
}



.seccondary-title {
font-weight: 700;
color: #1792d2;
}


.title, .seccondary-title {
  /* Decreases the space between the h1 and h2 elements. header elements by default have space. */
  line-height: 1;
}

/* ****************************************************************
Navigation
****************************************************************   */

nav ul {
    /* temporary css that clarifies how the nav ul element works    */
    border: 5px solid blue;
    /* 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;
    /* Makes it so the navbar doesn't have space on the left and right side  and aligns it to the left. */
    padding: 0;
    /*
    Don't use "justify-content: space-between;" because the space is to big on big screens between navbars
    "witdh:..." won't work because there could be multiple navbar links and it won't properly space it.
    The solution is to use nav li {margin 0 1em} in the  navbar links.
    */

    /* centers the navbar, "text-align: center;" in header doesn't affect it due to the flexbox. */
    justify-content: center;
}





nav li {
    /* temporary css that clarifies how the  element works   */
    border: 2px dotted orange;
    /* add a margin to the left and right side it causes the nav li to be spaced.  */
    /* Why not use padding here ?     */
    margin: 0 1em;
}

nav a  {
    /* removes the underline from links */
    text-decoration: none;
    color: #707070;
    font-weight: 700;
    /* 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;
}



nav form {
    /* uses flexbox and puts the word search + the search form and the search button on one horizintal line */
    display: flex;
    /* temporary css that clarifies how the elements works. Why does "nav li" not create a green border?     */
    border: 3px solid green;
}