body {background-image: url("spa-bk-006.jpg"); font-family: times; color:black}
     p {display:inline;}
      :root {
        /* These variables exist so you can make quick and simple style changes without much CSS knowledge */

        /* applies to all areas */
        --font-family: sans-serif;
        --font-size: 14px;
        --line-height: 1.3em;
        --font-color: black;
        --link-color: #22506A;
        --link-text-decoration: none;

        /* main content (between sidebars) */
        --content-padding: 25px;
        --content-bg-color: #a2e9cc;

        /* header */
        --header-height: 150px;
        --header-background: url('https://pbs.twimg.com/media/EkTRaaMUwAAfh7I?format=jpg&name=large');
        --header-margin-bottom: 0px;

        /* sidebar */
        --sidebar-margin: 10px;
        --sidebar-width: 150px;
        --sidebar-padding: 15px;
        --sidebar-bg-color: #a2e9cc;

        /* footer */
        --footer-height: 30px;
        --footer-bg-color: #65CAFE;

        /* navbar */
        --navitems-alignment: center;
        --space-between-navitems: 20px;
        --navbar-margin-bottom: 10px;
        --nav-bg-color: #65CAFE;

        /* container */
        --container-width: 800px;
        --container-bg-color: #3DA2B7;

        /* controls the gap between the content and the footer */
        --row-gap: 5px;

        /* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */

        --sidebar-height: 100%;
        --sidebar-overflow: hidden;
        --background-color: #3DA2B7;
      }

      html,
      body {
        margin: 0;
        padding: 0;
        background-color: var(--background-color);
        font-family: var(--font-family);
        font-size: var(--font-size);
        line-height: var(--line-height);
        color: var(--font-color);
      }

      body a {
        color: var(--link-color);
        font-weight: bold;
        text-decoration: var(--link-text-decoration);
      }

      #main-container {
        max-width: var(--container-width);
        margin: 0 auto;
        background-color: var(--container-bg-color);
      }

      .flex {
        display: flex;
        margin-bottom: var(--row-gap);
      }

      .content-wrap {
        margin-top: var(--content-margin-top);
      }

      #content-container {
        width: 60%;
        margin-bottom: var(--row-gap);
        background-color: var(--content-bg-color);
      }

      #left-sidebar {
        width: var(--sidebar-width);
        margin-right: var(--sidebar-margin);
        margin-bottom: var(--row-gap);
        height: var(--sidebar-height);
        overflow: var(--sidebar-overflow);
        background-color: var(--sidebar-bg-color);
      }

      #right-sidebar {
        width: var(--sidebar-width);
        margin-left: var(--sidebar-margin);
        margin-bottom: var(--row-gap);
        height: var(--sidebar-height);
        overflow: var(--sidebar-overflow);
        background-color: var(--sidebar-bg-color);
      }

      #header-contained {
        height: var(--header-height);
        margin-bottom: var(--header-margin-bottom);
        background-image: var(--header-background);
        background-position: center center;
      }

      #footer {
        height: var(--footer-height);
        text-align: center;
        color: var(--font-color);
        background-color: var(--footer-bg-color);
      }

      #header-full {
        display: none;
        height: var(--header-height);
        margin-bottom: var(--header-margin-bottom);
        background-image: var(--header-background);
        background-position: center center;
      }

      #navbar-contained {
        margin-bottom: var(--row-gap)
      }

      #navbar-full {
        display: none;
      }

      .nav {
        margin-left: 0;
        text-align: var(--navitems-alignment);
        margin-top: 0;
        margin-bottom: var(--navbar-margin-bottom);
        padding-top: 1em;
        padding-bottom: 1em;
        background-color: var(--nav-bg-color);
      }

      .nav li {
        display: inline-block;
        padding-right: var(--space-between-navitems);
      }

      .nav li a {}

      .wrapper {
        padding: var(--content-padding);
        padding-top: var(--sidebar-padding);
      }

      .sidebar-wrapper {
        padding: var(--sidebar-padding);
        height: var(--sidebar-height);
        overflow: var(--sidebar-overflow);
      }

      .footer-wrapper {
        padding: 5px;
      }

      /* To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. */
      @media only screen and (max-width: 800px) {
        .flex {
          flex-wrap: wrap;
        }

        #left-sidebar {
          width: 100%;
          display: block;
          order: 2;
          margin-right: 0;
          margin-bottom: 10px;
        }

        #right-sidebar {
          width: 100%;
          display: block;
          order: 3;
          margin-left: 0;
        }

        #content-container {
          width: 100%;
          display: block;
          order: 1;
          margin-bottom: 10px;
        }

      }