:root {
    --global-bg-color: #e5e4d8;
    --circle-color-1: #fff;
    --circle-color-2: #5f7751;
    --circle-color-3: #e24b00;
    --circle-color-4: #e5be00;
    --circle-color-5: #a7d6d2;
    --circle-color-6: #63290c;
    --circle-color-7: #ada68a;
    --circle-color-8: #eac1c1;
    --circle-color-9: #9accb2;
    --circle-color-10: #a89420;
    --circle-color-11: #ff8080;
    --circle-color-12: #dcf8ff;
    --circle-color-13: #f7f7bf;
    --circle-color-14: #fc8300;
    --circle-color-15: #a9d16f;
    --circle-color-16: #893a63;
}

html {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;

    font-family: Jost;
    font-weight: 350;
    font-size: 16px;
    /* letter-spacing: 0.1rem; */

    background-color: var( --global-bg-color );
}

header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header ul li {
    background-color: #afac9a;
    margin-bottom: 3px;
}

header ul li div {
    background-color: #cecdc2;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

header ul li div span {
    font-size: 0.8rem;
    color: #63290c;
    font-weight: 500;
    margin: 0 15px;
    padding: 2px 0;
}

main {
    /* border: 1px solid red; */
    padding-top: 2rem;
    padding-bottom: 4rem;

    /* margin: 2rem 3rem 4rem; */
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
    /* grid-template-rows: 1fr 1fr 1fr 1fr; */
    gap: 25px;
    max-width: 1440px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.2rem;
}

main > div {
    /* border: 1px solid blue; */
    /* width: 200px; */
    /* height: 200px; */
    aspect-ratio: 1 / 1; 
    /* Ensures content (like images) doesn't overflow */
    min-height: 0;
}

main > div > div {
    /* border: 1px solid orange; */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

main > div:nth-child( 1 ) > div {
    background-color: var( --circle-color-1 );
    box-shadow: 0px 0px 25px 0px rgba( 0, 0, 0, 0.2 );
}

main > div:nth-child( 1 ) > div > div {
    /* border: 1px solid red; */
    width: 140px;
    height: 45px;
    background-image: url( ../images/logo.svg );
    background-position: center;
    background-repeat: no-repeat;
}

main > div:nth-child( 2 ) > div {
    background-color: var( --circle-color-2 );
    color: #fff;
}

main > div:nth-child( 3 ) > div {
    background-color: var( --circle-color-3 );
    color: #fff;
}

main > div:nth-child( 3 ) > div > div {
    width: 65%;
    /* height: 80%; */
    /* border: 2px solid red; */
}

main > div:nth-child( 4 ) > div {
    background-color: var( --circle-color-4 );
    color: #63290c;
    font-weight: 500;
    text-decoration: none !important;
}

main > div:nth-child( 5 ) > div {
    background-color: var( --circle-color-5 );
}

main > div:nth-child( 6 ) > div {
    background-color: var( --circle-color-6 );
}

main > div:nth-child( 7 ) > div {
    background-color: var( --circle-color-7 );
}

main > div:nth-child( 8 ) > div {
    background-color: var( --circle-color-8 );
}

main > div:nth-child( 9 ) > div {
    background-color: var( --circle-color-9 );
}

main > div:nth-child( 10 ) > div {
    background-color: var( --circle-color-10 );
}

main > div:nth-child( 11 ) > div {
    background-color: var( --circle-color-11 );
}

main > div:nth-child( 12 ) > div {
    background-color: var( --circle-color-12 );
}

main > div:nth-child( 13 ) > div {
    background-color: var( --circle-color-13 );
}

main > div:nth-child( 14 ) > div {
    background-color: var( --circle-color-14 );
}

main > div:nth-child( 15 ) > div {
    background-color: var( --circle-color-15 );
}

main > div:nth-child( 16 ) > div {
    background-color: var( --circle-color-16 );
    color: #fff;
}