@font-face {
    font-family: 'Burger';
    src: url('dir/font/Insanibu.ttf') format('truetype');
}

@font-face {
    font-family: 'Regular';
    src: url('dir/font/FlameRegular.otf') format('opentype');
}

body {
    min-width: 500px;
    min-height: 500px;
    background-color: #f9f1e6;
}


.custom-button {
    width: 80dvh;
    max-width: 300px;
    font-size: 3.5vh;
}

.custom-button.content {
    width: 80dvh;
    max-width: 300px;
    font-size: 3vh;
}


.custom-button:hover {
    background-color: rgb(240, 240, 240);
    cursor: pointer;
}

.topcontainer {
    height: 15dvh;
    background-color: #EFDABD;
    font-family: Burger, sans-serif;

}

.categories {
    width: fit-content;
    background-color: #EFDABD;
    font-family: 'Regular', sans-serif;
}

.categories .card {
    color: #502314;
    background-color: #ed7902;
}

.maincontainer {
    height: 75dvh;
    background-color: #EFDABD;
    font-family: 'Regular', sans-serif;
    color: #EFDABD;
}
.main-card{
    color: #EFDABD;
    min-height: 400px;
}

.receiptcontainer {
    height: 75dvh;
    background-color: #EFDABD;
    font-family: 'Regular', sans-serif;
    color: #512315;  
}
#receipt {
    font-size: 1.2rem; 
  }


.topcontainer {
    scrollbar-width: auto;

    box-sizing: border-box;
}

.topcontainer::-webkit-scrollbar {
    width: 0px;
    height: 5px; 
}

.topcontainer::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
   
}

.maincontainer,
.receiptcontainer {
    scrollbar-width: none;
    -ms-overflow-style: none;
}


.maincontainer::-webkit-scrollbar,
.receiptcontainer::-webkit-scrollbar {
    width: 0px;
}

@media (max-width: 768px) {
    .receiptcontainer {
      height: auto !important;
      margin-top: 1rem;
      margin: auto
    }
  }