body {
        background-color: #f1f1f1; /* page background */
        font-family: Arial, Helvetica, sans-serif;
    }

    body main h1 {
        text-align: center;    
    }
    
    .container {
        align-items: center; 
        float: left;
      }
      .image{
          float: left;
        padding: 5px;
      }
    

    #menuToggle {
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;
    }

    #menuToggle a {
        text-decoration: none;
        color: #000000; /* menu text color */
        transition: color 0.3s ease;
    }

    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
    }

    #menuToggle input {
        position: absolute;
        cursor: pointer;
        opacity: 0;
        width: 40px; /* active click width on hamburger */
        z-index: 2; /* in order to place the checkbox over the hamburguer */
        -webkit-touch-callout: none;
    }

    #menuToggle span {
        display: block; /* to ensure that each span element occupies its own line. */
        width: 33px;/* Hamburger width */
        height: 4px;/* Hamburger line thickness */
        margin-bottom: 5px; /* create some spacing between the span elements. */
        position: relative; /* allow for positioning changes in relation to the parent div.*/
        background: #000000; /* hamburger color */
        border-radius: 3px;
        z-index: 1; /* ensure that the span element is under the checkbox */
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
        background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
        transform-origin: 4px 0px; /* set to 4px 0px to specify the center of rotation for the transform property above. */
    }

    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #000000; /* x color */
    }

    #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }

    #menu {
        position: absolute;
        left: -300px; /* offset to offset menu off screen */
        top: 80px; /* offset of start of menu items in box */
        width: 160px; /*width of menu box */
        margin: -100px 0 0 -50px; /*t r b l*/
        padding: 50px; /* spacing between left edge of menu box to items */
        padding-top: 50px; /* spacing from hamburger to first menu item */
        background: rgb(194, 194, 194); /* menu background color */
        list-style-type: none; /* no bullets on list */
        -webkit-font-smoothing: antialiased; /* browser specific */
        transition: left 0.5s;
    }

    #menu li {
        padding: 10px 0; /* tb lr - spacing between menu items */
        font-size: 15px;
    }

    #menuToggle input:checked ~ ul {
        left: 40px; /* spacing from left screen edge to menu items*/
    }

    footer {
        background-color: rgb(194, 194, 194); 
        text-align: center;
    }
    footer div {
        padding-left: 10px;
        padding-bottom: 20px;
        display: flex;
        justify-content: center;
    }