/*   =======================  mobile viewport settings ========================  */
@media all and (min-width:200px ) and (max-width:769px){

  .main {
    float: left;
    width: 90%;
  }

  #header-id h1 {
    font-size: 1.3rem;
    margin: 0px auto;
    text-align: center;
    max-width: 100%;
    padding-bottom: 20px;
  }

  #home-content {
    display: none;
  }

  .ui-btn {
    text-align: center;
   
  }
}
 
/* =========================== viewport for laptop and desktop===========================   */

@media all and (min-width:780px){

.main {width:90%;}

#header-id h1 {
  font-size: 2.5rem;
  margin: 0px auto;
  text-align: center;
  max-width: 100%;
  padding-bottom: 20px;
}

.ui-content {
 
   width: 100vw;
  height: 87vh;
  background-color: rgb(183, 231, 224);
}

#menu-id {
  width: 100vw;
  border: 1px;
  background-color: rgb(126, 69, 69);
}

.ui-btn{
  margin: 5px auto;
  font-size:1.2rem;
  text-align:left;
  float:left;  
  max-width: 200px;
     min-height: 30px; 
  width:90vw;       
  text-decoration:none;
  }
}