/* 






 */
/* ------ Media Query Basics ----- */
@media media-type and (media-feature-rule) {
    /* CSS rules go here */
}

/* @media screen and (min-width: 600px) {
    body {
        background-color: red;
    }
} */

/* ----- Orientation ----- */
/* @media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
} */

/* ---- Use of pointing devices ---- */
/* @media (hover: hover) {
    body {
        color: rebeccapurple;
    }
}
 */

/* -------------- More complex media queries ---------------- */
/* ---- "and" logic in media queries ---- */
/* @media screen and (min-width: 600px) and (orientation: landscape) {
    body {
        color: blue;
    }
} */

/* --- Or --- */
/* @media screen and (min-width: 600px),
screen and (orientation: landscape) {
    body {
        color: blue;
    }
} */

/* "not" logic in media queries */
/* @media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}
 */
/* Ejemlos Mobile first */
* {
    box-sizing: border-box;
}

body {
    width: 90%;
    margin: 2em auto;
    font:
        1em/1.3 Arial,
        Helvetica,
        sans-serif;
}

a:link,
a:visited {
    color: #333;
}

nav ul,
aside ul {
    list-style: none;
    padding: 0;
}

nav a:link,
nav a:visited {
    background-color: rgba(207, 232, 220, 0.2);
    border: 2px solid rgb(79, 185, 227);
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #333;
    font-weight: bold;
}

nav a:hover {
    background-color: rgba(207, 232, 220, 0.7);
}

.related {
    background-color: rgba(79, 185, 227, 0.3);
    border: 1px solid rgb(79, 185, 227);
    padding: 10px;
}

.sidebar {
    background-color: rgba(207, 232, 220, 0.5);
    padding: 10px;
}

article {
    margin-bottom: 1em;
}

@media screen and (min-width: 40em) {
    article {
        display: grid;
        grid-template-columns: 3fr 1fr;
        column-gap: 20px;
    }

    nav ul {
        display: flex;
    }

    nav li {
        flex: 1;
    }
}

@media screen and (min-width: 70em) {
    main {
        display: grid;
        grid-template-columns: 3fr 1fr;
        column-gap: 20px;
    }

    article {
        margin-bottom: 0;
    }

    footer {
        border-top: 1px solid #ccc;
        margin-top: 2em;
    }
}

/* -------------  Do you really need a media query? ------------------ */

.grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid li {
    border: 1px solid #666;
    padding: 10px;
}