/* Code to change Footer sections */
.container-footer {
    background-color: #41b588;
    background-image: none;
}
/* Code to change Menu & Header sections */
.container-header {
    background-color: #062e3a;
    background-image: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "top below" 
                         "logo logo" 
                         "nav nav";
}
.container-header .container-topbar {
    padding: .5em;
}
.container-header .container-topbar {
    grid-area: top;
}
.container-header .container-below-top {
    grid-area: below;
    justify-content: flex-end;
}
.container-header .grid-child:has(.navbar-brand) {
    grid-area: logo;
}
.container-header .container-nav {
    grid-area: nav;
}
@media (width >= 991.98px) {
    .container-header {
        grid-template-columns: 
            [full-start] minmax(0,1fr) 
            [main-start] repeat(4,minmax(0,19.875rem))
            [main-end] minmax(0,1fr)[full-end];
        grid-template-areas: ". logo nav nav nav .";
        gap: 0 1rem;
    }
    .container-header:has(.container-below-top, .container-topbar) {
        grid-template-areas: ". top top below below ." 
                             ". logo nav nav nav .";
    }
}

/* Code to change JEM specific sections */
h2.jem-description {font-size: 0px;}
h2.jem {font-size: 0px;}
.jem-row {font-size: 0px;}
#jem .copyright {
    font-size: 0px;
}
#jem .componentheading {
    font-size: 0px;
}
/* Code for two columns (bottom of jem page) */
/* container */
.responsive-two-columns {
    display:flex;
    flex-wrap:wrap;
}

/* columns */
.responsive-two-columns > * {
    width:100%;
    padding:1rem;
}

/* Create two potentially unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

.left {
  width: 50%;
}

.right {
  width: 50%;
  background:#daefe7;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}