body {
    background: #2c3e50 linear-gradient(to right, #2c3e50, #3498db);
    background-size: cover;
    color: #f8f3ee;
    font-family: "Almarai", sans-serif;
    font-weight: 400;
    font-style: normal;

    > header {
        text-align: center;
        & img {
            filter: drop-shadow(3px 3px 2px rgb(0 0 0 / .7));
        }
    }

    > footer {
        color: rgb(232 232 232 / 0.4);
        display: flex;
        justify-content: center;
    }
}

main h1 {
    text-align: center;
    margin-top: 3em;
    text-shadow: 2px 2px 2px rgb(0 0 0 / .4);
}

nav {
    margin-top: 50px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    & a {
        margin: 0 50px;
        font-weight: 800;
    }
}

#links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    & article {
        background: rgb(0 0 0 / 0.1);
        border-radius: 5px;
        margin: 5px;
        padding: 15px;
        max-width: 400px;
        text-shadow: 1px 1px 1px rgb(0 0 0 / 0.6);
        line-height: 1.2em;
        flex: 1 300px;

        & h2 {
            margin: 0 0 5px 0;
        }

        & figure {
            width: 250px;
            padding: 0;
            margin: auto;
        }

        & figcaption {
            margin: 0;
            font-size: 0.7em;
            text-align: right;
        }

        > footer {
            padding: 5px;
        }

        & ol {
            margin-inline-start: 0px;
            padding-inline-start: 40px;
        }
    }
    
    & article:has(~ article:target) {
        display: none;
    }
    & article:target ~ article {
        display: none;
    }
}

a.amzn {
    display: block;
    margin: auto;
    width: 200px;
    border: 1px solid hsl(28 7% 39%);
    padding: 4px;
    background-color: hsl(0 88% 56%);
    border-radius: 10px;
    text-decoration: none;
    text-shadow: none;
    text-align: center;
    font-weight: 800;
    box-shadow: 2px 2px 2px rgb(0 0 0 / 0.1);
}

a.amzn, a.amzn:active, a.amzn:focus, a.amzn:visited {
    color: hsl(30 60% 98%);
}

a.amzn:hover {
    color: hsl(30 60% 98%);
    background-color: hsl(0 88% 66%);
}