:root {
    /** Colors **/
--Black: hsl(0, 0%, 0%); /* Set base font yellow */
--White: hsl(0, 0%, 100%); /* Set base font color white */

--Yellow: hsl(47, 88%, 63%); /* Set base font yellow */
--Grey-300: hsl(0, 0%, 42%); /* Set base font color light grey */
--Gray-950: hsl(00, 0%, 7%); /* Set base font color dark grey */

--text-preset-3-bold: 800 0.875rem 'Figtree', sans-serif;  /* Preset 3 Bold */
--text-preset-1: 800 1.5rem 'Figtree', sans-serif;  /* Preset 1 Bold */
--text-preset-2: 500 1rem 'Figtree', sans-serif;  /* Preset 2 Norm */
--text-preset-3: 500 0.875rem 'Figtree', sans-serif;  /* Preset 3 Norm */
}

* {
    margin: 0;
    padding: 0;
}

body {
    background: var(--Yellow);
}

.big-container {
    display: flex;
    flex-direction: column;
    width: 24rem;
    max-width: 70%;
    padding: 1.5rem;
    background: var(--White);
    border: 0.0625rem solid var(--Black);
    border-radius: 1.25rem;
    box-shadow: 0.5rem 0.5rem 0px 0px var(--Black);
    margin: 10rem auto;
    gap: 1.5rem;

}

.img-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-container img {
    border-radius: 0.625rem;
    width: 100%;
    height: auto;
}

.main-content{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.25rem 0.75rem;
    gap: 0.75rem;
}

.Learning-box {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--Yellow);
    color: var(--Gray-950);
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    margin: 0;
    row-gap: 0.5rem;
    max-width: fit-content;
    font: var(--text-preset-3-bold);
}

.Publish-date {
    margin: 0;
    width: auto;
    font: var(--text-preset-3);
    color: var(--Gray-950)
}

h1 {
    margin: 0;
    height: auto;
    padding: 0;
    font: var(--text-preset-1);
}

a {
    color: var(--Gray-950); /* Your initial color */
    text-decoration: none;
}

a:hover {
    color: var(--Yellow);
    text-decoration: none;
}


.paragraph {
    margin: 0;
    width: auto;
    color: var(--Grey-300);
    font: var(--text-preset-2);
}

.Author-OP {
    display: flex;
    align-items: center;
    padding: 0px;
    gap: 0.75rem;
    color: var(--Gray-950);
    font: var(--text-preset-3-bold);
}

.attribution {
    font-size: 38px;
    text-align: center;
    margin-top: 1.25rem;
    
}

.attribution a { 
    color: hsl(228, 45%, 44%); 
}