/******************************************
/* CSS
/*******************************************/
/* Box Model Hack */
*{
  box-sizing: border-box;
}

/******************************************
/* LAYOUT
/*******************************************/
body{
  width: 100%;
  height: 100%;
  font-family: 'Roboto Mono';
  border: 25px solid rgb(254	226	11	);
}
html{
  font-size: 62.5%;
  /* border: 2px solid blue; */
  height: 100%;
  width: 100%;
}
main{
  height: 90%;
  width: 100%;
  /* border: 2px solid red; */
}
footer{
  height: 10%;
  width: 500px;
  /* border: 2px solid blue; */
  font-size: 2rem;
  padding-left: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left{
  float: left;
  /* border: 2px solid purple; */
  width: 50%;
  height: 100%;
}
.left img{
  height: 100%;
}
.right{
  float: right;
  text-align: center;
  width: 50%;
  /* border: 2px solid red; */
  height: 100%;
  padding: 2%;
  
}
h1{
  font-size: 6rem;
font-weight: 500;
/* height: 50%; */
/* border: 2px solid orange; */
margin:auto;
height: auto;
}
.hone{
  height: auto;
  display: flex;
  align-items: center;
  /* border: 2px solid pink; */
}
ul{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  /* border: 2px solid purple; */
  height: 100%;
  width: 50%;
}
nav ul li{
  font-size: 3.5rem;
  /* border: 2px solid pink; */
}
h2, h3{
  font-size: 4rem;
  /* border:2px solid purple; */
  width:100%;
  height: auto;
}
.mainText{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* border: 3px solid black; */
  height: 100%;
}
.addhours{
  height: 50%;
  /* border: 3px solid blue; */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
h1{
  width: 100%;
  /* border: 2px solid red; */
}
nav{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* border: 2px solid green; */
  height: auto;
}
header{
  height: 50%;
  /* border: 3px solid purple; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
/******************************************
/* BASE STYLES
/*******************************************/
a{
  text-decoration: none;
  color: black;
}
a:hover{
  text-decoration: underline;
}

/******************************************
/* MEDIA QUERY
/*******************************************/
@media screen and (orientation:portrait) {
  body, html{
    width: 100vw;
    height: 100vh;
  }
  
  main{
    height: 97%;
    /* border: 2px solid red; */
  }
  footer{
    height: 3%;
    width: 100%;
    /* border: 2px solid blue; */
    display: block;
  }
  .left{
    height: 60%;
    /* border: 2px solid purple; */
    width: 100%;
  }
  .right{
    height: 40%;
    text-align: center;
    width: 100%;
  }
  h1{
    font-size: 7rem;
  font-weight: 500;
  
  }
  ul{
    display: flex;
    justify-content: center;
    /* border: 2px solid red; */
    width: 100%;
    
  }
  nav ul li{
    font-size: 4rem;
    /* border: 2px solid pink; */
    width: 15%;
  }
  #dot{
    width: 10%;
  }
  h2, h3{
    font-size: 4.25rem;
    /* border:2px solid purple; */
  }
  .addhours{
    height: 65%;
    /* border: 2px solid red; */
    /* justify-content: space-between; */
  }
  .hone{
    width: 100%;
    /* border: 2px solid red; */
  }
  header{
    width: 100%;
    /* border: 2px solid red; */
    height: 30%;
  }
  .right{
    padding: 0;
  }
  nav{
    display: flex;
    justify-content: center;
     /* border: 2px solid green;  */
  }
  .mainText{
    justify-content: space-evenly;
  }
}

/* galaxy fold */
@media screen and (max-width:320px){
  html, body{
    width: 100vw;
    height: 100vh;
  }
  footer{
    font-size: .95rem;
  }
  h1{
    font-size: 2.5rem;
  }
  nav ul li{
    font-size: 1.7rem;
    /* border: 2px solid pink; */
    width: 20%;
  }
  h2, h3{
    font-size: 2.2rem;
    /* border:2px solid purple; */
  }
  .addhours{
    height: 65%;
    /* border: 2px solid red; */
  }

  nav{
    /* border: 2px solid green; */
    height: 15%;
  }
}
@media screen and (min-width:321px) and (max-width:380px)and (orientation:portrait){
  footer{
    /* border: 2px solid blue; */
    font-size: 1.25rem;
  }
  h1{
    font-size: 3.5rem;
  }
  nav ul li{
    font-size: 2rem;
    /* border: 2px solid pink; */
    width: 15%;
  }
  h2, h3{
    font-size: 2.2rem;
    /* border:2px solid purple; */
  }
  .addhours{
    height: 65%;
    /* border: 2px solid red; */
  }
  nav{
    /* border: 2px solid green; */
    height: 15%;
  }
}
@media screen and (min-width:381px) and (max-width:395px) and (orientation:portrait){
  footer{
    /* border: 2px solid blue; */
    font-size: 1.25rem;
  }
  h1{
    font-size: 3.5rem;
  }
  nav ul li{
    font-size: 2.2rem;
    /* border: 2px solid pink; */
  }
  h2, h3{
    font-size: 2.5rem;
    /* border:2px solid purple; */
  }
  .addhours{
    height: 65%;
    /* border: 2px solid red; */
    justify-content: space-evenly;
  }
  nav{
    /* border: 2px solid green; */
    height: 15%;
  }
}
@media screen and (min-width:396px) and (max-width:780px) and (orientation:portrait){

  footer{
    /* border: 2px solid blue; */
    font-size: 1.5rem;
  }
  h1{
    font-size: 3.5rem;
  font-weight: 500;
  }
  nav ul li{
    font-size: 2.2rem;
    /* border: 2px solid pink; */
  }
  h2, h3{
    font-size: 2.5rem;
    /* border:2px solid purple; */
  }
  .addhours{
    height: 65%;
    /* border: 2px solid red; */
    justify-content: space-evenly;
  }
  nav{
    /* border: 2px solid green; */
    height: 15%;
  }
}

@media screen and (orientation:landscape) {
 .hone{
  height: 50%;
 }
}
/* galaxy fold */
@media screen and (orientation:landscape) and (max-height: 290px) {
  h1{
    font-size: 1rem;
  }
  li{
    font-size: 2rem;
  }
  h2, h3{
    font-size: 1rem;
  }
}
@media screen and (orientation:landscape) and (max-height: 420px) {
  h1{
    font-size: 1rem;
  }
  li{
    font-size: 1rem;
  }
  h2, h3{
    font-size: 1rem;
  }
  .hone{
    /* border: 2px solid red; */
    height: auto;
  }
}
@media screen and (orientation:landscape) and (max-height: 550px) {
  h1{
    font-size: 4rem;
  }
  li{
    font-size: 2rem;
  }
  h2, h3{
    font-size: 2.5rem;
  }
}