Javascript DOM window resizing using if/else [duplicate]

I think I did it right but it doesn't affect color change at else block. And I can't figure out why. At first I thought about css cascading sequence but it wasn't any reason for that. 'if and else if' works in my code. However, when the innerWidth exceeds more than 700 there's no change in background color.

import "./styles.css";

const body = document.querySelector("body");

function handleResize() {
  if (window.innerWidth < 400) { 
    body.style.backgroundColor = "#318CD5"; // blue-ish
  }
  else if (401 < window.innerWidth < 700) {
    console.log(window.innerWidth); 
    body.style.backgroundColor = "#904EAD"; // purple-ish
  }
  else { 
    body.style.backgroundColor = "#EEBC11"; // yellow-ish
  }
}

function init() {
  window.addEventListener("resize", handleResize);
}

init();