@media screen and (max-width: 1400px) {
}

@media screen and (max-width: 1200px) {
  #nav {
    gap: 3vh;
  }
}

@media screen and (max-width: 900px) {
}

@media screen and (max-width: 550px) {
  /* #all_container {
    flex-direction: row-reverse;
  } */

  #push_pull_bar {
    display: none;
  }
  #all_container {
    display: block;
  }

  .nav {
    display: flex;
    right: -70%;
    position: fixed;
    top: 0;
    width: 70%;
    background: var(--nav_mobile_bg_color);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 16px 0 0 16px;
  }
  .nav_mobile_open {
    /* display: flex; */
    right: 0;
  }
  .nav_mobile_close {
    /* display: none; */
    right: -70%;
  }
  /* .nav_toggle_btn_container_open {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    backdrop-filter: blur(16px);
    background-color: #0d0d0fcb;
    overflow: hidden;
    border-radius: 16px 0 0 16px;
  } */

  #nav_toggle_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background: var(--nav_mobile_bg_color);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: 0 1px 1px var(--nav_toggle_btn_shadow_color),
      0 -1px 1px var(--nav_toggle_btn_shadow_color);
    border-radius: 50%;
    position: fixed;
    top: 14px;
    right: 12px;
  }
  #nav_toggle_btn_icon {
    width: 20px;
    height: 20px;
    background-color: var(--nav_toggle_btn_bg_color);
    border-radius: 50%;
  }
  :root {
    --avatar_width_normal: 25%;
    --theme_area_height: max(4vh, 26px);
  }
  #nav_footer {
    gap: 4vh;
  }
  #cursor_icon_container {
    font-size: 0.6rem;
  }
  #footer {
    font-size: 0.7rem;
  }
  /* #nav {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
  }
  #avatar {
    width: 25%;
  } */
}