@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --spacing: 1.5rem;
    --body-font: "Poppins", sans-serif;

    --black: #2b2b2b;
    --pale: #FEFDFA;
    --faded: #F5F4EF;
    --stroke: #E7E5E1;
    --blue: #1E70FF;

    --corner: calc(0.7*var(--spacing));
}

html{scroll-behavior: smooth;}

body {
    font-family: var(--body-font);
    font-weight: 400;
    line-height: calc(1.2*var(--spacing));
    color: var(--black);
    background: var(--pale);
    margin-inline: 4%;
}

hgroup ol {
    display: flex;
    flex-direction: row;
    flex-grow: 1fr;
    gap: calc(1.4*var(--spacing));
    justify-content: center;

    background: var(--faded);
    border: var(--stroke) solid 1px;
    border-radius: var(--corner);

    font-size: calc(0.7*var(--spacing));
    font-weight: 450;
    padding: calc(0.6*var(--spacing));
}

hgroup {
    margin-block: calc(0.6*var(--spacing));
    position: sticky;
    top: calc(0.6*var(--spacing));
}

header {
    padding-block: calc(4*var(--spacing));
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: calc(1.2*var(--spacing));
}

h1 {
    color: var(--blue);
    font-size: calc(2*var(--spacing));
    font-weight: 550;
}

main {
    display: flex;
    flex-direction: column;
    gap: calc(4*var(--spacing));
}

/* p {
    max-inline-size: 60ch;
} */

.card {
    display: flex;
    flex-direction: column;
    /* flex-grow: 1fr; */
    gap: calc(1*var(--spacing));

    background: var(--faded);
    border: var(--stroke) solid 1px;
    border-radius: var(--corner);

    padding: calc(0.6*var(--spacing));
}

h2 {
    font-size: calc(1.6*var(--spacing));
    font-weight: 500;
}

h2:hover,
a:hover {
    opacity: 80%;
}

.tag {
    background: var(--blue);
    color: var(--pale);
    font-weight: 500;
    padding-block: calc(0.1*var(--spacing));
    padding-inline: calc(0.5*var(--spacing));
    display: inline;
    border-radius: var(--corner);
}

.pills {
    display: flex;
    flex-direction: row;
    gap: calc(0.4*var(--spacing));
}

img {
    block-size: auto;
    inline-size: 1fr;
    border-radius: calc(0.8*var(--corner));
    border: var(--stroke) solid 1px;
}

footer {
    margin-inline: -4%;
    margin-block-start: calc(8*var(--spacing));

    display: flex;
    flex-direction: column;
    flex-grow: 1fr;
    gap: calc(1.2*var(--spacing));
    justify-content: center;
    text-align: center;

    background: var(--faded);
    border-block: var(--stroke) solid 1px;

    font-size: calc(0.7*var(--spacing));
    font-weight: 450;
    padding: calc(1.2*var(--spacing));
    padding-block-start: calc(2*var(--spacing));
}

#zoom-in

@media (width>750px) {
    :root {
        font-size: 110%;
    }

    body {
        margin-inline: 12%;
    }

    footer {
        margin-inline: -16%;
    }
}

@media (width>1100px) {
    :root {
        font-size: 120%;
    }

    body {
        margin-inline: 8%;
    }

    main {
        flex-direction: row;
        gap: var(--spacing);
    }
}