body {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 18px;
}

#Logo {
    width: 100px;
    height: auto;
}

#IMAGE1 {
    width: 50%;
    height: auto;
}

#IMAGE2 {
    width: 30%;
    height: auto;
}

#container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "header header header"
        "content1 content1 content1"
        "content1 content1 content1"
        "content1 content1 content1"
        "content1 content1 content1"
        "content1 content1 content1"
        "content2 content2 content2"
        "content2 content2 content2"
        "content3 content3 content3"
        "content3 content3 content3"
        "content3 content3 content3"
        "content3 content3 content3"
        "content3 content3 content3"
        "content4 content4 content4"
        "content4 content4 content4";
    grid-auto-rows: 120px;
    gap: 8px;
    padding: 10px;
}

.header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: lightblue;
    padding: 10px;
    position: relative;
}

.nav {
    display: flex;
    gap: 12px;
    background: lightyellow;
    padding: 8px 12px;
    border-radius: 5px;
}

.nav2 {
    display: flex;
    gap: 12px;
    background: rgb(211, 211, 89);
    padding: 8px 12px;
    border-radius: 5px;
}

#hamburger {
  width: 40px;
  cursor: pointer;
  display: none;
}

.content1, .content2, .content3, .content4 {
    display: grid;
    place-items: center;
}

.content1 { grid-area: content1; background: lightgreen; }
.content2 { grid-area: content2; background: lightgreen; }
.content3 { grid-area: content3; background: lightgreen; }
.content4 { grid-area: content4; background: lightgreen; }


@media (max-width: 1199px) {
    body { font-size: 16px; }

    #container {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "header header"
            "content1 content1"
            "content1 content1"
            "content1 content1"
            "content1 content1"
            "content2 content2"
            "content2 content2"
            "content3 content3"
            "content3 content3"
            "content3 content3"
            "content3 content3"
            "content4 content4"
            "content4 content4";
    }

    .nav {
        display: flex;
        gap: 12px;
        background: lightyellow;
        padding: 1px 12px;
        border-radius: 5px;
    }

    .nav2 {
        display: flex;
        gap: 10px;
        background: rgb(211, 211, 89);
        padding: 5px 8px;
        border-radius: 5px;
    }

}


@media (max-width: 599px) {
    body { font-size: 14px; }

    #container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "content1"
            "content1"
            "content1"
            "content2"
            "content2"
            "content3"
            "content3"
            "content3"
            "content4"
            "content4";
    }

    #hamburger {
        display: block;
     }

    .nav {
        display: none;
        position: absolute;
        top: 60px;
        right: 10px;
        background: black;
        flex-direction: column;
        width: 140px;
        padding: 10px;
        border-radius: 5px;
    }

    .nav.show {
        display: flex;
    }

    #IMAGE1 {
        width: 50%;
        height: auto;
    }

    #IMAGE2 {
        width: 30%;
        height: auto;
    }

}