@charset "utf-8";
/* CSS Document */

body {
  font-family: "Philosopher", sans-serif;
}

div {
    margin: 5px;
    padding: 5px;
    border-style: solid;
    border-color: brown;
    background-color: darksalmon;
    border-radius: 5px;
    height: auto;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style-type: none;
    background-color: black; 
    text-align: center;
    padding: 20px;
    margin: 20px;
}

a {
    font-size: larger;
    text-decoration: none;
    color: white;
}

a:hover {
    color: black;
}

li:hover {
    background-color: white;
    color: black;
}

li:hover > a {
    color: black;
}

footer {
    padding: 10px;
    border-radius: 5px;
    background-image: linear-gradient(white, rgb(216, 123, 47));
}

@media screen and (max-width: 600px) {
  /* flex mode */
  /* modo pantalla de mòvil estrecho. divs, en columnas */
    article {
        display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox; /* TWEENER - IE 10 */
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }

    ul {
        display: flex;
        flex-direction: column;
    }
}

@media screen and (min-width: 600px) {
  /* grid mode */
  /* modo pantalla de ordenador o móvil apaisado, en filas */
    article {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: auto;
        }
  
    .item1 {
        grid-row-start: 1;
        grid-row-end: 1;
        grid-column-start: 1;
        grid-column-end: 1;
        }

    .item2 {
        grid-row-start: 1;
        grid-row-end: 1;
        grid-column-start: 2;
        grid-column-end: 2;
        }

    .item3 {
        grid-row-start: 1;
        grid-row-end: 1;
        grid-column-start: 3;
        grid-column-end: 3; 
        }
    
    ul {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

}