Website with "3 columns and 4 states" in CSS only

The page should have three columns: left menu, content and right menu. Both menus should be able to be hidden (using the Checkbox Hack) while the content then takes up the space. The whole page should have a maximum width of 1200px.

I've come a long way, but now I'm stuck. The three columns result in 4 states: 0. left - content - right

1. left - content
2. content - right
3. content With 1 and 2, the content has to be larger by the width of the hidden column, which I use "

:root {
  --darkgrey: darkgrey;
  --almostwhite: #fcfcfc;
  --almostwhite_font: #fcfcfc;
  --lightgrey: lightgrey;
  --blue: blue;
  --darkgrey_font: #404040;
  --lightgrey_1: #e3e3e3;
}

.red {
  color: red;
  padding: 15px;
}

.toggle-links {
  margin: auto;
  width: 50%;
}


/* ═══════════════════════════════════╝ Wrapper ╚══════════ */

body {
  max-width: 960px;
  margin-left: 0px;
  padding-left: 0px;
}


/* ═══════════════════════════════════╗ Wrapper ╔══════════ */


/* ═══════════════════════════════════╝ Header ╚══════════ */

.header {
  position: fixed;
  /* display: block;  */
  width: 250px;
  height: 120px;
  left: 0px;
  top: 0px;
  padding: 0px;
  color: var(--almostwhite_font);
  /* z-index: 200; */
  background-color: var(--darkgrey);
}

a.header_link {
  position: absolute;
  top: 5px;
  left: 25px;
  font-size: 30pt;
  font-weight: normal;
  text-align: left;
  color: var(--almostwhite);
}

.header .searchbox {
  position: fixed;
  margin-top: 65px;
  padding-left: 15px;
}


/* ═══════════════════════════════════╗ Header ╔══════════ */


/* ═══════════════════════════════════╝ three columns ╚══════════ */

.left_column {
  box-sizing: border-box;
  position: fixed;
  background: var(--darkgrey);
  overflow: scroll;
  scrollbar-width: none;
}

.center_column {
  box-sizing: border-box;
  position: fixed;
  overflow: scroll;
  scrollbar-width: none;
  /* margin: 0 auto; */
  border: solid 1px darkred;
}

.right_column {
  box-sizing: border-box;
  position: fixed;
  background: var(--darkgrey);
  overflow: scroll;
  scrollbar-width: none;
}


/* ═══════════════════════════════════╝ Small View ╚══════════ */

.left_column {
  height: 100%;
  width: 250px;
  left: -250px;
  top: 120px;
}

.center_column {
  height: 100%;
  width: calc(100% - 0px);
  left: 0px;
  top: 0px;
  padding: 25px 10px 10px 10px;
}

.right_column {
  height: 100%;
  width: 250px;
  left: calc(100% + 250px);
  top: 0px;
  padding-top: 120px;
}


/* ═══════════════════════════════════╗ Small View ╔══════════ */


/* ═══════════════════════════════════╝ Medium View ╚══════════ */

@media screen and (min-width: 900px) {
  .left_column {
    height: 100%;
    width: 250px;
    left: 0px;
    top: 120px;
  }
  .center_column {
    height: 100%;
    width: calc(100% - 250px);
    left: 250px;
    top: 0px;
    padding: 25px 10px 10px 10px;
  }
  .right_column {
    height: 100%;
    width: 250px;
    left: calc(100% + 250px);
    top: 0px;
    padding-top: 120px;
  }
}


/* ═══════════════════════════════════╗ Medium View ╔══════════ */


/* ═══════════════════════════════════╝ Large View ╚══════════ */

@media screen and (min-width: 1140px) {
  .left_column {
    height: 100%;
    width: 250px;
    left: 0px;
    top: 120px;
  }
  .center_column {
    height: 100%;
    width: calc(100% - 500px);
    left: 250px;
    top: 0px;
    padding: 25px 10px 10px 10px;
  }
  .right_column {
    height: 100%;
    width: 250px;
    left: calc(100% - 250px);
    top: 0px;
    padding-top: 120px;
  }
}


/* ═══════════════════════════════════╗ Large View ╔══════════ */


/* ═══════════════════════════════════╗ three columns ╔══════════ */


/* ═══════════════════════════════════╝ Switches ╚══════════ */

input.hidden {
  display: none;
}

div.left_column {
  display: block;
}

input[type=checkbox]#toggle_left_column:checked~div.left_column {
  display: none;
}

input[type=checkbox]#toggle_left_column:checked~div.center_column {
  left: 0px;
  width: calc(100% - 250px);
}

div.right_column {
  display: block;
}

input[type=checkbox]#toggle_right_column:checked~div.right_column {
  display: none
}

input[type=checkbox]#toggle_right_column:checked~div.center_column {
  left: 250px;
  width: calc(100% - 250px);
}


/* ═══════════════════════════════════╗ Switches ╔══════════ */

<body>
  <!-- switches -->
  <input type="checkbox" id="toggle_left_column" class="hidden">
  <input type="checkbox" id="toggle_right_column" class="hidden">
  <!-- switches -->

  <div class="left_column">

    <div class="header">
      <a href="header_link" class="header_link">mySite</a>
      <div class="searchbox">
        <form><input type="search" /></form>
      </div>
    </div>

    <div id="menu">
      <h3>Menu 1</h3>
      <ul>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
      </ul>
    </div>

  </div>
  <!-- left_column -->




  <div class="right_column">
    <div id="menu2">
      <h3>Menu 2</h3>
      <ul>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
        <li> item </li>
      </ul>
    </div>
  </div>
  <!-- right_column -->


  <div class="center_column">

    <!-- just for testing -->
    <div class="toggle-links">
      <label class="red" for="toggle_left_column">toggle left side</label>
      <label class="red" for="toggle_right_column">toggle right side</label>
    </div>
    <!-- just for testing -->

    <div id="content">
      <h2>Content</h2>
      <p></p>
    </div>
  </div>
  <!-- center_column -->


</body>

" realized. But how do I do that when both page columns are hidden, the content occupies the full width of the page? Also, the page width limitation doesn't work, but that's not that important yet.