:root {
    /* Colors */
    --pond-green: #0F4D3B;
    --frog-green: #1E7363;
    --lily-green: #7A9A4C;
    --lily-pink: #FFD6E0;
    --lily-mauve: #8E6A86;
    --paper-cream: #FFF5C9;
    --paper-white: #F6F5F2;
    
}


body {
    background: linear-gradient(135deg, var(--pond-green), var(--frog-green));
    max-width: 800px;
    min-height: 100vh;
    padding: 0px 1.5rem;
    margin: auto;
    color: var(--paper-cream)
}

a {
    font-weight: bold;
}

a:link {
    color: var(--lily-pink)
}

a:visited {
    color: var(--paper-cream)
}

h1 {
    font-size: 4rem;
    /* font-size: 6rem; */
    color: var(--lily-green);
    text-shadow: 2px 0 var(--paper-cream), -2px 0 var(--paper-cream), 0 2px var(--paper-cream), 0 -2px var(--paper-cream),
        1px 1px var(--paper-cream), -1px -1px var(--paper-cream), 1px -1px var(--paper-cream), -1px 1px var(--paper-cream);
}

header a {
    color: black;
    text-decoration: none;
}

h1,
h2,
h3 {
    text-align: center;
}

h2 {
    font-size: 2.5rem;
    margin-top: 5rem;
    margin-bottom: 4rem;
}

h3 {
    font-size: 2rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

main {
    max-width: 800px;
    margin: 0 auto;
}

main p {
    text-align: center;
}

footer {
    margin: 3rem auto 1rem auto;
    text-align: center;
}

ul.cards {
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 0;
    margin-top: 3rem;
}

ul.cards li,
.card {
    width: 230px;
    text-align: center;
    border: var(--lily-green) solid .4rem;
    border-radius: 1rem;
    /* padding: 1rem; */
    background: linear-gradient(45deg, var(--paper-cream), #F6F5F2);
}

ul.cards li a,
.card a {
    display: block;
    padding: 1rem;
    height: 100%;
}

ul.cards a div,
.card div {
    background-image: url("./media/img/comic-placeholder.webp");
    background-size: contain;
    background-position: center;
    border-radius: 100px;
    background-repeat: no-repeat;
    height: 200px;
}

ul.cards a div.icon-download {
    background-image: url("./media/img/icon-download.webp");
}

ul.cards a div.icon-instagram {
    background-image: url("media/img/icon-instagram.webp");
}

.cards a:link {
    color: var(--pond-green);
}

.cards a:visited {
    color: var(--frog-green)  
}

.cards a {
    text-decoration: none;
}

div.cover {
    max-height: 50vh;
    max-width: 800px;
    aspect-ratio: 1 / 1.414;
    background-size: cover;
        /* border: var(--lily-green) solid .4rem; */

    box-shadow: 0 0 .5rem var(--lily-green);
    border-radius: .5rem;
    margin: 2rem auto 2rem auto;
}

div.cover.ampoule {
    background-image: url("media/img/cover-ampoule.webp");
}

div.cover.mamec-1 {
    background-image: url("media/img/cover-mamec-1.webp");
}

div.cover.mamec-2 {
    background-image: url("media/img/cover-mamec-2.webp");
}

div.cover.transmasc {
    background-image: url("media/img/cover-transmasc.webp");
}

div.cover.fatigue {
    background-image: url("media/img/cover-fatigue.webp");
}

div.thumbnail.ampoule {
    background-image: url("media/img/thumbnail-ampoule.webp");
}

div.thumbnail.ballade {
    background-image: url("media/img/thumbnail-ballade.webp");
}

div.thumbnail.mamec-1 {
    background-image: url("media/img/thumbnail-mamec-1.webp");
}

div.thumbnail.mamec-2 {
    background-image: url("media/img/thumbnail-mamec-2.webp");
}

div.thumbnail.fatigue {
    background-image: url("media/img/thumbnail-fatigue.webp");
}

@media (min-width: 36rem) {
    h1 {
        font-size: 6rem;
    }
}