#container {
    display: grid;
    grid-template-areas: 
    "header header header header"
    "hero hero hero hero"
    "content1 content2 content3 content4"
    "content1 content2 content3 content4"
    "content1 content2 content3 content4"
    "footer footer footer footer";
    grid-auto-rows: minmax(120px, auto);
    gap: 6px; /* Add this line to create lines (space) between grid sections */
    width: 50%;
    margin: auto;
}

p {
  font-size: 11px;
}

.header {
    display: flex;
    flex-direction: row;
    flex-flow: reverse;
    justify-content: center;
    align-items: center;
    grid-area: header;
    background-color: rgba(229, 219, 173, 0.7);
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: hero;
    background-color: rgb(229, 173, 217, 0.7);
}

.content1 {
    padding: 12px 15px;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: content1;
    background-color: rgb(173, 229, 219, 0.7);
    max-height: 900px;
}

.content2 {
    padding: 12px 15px;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: content2;
    background-color: rgb(173, 229, 188, 0.7);
}

.content3 {
    padding: 12px 15px;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: content3;
    background-color: rgb(173, 202, 229, 0.7);
}

.content4 {
    padding: 12px 15px;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: content4;
    background-color: rgb(229, 173, 173, 0.7);
}


.footer {
    max-height: 50px;
    grid-area: footer;
    background-color: rgb(219, 173, 229, 0.7);
}

@media screen AND (max-width: 600px) {
    #container {
        grid-template-areas: 
        "header"
        "hero"
        "content1"
        "content2"
        "content3"
        "content4"
        "footer";
    }
}






.chivo-mono-font {
  font-family: "Chivo Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.chewy-regular {
  font-family: "Chewy", system-ui;
  font-weight: 400;
  font-style: normal;
}


/* vietnamese */
@font-face {
  font-family: 'Chivo Mono';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/chivomono/v11/mFT2WbgRxKvF_Z5eQMO9gxoz2Gp_q90.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chivo Mono';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/chivomono/v11/mFT2WbgRxKvF_Z5eQMO9gxoz2Wp_q90.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chivo Mono';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/chivomono/v11/mFT2WbgRxKvF_Z5eQMO9gxoz12p_.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/chivomono/v11/mFT0WbgRxKvF_Z5eQMO9gxAD1XJ7.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/chivomono/v11/mFT0WbgRxKvF_Z5eQMO9gxED1XJ7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chivo Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/chivomono/v11/mFT0WbgRxKvF_Z5eQMO9gx8D1Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* latin */
@font-face {
  font-family: 'Chewy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/chewy/v18/uK_94ruUb-k-wn52KjI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}