/* vietnamese */
@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/inconsolata/v21/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WRL2l2eY.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/inconsolata/v21/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WRP2l2eY.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/inconsolata/v21/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WR32lw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    background-color: #fdfbf6 !important;
    font-size: 15px;
    line-height: 1.5;
    font-family: "Inconsolata", sans-serif !important;
}

ul li h5{
    font-family: "Segoe UI",Arial,sans-serif;
    font-weight: 400 !important;
}

/* top nav bar */
nav .bg-slider{
    top: 0;
    bottom: 0;
    left: 0;
    right: 100%;
    z-index: 1;
    background-color: #c7c7c7 !important;
    transition: right 0.3s linear;
}

nav a span{
    z-index: 2;
}

nav a:hover{
    color: #000;
}

nav a:hover .bg-slider{
    right: 0%;
}

nav a:hover span{
    transform: scale(150%,150%);
    font-weight: 600;
}

/* header section */
header{
    background-image: url('/cafe-images/coffee.jpg');
    background-size: cover;
    background-position: center;
    min-height: 75vh;
    filter: grayscale(70%);
}

header div:nth-child(1){
    bottom: 0;
    left: 0;
}

header div:nth-child(2){
    font-size: 90px;
}

header div:nth-child(3){
    bottom: 0;
    right: 0;
}

/* about section */
#about div{
    background-color: #f1f1f1;
    border-left: 5px solid #ccc;
}

#about img{
    filter: grayscale(70%);
}

/* menu section */

.menu-option-active{
    color: #fff !important;
    background-color: rgba(0,0,0,0.6) !important;
}

#menu ul li p{
    opacity: 50%;
}

#menu ul{
    display: none;
}

#menu ul.menu-active{
    display: block;
}

/* address */
#where form button:hover{
    color: #000 !important;
    background-color: #c7c7c7 !important;
}

/* footer */
footer{
    background-color: #f1f1f1;
}

footer p a:hover{
    color: rgb(62, 207, 62);
}