body{
    overflow: hidden;
}

/* grid */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr .5fr 1fr;
    grid-template-rows: 0.5fr 50px 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "header header header header header header"
        "header header header header header header"
        "timeline timeline timeline timeline menu menu"
        "timeline timeline timeline timeline menu menu"
        "timeline timeline timeline timeline menu menu"
        "timeline timeline timeline timeline menu menu";
    height: 100vh;
    overflow: hidden;
}

.header {
    grid-area: header;
}

.menu {
    grid-area: menu;
}

.timeline {
    grid-area: timeline;
    overflow-y: auto;
    border: 5px solid aqua;
    box-shadow: 2px 2px rgba(0, 0, 0, 0.427);
    overflow-x: hidden;
}

/* blue bar styles */
#header_1 {
    width: 100%;
    max-width: 100%;
    padding: 0;
    background-color: rgb(0, 209, 209);
    background-position: center;
    background-size: cover;
    height: 100%;
}


/* set font-type of all text */
.text {
    font-family: "Agency FB";
    color: white;
    font: 14px;
}  

  @media screen and (max-width: 600px) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 0.5fr 50px 1fr 1fr 1fr 1fr;
        grid-auto-columns: 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "header header header"
            "menu menu menu"
            "timeline timeline timeline "
            "timeline timeline timeline "
            "timeline timeline timeline "
            "timeline timeline timeline ";
        height: 100vh;
        overflow: hidden;
    }
    #header_1 img{
        max-width: 240px;
        height: auto;
    }
  }