body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
        }
        
        h1
        {
            margin-left: 2em;
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            color: hsl(144, 97%, 15%);
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            max-width: 100vw; /* Adjust as needed */
            padding: 2em;
            box-sizing: border-box;
            gap: 2em;
            background: hsl(0, 0%, 83%);
            border: 2px solid hsl(144, 97%, 15%);
            
        }

        .g-code-body
        {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: space-between;
            flex: 1;
            max-width: 70vw;
            min-height: 60vh;
    
        }
        .form {
            display: flex;
            flex: 1;
            padding: 2em;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
            min-width: 200px; /* Minimum width before stacking */
            max-width: 26vw;
            min-height: 60vh;
            justify-content: flex-start;
            align-items: flex-start;
            box-shadow: hsla(144, 97%, 15%, 0.4) 0px 0px 0px 1px, hsla(144, 97%, 7%, 0.45) 0px 4px 6px 2px, hsla(144, 97%, 2%, 0.08) 0px 1px 0px inset;
        }
        .form-column
        {
            display: flex;
            flex-direction: column;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            width: 220px;
            flex-shrink: 0; /* Prevent shrinking below 120px */
            margin: 0 2em;
        }
        .form-group.full-width {
            width: 50%;
        }
        .form-group label {
            font-weight: bold;
            margin-bottom: 0.2em;
        }
        .form-group input[type="text"] {
            width: 100%;
            padding: 0.5em;
            box-sizing: border-box;
            margin-bottom: 1.5em;
            box-shadow: hsla(144, 97%, 15%, 0.2) 0px 0px 0px .01em, hsla(144, 97%, 7%, 0.25) 0px .05em .05em .02em, hsla(144, 97%, 2%, 0.08) 0px .01em 0px inset;
            
        }
        .radio-group {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-bottom: 1em;
            margin-left: 2em;
        }
        .radio-group label {
            font-weight: bold;
            margin-bottom: 0.3em;
        }
        .radio-options {
            display: flex;
            gap: 1em;
        }
        .radio-options div {
            display: flex;
            align-items: center;
            gap: 0.5em;
        }
        button {
            background: linear-gradient(to bottom, hsl(145, 94%, 81%), hsl(145, 32%, 60%));
            color: green;
            font-family: sans-serif;
            font-size: 16pt;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
            padding: 0.8em 1.5em;
            cursor: pointer;
            border-radius: 5px;
            transition: background 5s ease-in-out;
            max-width: 10vw;
            box-shadow: hsla(144, 97%, 15%, 0.4) 0px 0px 0px .05em, hsla(144, 97%, 7%, 0.45) 0px 4px 6px .05em, hsla(144, 97%, 2%, 0.08) 0px 1px 0px inset;
        }
        button:hover {
            background: linear-gradient(to bottom, hsl(145, 84%, 71%), hsl(145, 42%, 50%));
            box-shadow: hsla(144, 97%, 15%, 0.4) 0px 0px 0px .01em, hsla(144, 97%, 7%, 0.45) 0px 4px 6px .02em, hsla(144, 97%, 2%, 0.08) 0px 1px 0px inset;
        }

        .support
        {
            margin-left: 2em;
        }
        
        .g-code-window {
            flex: 1;
            padding: 1em;
            box-sizing: border-box;
            border: 1px solid black;
            overflow: scroll;
            max-height: 60vh; /* Adjust as needed */
            width: 100%;
            min-width: 300px; /* Minimum width before stacking */
            max-width: 100%;
            background: hsl(0, 0%, 99%);
            box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

            scrollbar-shadow-color: hsl(144, 97%, 15%);
        }

        .button-container {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            margin-top: 1em;
        }

        .g-code-button
        {
            margin: 1em 0;
        }

        label
        {
            font-size: .9em;
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            color: hsl(144, 97%, 15%);
        }

        nav
        {
            width: calc(100vw - 2em);
            padding: 0 0 0 2em;
            margin-top: 1em;
            height: 30px;
            display: flex;
            justify-content: flex-start;

        }

        .drop-down
        {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .menu-bar
        {
            min-height: 4px;
            min-width: 30px;
            height: 3px;
            width: 15px;
            margin: 0 0 5px 0;
            content: '';
            background: hsl(144, 97%, 15%);
            display: none;
        }

        .menu-bar:last-of-type
        {
            margin: 0;
            content: '';
        }

        #instructions
        {
            background: hsl(145, 32%, 90%);
            padding: 1em;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            box-shadow: hsla(144, 97%, 15%, 0.4) 0px 0px 0px 1px, hsla(144, 97%, 7%, 0.45) 0px 4px 6px 2px, hsla(144, 97%, 2%, 0.08) 0px 1px 0px inset;
        }

        .instructions-menu
        {
            text-decoration: underline;
            color: hsl(144, 97%, 15%);

        }

       .open
        {
            height:max-content;
            visibility: visible;
            opacity: 1;
            transition: all 500ms ease;
            margin-bottom: 2em;
        }

        .closed
        {
            margin-bottom: 0;
            height: 0;
            visibility: hidden;
            opacity: 0;
        }


      @media only screen and (max-width: 1180px) {
        .container
        {
            width: calc(100vw - 2em);
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            padding: 1em;
            margin: 0;
        }

        .g-code-body
        {
            display: flex;
            flex-direction: column;
            flex: 1;
            max-width: 100vw;
        }

        .form
        {
            min-width: 100%;
            padding: 1em 0 0 0;
            margin-bottom: 3em;
        }

        .form-column
        {
            min-width: 100%;
        }

        input[type="text"]
        {
            min-width: calc(100vw - 7em);
        }

        button
        {
            min-width: 100%;
        }

        nav
        {
            padding: 0;
            margin-bottom: 1em;
        }

        .menu-bar
        {
            display: block;
        }

        .instructions-menu
        {
            display: none;
        }

      }