/*
    Exercise2.css

    Only contains rules that apply excuslively to Exercise 2
*/

main {
    /*  main has 2 sections Font and Colours that will
        be displayed on top of each other at mobile widths and
        side by side at higher widths 
    */
    display: flex;
    flex-direction: column;

    font-family: var(--text-font-family);
}

main section {
    margin: 2em;
}

main > section > p {
    padding-inline: 1em;
}

h1, h2 {
    font-family: var(--header-font-family);
}

h1 {
    font-weight: var(--header-font-weight-2);
}

h2 {   
    font-weight: var(--header-font-weight-1);
}

.Centered {
    margin-inline: auto;
}

main > section {
    /*
        Each section will be displayed as column with
        the items being spaced apart depending on viewport size
    */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.HeaderFont {
    font-family: var(--header-font-family);
    font-weight: var(--header-font-weight-3);
}

.BodyFont {
    font-family: var(--text-font-family);
}

.ColourBlock {
    width: 350px;
    height: 100px;
    padding: 1em;
}

.ColourBlock > p {
    display: block;
    color: white;
    width: fit-content;
    padding: 5px;
    font-family: var(--text-font-family);

    background-color: black;;
    
}

.Colour1 {
    background-color: var(--colour-1);
}

.Colour2 {
    background-color: var(--colour-2);
}

.Colour3 {
    background-color: var(--colour-3);
}

.Colour4 {
    background-color: var(--colour-4);
}

.Colour5 {
    background-color: var(--colour-5);
}

footer > a {
    padding: 1em;
}

@media (min-width: 30em) {
    main {
        flex-direction: row;
        justify-content: space-around;
    }
    
    footer {
        display: flex;
        justify-content: center;
        gap: 2em;
        flex-wrap:wrap;
    }
    
    footer > a {
        padding: 2em;
    }
}