@font-face {
    font-family: "Thunderous";
    src: url("../font/Thunderous.otf");
}
@font-face {
    font-family: "Typewriter";
    src: url("../font/Typewriter.otf");
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;

  font-family: "Typewriter";
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.background
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;

    background-color: #e4dcd1;
}
.logo-image
{
    max-width: 60%;
    max-height: 40%;
}
.content
{
    width: 100%;
    height: 100%;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    flex-direction: column;
}
.content.construction
{
    align-items: center;
}
.content.hide
{
    display: none;
}
.top-bar-info
{
    width: 100%;
    height: 10%;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 2;

    box-shadow: 0px -10px 50px 0px #888888;
}
.page-content
{
    width: 100%;
    height: 90%;

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    z-index: 1;

    background-color: lightyellow;
}
.mobile-menu-btn, .shop-chat-btn
{
    width: 20%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    /* background-color: red */
}
.shop-title
{
    width: 60%;
    height: 100%;

    font-size: 2vh;

    display: flex;
    justify-content: center;
    align-items: center;
}
.shop-title-img
{
    height: 100%;
}
.mobile-menu-img
{
    max-height: 50%;
    max-width: 50%;
}