:root{

    /* Primary colors */
    --red:hsl(0, 78%, 62%);
    --Cyan:hsl(180, 62%, 55%);
    --Orange: hsl(34, 97%, 64%);
    --Blue: hsl(212, 86%, 64%);

    /* Neutral colors */
    --veryDarkBlue: hsl(234, 12%, 34%);
    --grayishBlue: hsl(229, 6%, 66%);
    --VeryLightGray: hsl(0, 0%, 98%);
    --white: hsl(0, 0%, 100%);    

    /* Miscellaneous */
    --border-radius: 1rem;
    
}

*{
    border: 0;
    margin: 0;
    border: 0;
    box-sizing: inherit;
}

html{
    font-size: 62.5%;
}

body{
    box-sizing: border-box;
    line-height: 1.4;
    font-size: 1.5rem;
    background-color: var(--VeryLightGray);
    font-family: "Poppins", serif;
    color: var(--veryDarkBlue);
}

main{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5rem;
    
}

.upperPart{
    margin-top: 2rem;
    width: 100%;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

h1{
    text-align: center;
    font-size: 3rem;
    font-weight: 200;
    margin-bottom: 1rem;
}

strong{
    font-weight: 600;
}

.mainText{
    margin: 1rem;
    text-align: center;
    font-weight: 200;
}


.littleContainers{
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(3x 1ft);
    grid-template-rows: auto;
    gap: 3rem;
    justify-content: center;
    align-items: center;
}

 
.littleContainers__unit{
    background-color: var(--white);
    color: var(--grayishBlue);
    width: 30rem;
    height: 22rem;
    font-size: 1.2rem;
    font-weight: 400;
    display: flex;
    justify-content: start;
    flex-direction: column;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 4.0px 8.0px 8.0px hsla(0, 0%, 32%, 0.38);
}


.littleContainers__unit__title{
    color: var(--veryDarkBlue);
    font-size: 2rem;
    margin-bottom: 2rem;
}

.red{
    border-top: solid 0.3rem var(--red);
    grid-row: 1/2;
    grid-column: 2/3;
}

.yellow{
    border-top: solid 0.3rem var(--Orange);
    grid-row: 2/3;
    grid-column: 2/3;
}

.lightBlue{
    border-top: solid 0.3rem var(--Cyan);
    grid-row: 1/3;
    grid-column: 1/2;
}

.darkBlue{
    border-top: solid 0.3rem var(--Blue);
    grid-row: 1/3;
    grid-column: 3/4;
}

.littleContainers__unit__image{
    margin-top: auto;
    width: 6rem;
    height: 6rem;
    align-self: flex-end;

}

.attribution{

    width: 100%;
    height: 8rem;
    background-color: var(--veryDarkBlue);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--VeryLightGray);
}

.attribution a{
    text-decoration: none;
    color: var(--VeryLightGray);
}


@media (max-width: 1010px){

    .littleContainers{
        margin-top: 4rem;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        justify-content: center;
        align-items: center;
    }
}