@font-face {
    font-family: 'CrapcaseText-Bold';
    src: url('../fonts/CrapcaseText-Bold.woff2') format('woff2'),
         url('../fonts/CrapcaseText-Bold.woff') format('woff'),
         url('../fonts/CrapcaseText-Bold.ttf') format('truetype');
  }

  @font-face {
    font-family: 'CrapcaseText-Regular';
    src: url('../fonts/CrapcaseText-Regular.woff2') format('woff2'),
         url('../fonts/CrapcaseText-Regular.woff') format('woff'),
         url('../fonts/CrapcaseText-Regular.ttf') format('truetype');
  }

  @font-face {
    font-family: 'CrapcaseDisplay-Medium';
    src: url('../fonts/CrapcaseDisplay-Medium.woff2') format('woff2'),
         url('../fonts/CrapcaseDisplay-Medium.woff') format('woff'),
         url('../fonts/CrapcaseDisplay-Medium.ttf') format('truetype');
  }

body {
    background-image: url('/img/Family_of_products.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center bottom;
    z-index: 0;
    font-family: CrapcaseText-Regular;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
}

@media screen and (max-width: 768px) {
    body {
        background-size: contain;
    }
}

nav-section {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease-in-out; /* Add a transition effect to the opacity property */
    opacity: 0; /* Start with a hidden element */
    pointer-events: none;
}

nav-section.active {
    display: block;
    opacity: 1; /* Make it fully visible when active */
    pointer-events: auto;
}

.checkbox-label {
    padding-left: 50px;
}

#savePassword {
    visibility:hidden;
}

.invalidPassword {
    border-bottom: 2px solid red !important; 
}

.backupCode {
    margin:10px;
}

.card-content > p {
    margin-bottom:10px !important;
}

.buttonPad {
    margin:10px;
}

.splash {
    margin-bottom: 300px;;
}

.admin-portal {
    background-color:white;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    transform: none;
    overflow: auto;
}