body {
    margin: 0;
    background: #e6e6e6;
    font-family: 'Inter', sans-serif;
}

/* main container */
.maincontainer {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
}

/* header */
.header {
    height: 106px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    background-color: #60C2FF;
    padding: 0 20px;
}

/* nav boxes - no numbers shown */
.navboxone,
.navboxtwo,
.navboxthree,
.navboxfour,
.navboxfive,
.navboxsix {
    width: 129px;
    height: 57px;
    background: #D9D9D9;
}

/* grid layout */
.gridcontainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 250px);
    grid-template-areas:
        "rectone recttwo rectthree"
        "rectfour rectfour rectthree"
        "rectfive rectsix rectthree";
    gap: 25px;
    padding: 25px;
}

/* grid area assignments */
.rectone {
    grid-area: rectone;
}
.recttwo {
    grid-area: recttwo;
}
.rectthree {
    grid-area: rectthree;
}
.rectfour {
    grid-area: rectfour;
}
.rectfive {
    grid-area: rectfive;
}
.rectsix {
    grid-area: rectsix;
}

/* all rectangles */
.rectone,
.recttwo,
.rectthree,
.rectfour,
.rectfive,
.rectsix {
    border-radius: 16px;
}

/* rectangle colors */
.rectone {
    background: #FF6060;  /* Pink/red */
}

.recttwo {
    background: #D9D9D9;  /* Light gray */
}

.rectthree {
    background: #60C2FF;  /* Blue */
}

.rectfour {
    background: #FFC260;  /* Yellow/Orange */
}

.rectfive {
    background: #60C2FF;  /* Blue */
}

.rectsix {
    background: #D9D9D9;  /* Light gray */
}