/* This thing is largely bashed together from SadGrl's layout template (at https://sadgrl.online/projects/layout-builder/) and https://www.w3schools.com/ and some StackOverflow threads */ 

body {
                    display: flex;
    flex-direction: column;
            }
            
            * {
                box-sizing: border-box;
            }

            #container {
                max-width: 1070px;
                margin: 0 auto;
            }


/* ---- isotope ---- */

.grid {
      width: 1100px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- 3*/

.element-item {
  position: relative;
  float: left;
  width: 200px;
  height: 200px;
  margin: 5px;
  padding: 10px;
  background: #888;
  color: #262524;
            }

* { box-sizing: border-box; }

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

/* Clear floats after the columns */
            .row:after {
              content: "";
              display: table;
              clear: both;
            }


            table {
              border-collapse: collapse;
              width: 300px;
              background-color: #9dc390;
              border-top: 1px solid black;
              border-bottom: 1px solid black;
            }

            tbody {
              margin: 3px 10px;
            }

            td, th {
              text-align: left;
              padding: 3px 10px;
              border-right: 1px solid black;
              border-left: 1px solid black;
            }

            td:nth-child(odd) {
              font-weight: 600;
                text-align: right;
            }

            tr:nth-child(odd) {
              background-color: #deb19a;
            }



.footer {
      flex-shrink: 0;
  width: 100%;
                background-color: #d69e81;
                padding: 10px;
                text-align: center;
            }

            }