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: pink;
    font-family: "Ubuntu", sans-serif;
}


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



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


/*
For every device width.
Because of the media query below this will also affect smaller screen sizes.
*/
header {
    /* temporary css that clarifies how the header element works */
    border: 8px dotted red;
    /* review centering things with css */
    /* centers the text in the titles  */
    text-align: center;
}


/* If the device width is greater than or equal to 800px */
@media (min-width: 800px) {
    header {
        /* increase the padding in the up+down direction why? */
        padding: 2em 0;
        /*Create Space between the titles and the navbar when they get to close on bigger screens*/
        /* why does margin make the box smaller? */
        padding: 0 1em;
        /* todo add spacing!!! spaces the titles and the navbar justify-content: space-evenly; */

        /* Are the 2 lines needed below? yes */
        width: 90%;
        max-width: 800px; /* how to know the size of this? */

    }
}






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

nav ul, .searchform {
    display: flex;
    /* puts the nav links on different lines */
    flex-direction: column; /* not defalut value */
    /* 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;
    /* 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. */
    margin: 0 1em;
}

/* If the device width is greater than or equal to 800px */
@media (min-width: 800px) {
    nav ul, .searchform {
        /* puts the nav links on the same horizonatal line */
        flex-direction: row; /* defalut value */
    }

}



nav li {
    /* temporary css that clarifies how the element works */
    border: 3px solid yellow;
    /* 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;
  border-bottom: 2px solid #1792d2;
}



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