mobile.css

@media (max-width: 800px) {
  nav {
    padding: 5px;
    margin: 0;
  }
  /* body ------------- */
  body {
    background: linear-gradient(-0deg, var(--bg), var(--bg2));
    width: 100;
    max-height: 100vh;
    height: 100vh;
    aspect-ratio: unset;
    overflow: hidden;
  }

  /* logo -------- */
  .brandName svg {
    max-height: 30px;
    max-width: 30px;
    padding: 0.4rem;
  }

  /* settings ----------- */
  #setting .settingicon {
    top: 0;
    right: 0;
    width: 30px;
    padding: 5px;
    border-radius: 0 0 0 11px;
  }
  #setting .settingPage {
    right: -100vh;
    border-left: 0;
    width: 100vw;
  }
  .settingWraper {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  /* time section =----------- */
  .timeSection {
    width: 100%;
    height: 100px;
    margin-top: 20px;
    /* border:  solid; */
  }
  .timeSection #day {
    font-size: 35px;
    font-family: Anurati;
    letter-spacing: 10px;
  }
  .timeSection .timeBox {
    font-size: 9px;
    letter-spacing: 2px;
  }

  /* search form ------------- */
  #searchForm {
    padding: 0;
    height: 2rem;
  }
  #search {
    border: 2px solid var(--themecolor);
    padding: 3px 9px;
    font-size: 12px;
    width: 60%;
  }
  #searchEngine {
    padding: 3px 9px;
    font-size: 12px;
  }

  /* app popup --------- */
  #toggleApp{
    right: 30vw;
  }
  #allAppPopup{
    display: block;
  }

  /* mail section ----------- */
  #mailToggle {
    left: 30%;
    right: unset;
  }
}