@font-face {font-family: gotham;src: url('fonts/gotham-bold.ttf'); font-weight: bold;}
@font-face {font-family: gotham;src: url('fonts/gotham-normal.ttf'); font-weight: normal;}


html {
    height: 100%;
    font: normal 12pt futura;
}

body{
    /* Apply the radial gradient */
    background-image: radial-gradient(#041a71, #010826);
}

.gradient{
    margin-top: 0px;
    margin-left: 0px;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    /* Apply the radial gradient */
    background-image: radial-gradient(#041a71, #010826);
}

.glass{
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.6px);
    -webkit-backdrop-filter: blur(5.6px);
    border: 1px solid rgba(255, 255, 255, 0.3);			
}

.heading-blue{
    color: #0075c9 !important;
    font-family: gotham;
    font-weight: bold;
}
.no-scroll {
  overflow: hidden;
  height: 100%; /* Optional: ensures the body takes full height */
}

.itemdiv{
    margin: 10px;
    text-align: center;
}

.itemphoto{
  background-repeat: no-repeat; /* */
  background-size: contain;
  width: 8vw;
  min-width: 75px;
  max-width: 175px;
  opacity: 0.8;
  /*background-position: center;  */
  box-shadow:3px 3px 3px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  cursor: pointer;

}
#neworder-div{
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}
.itemphoto:hover{
    opacity: 1;
    transform: scale(1.1);
    box-shadow:3px 3px 3px rgba(0,0,0,0.4);
}

#maindiv{
    margin-top: 0px;
    margin-left: 0px;
    margin-right: auto;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    /* Apply the radial gradient */
    background-image: radial-gradient(#041a71, #010826);
    width: 60vw;
    height: 80vh;
}

#login-background{
    display: none;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4.0px);
    -webkit-backdrop-filter: blur(4.0px);

    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    height: 100%;
    width: 100%;
}

#user-icon{
    display: inline-block;
    position: absolute;
    right: 5;
    top: 5;

    border: 1px solid #ff0000;
}

#login{
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;

    height: 30vh;
    min-height: 400px;
    max-height: 800px;
        
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

#login input[type=email],input[type=password]{
    height: 60px;
}

#lightbox{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    height: 100%;
    width: 100%;
    background-color: rgb(0,0,0,.7);
}

#settings{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    height: 100%;
    width: 100%;
}

#settings-background{
    display: block;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4.0px);
    -webkit-backdrop-filter: blur(4.0px);

    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    height: 100%;
    width: 100%;
}

#settings-container{
    width: 400px;
    height: 500px;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

.lightboxdiv{
    padding: 10px;
    text-decoration: none !important;
}

.lightboximage{
    width: 15vw;
    text-decoration: none !important;    
}

#user-nav-menu{
    display: none;
    z-index: 999;
    background-color: #ffffff;
    transform: translate(-190px, 50px);
    border: 1px solid #eeeeee;
    position: absolute;
    width: 220px;
    height: 270px;
    opacity: 0.9;
    border-radius: 10px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
    text-align: center;
    padding: 10px;
}

#user-nav-menu div:nth-child(1){
    font: bold 9pt gotham;
    padding-top: 5px;
    padding-bottom:20px;
}

.user-nav-menu-item{
    width: 190px;
    height: 45px;
    
    font: bold 11pt gotham;
    cursor: pointer;
}

.user-nav-menu-item:hover{
    background-color: #eeeeee;
}