html, body {
      margin: 0;
      padding: 0;
      align-items: center;
      justify-content: center;
      background: black;
    }
    
    /* this container class styles the intro page */
    .container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
        background:url('photo/smiling-woman.jpg');
        background-size:360%;
        background-position:center;
    }
    
    /* name flasher holds everything we see on page when NOT LOGGED IN */
    .name-flasher{
      position:fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width:100%;
      background:none;
      top: 0;
      left: 0;
      bottom:0;
      right:0;
      z-index:30;
      overflow-y:auto;
    }
    
    /* this styles and animates the text that animates into intro page */
    .flashing-text {
      font-family: "Fredoka One", Arial, sans-serif;
      font-weight: bold;
      color: white;
      z-index: 4;
      opacity: 0;
      display: flex;
      position:fixed;
      bottom:100px;
      animation: zoomAnimation 0.4s linear forwards, colorAnimation 0.5s;
    }  
    
    @keyframes zoomAnimation {
      0% {
        font-size: 120px;
        opacity: 1;
      }
      100% {
        font-size: 32px;
        opacity: 1;
      }
    }
    
    @keyframes colorAnimation {
      0% {
        color: orange;
      }
      50% {
        color: white;
      }
      100% {
        color: dodgerblue;
      }
    }
    
    
    #initial-signup {
        position: absolute; /* or position: relative; based on your layout */
        background-size: cover; /* or background-size: contain; */
        top:0;
        left:0;
        padding-left: 3%;
        padding-right: 3%;
        width: 94%;
        height: auto;
        margin: 0;
    }    

    
    /* this classes styles the main menu icon on intro page */
    #menu, #menu2{
        position:fixed;
        right:20px;
        top:20px;
        background:red;
        color:white;
        padding:15px;
        border-radius:5px;
        z-index:1000000;
    }
    
    /* this classes styles the login and signup buttons on intro page */
    .menu-buttons{
        width:100%;
        padding-top:15px;
        padding-bottom:15px;
        font-size:20px;
        background:#f9a602;
        color:white;
        border:4px solid #fed000;
        margin-bottom:0px;
        font-weight:bold;
    }
    
    .upload-inputs{
        font-weight:bold;
        color:black;
        width:90%;
        padding:5%;
        padding-top:20px;
        padding-bottom:20px;
        font-size:120%;
        border-radius:10px;
        border:2px solid white;
        background-color: rgba(255, 255, 255, 0.5);
        outline: none; /* Remove the outline when focused */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .upload-inputs::placeholder{
        color:black;
        font-weight:bold;
    }
    
    .upload-select{
        color:black;
        font-weight:bold;
        width:101%;
        height:70px;
        font-size:120%;
        border-radius:10px;
        border:2px solid white;
        background-color: rgba(255, 255, 255, 0.5);
        outline: none; /* Remove the outline when focused */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .upload-select::placeholder{
        color:black;
        font-weight:bold;
    } 
    
    .upload-textarea{
        font-weight:bold;
        color:black;        
        width:90%;
        padding:5%;
        padding-top:20px;
        font-size:120%;
        border-radius:10px;
        border:2px solid white;
        background-color: rgba(255, 255, 255, 0.5);
        outline: none; /* Remove the outline when focused */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .upload-textarea::placeholder{
        color:black;
        font-weight:bold;
    }
    
    .upload-date{
        font-weight:bold;
        color:black;        
        width:60%;
        padding:5%;
        padding-top:20px;
        font-size:120%;
        border-radius:10px;
        border:2px solid white;
        background-color: rgba(255, 255, 255, 0.5);
        outline: none; /* Remove the outline when focused */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .upload-date::placeholder{
        color:black;
        font-weight:bold;
    }
    
    .submit-inputs-button{
        width:100%;
        padding:20px;
        font-size:20px;
        background:black;
        border:none;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
        cursor:pointer;
        color:white;
    }
    
    .upload-inputs-button{
        width:100%;
        padding:20px;
        font-size:20px;
        background:red;
        border:none;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
        cursor:pointer;
        color:white;
    } 

    #login-div{
        position:fixed;
        width:86%;
        padding:0;
        background:none;
        border-radius:none;
    }
    
    /* this code styles the X button for clearing login form */
    #clear-forms2{
        position:absolute; 
        top:0px; 
        left:20px;
        margin:0 auto;
        padding:15px; 
        border:none; 
        color:white; 
        font-weight:bold; 
        background:none; 
        font-size:20px;
        cursor:pointer;
        text-align:left;
    }
    
    .user-card{
        height:160px;
        width:100%;
        margin:0;
        border-radius:0px;
        background:orange;
        box-shadow: 0 3px 10px rgb(0 5 30 / 0.2);
    }    
    
    /* this styles users page main holder */
    #shopping-div,#users-page,#events-div, #eventCard{
        margin-top:0;
        width:100%; 
        background:none;         
    }
    
    #footer{
        width:100%;
        height:50px;
        position:fixed;
        z-index:10000;
        bottom:0;
        left:0;
        background:#2c2c2c;
    }
    
    #user-list-holder{
        width:98%; 
        height:auto;
        margin-left:1%;
        margin-right:0;
        margin-top:83px;
        background:none;
        display: inline-flex;
        justify-content: space-around;
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Display three cards in each row */
        grid-auto-flow: row dense; /* Allow cards to fill empty spaces in the grid */
        gap: 10px; /* Add some gap between cards */
    } 
    
    .select-div{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    #merchandise-holder{
        width:100%; 
        height:auto;
        margin-left:0;
        margin-right:0;
        margin-top:0px;
        padding-bottom:60px;
        background:none;
        display: inline-flex;
        justify-content: space-around;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Display three cards in each row */
        grid-auto-flow: row dense; /* Allow cards to fill empty spaces in the grid */
        gap: 10px; /* Add some gap between cards */    
    } 
    
    #concert-holder{
        width:100%;
        height:auto;
        margin-left:0;
        margin-right:0;
        margin-top:-100px;
        padding-bottom:60px;
        background:black;
        display: inline-flex;
        justify-content: space-around;
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Display three cards in each row */
        grid-auto-flow: row dense; /* Allow cards to fill empty spaces in the grid */
        gap: 10px; /* Add some gap between cards */         
    }
    
    #admin-holder,.admin-inner-pages{
        width:100%; 
        height:auto;
        min-height:100%;
        margin-left:0;
        margin-right:0;
        margin-top:0px;
        padding-bottom:60px;
        background:none;
        display: flex;
        justify-content: space-around;
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Display three cards in each row */
        grid-auto-flow: row dense; /* Allow cards to fill empty spaces in the grid */
        gap: 10px; /* Add some gap between cards */         
    }
    
    #in-page-buttons{
        position:fixed;
        right:20px;
        top:20px;        
    }
    
    .menu-logout{
        background:red;
        color:white;
        padding:20px;
        border-radius:5px; 
        border:none;
        margin-bottom:30px;
    }
    
    .menu-reload{
        background:dodgerblue;
        color:white;
        padding:20px;
        border-radius:5px; 
        border:none;
        margin-bottom:30px;        
    }
    
    #business-container, #event-container{
        align-items:center;
        justify-content:center;
        height:auto;
        width:100%;
        margin-top:-50px;
        font-family:arial; 
        background: none;
    }  
    
    #event-form-holder{
        align-items:center;
        justify-content:center;
        height:auto;
        width:100%;
        position:absolute;
        top:0;
        left:0;
        font-family:arial; 
        background: none;        
    }
    
    #sell-form-holder,#activate-business-holder,#event-form-holder{
        width:88%;
        padding:6%;
        margin-left:0%;
        background:none;
        border-radius:0px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);        
    }
    
    #new-product-label,#new-event-label, #business-mode-label{
        font-family:"Fredoka One";
        font-size:30px;
        left:50%;
        transform:translateX(-50%);
        color:white;
    }
    
    #signup-div,
    #activate-business-holder,
    #event-form-holder{
      position:absolute;
      width: 90%;
      padding: 5%;
      margin-left: 0%;
      background:url('photo/smiling-woman.jpg');
      background-size:500%;
      background-position:center;
      border-radius: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    hr{
        color:grey;
    }
    
    /*this will be animation code for view status warning on map page */
  @keyframes colorChange {
    0% {
      background-color: red;
    }
    25% {
      background-color: dodgerblue;
    }
    50% {
      background-color: black;
    }
    75% {
      background-color: orange;
    }
    100% {
      background-color: red;
    }
  }

  #filter-status-report {
    animation: colorChange 15s infinite; /* Adjust the duration as needed */
  }
  
  


#header-div{
    background:none;
    text-align:center;
    margin-top:-10px;
    font-size:16px;
    color:red;
    font-family: var(--main-font);
}

#audio-player-holder{
    height:300px;
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 0px;
    border-radius:25px;
    border:1px solid grey;
    box-shadow: 0 3px 10px rgb(0 5 30 / 0.3);
}

#progress-bar {
  position:relative;
  top:20px;
  left:20px;
  width: 30%;
  height: 3px;
  background-color: #ccc;
  border-radius:25px;
}

#progress-slider {
  width: 0;
  height: 100%;
  background-color: #333;
  border-radius:25px;
}

#podcast-details{
    width:92%;
    height:auto;
    margin-left:4%;
    margin-top:10px;
}

#more-details{
    width:92%;
    margin-left:4%;
    height:auto;
}

#podcast-list{
    width:100%;
    height: auto;
}

#uploader-div{
    position:absolute;
    padding: 5%;
    width:70%;
    left:10%;
    right:10%;
    top:50px;
    height:auto;
    background:white;
    border-radius:25px;
    text-align: center;
    box-shadow: 0 3px 10px rgb(0 5 30 / 0.3);
}

.custom-button{
        width:100%;
        padding-top:20px;
        border:none;
        background:none;
        cursor:pointer;
        margin-top:5px;
        font-size: 20px;
        font-weight: bold;
        color:black;
        box-shadow: 0 3px 10px rgb(0 5 30 / 0.3);
}

.custom-button:hover{
    background:rgb(190, 208, 246);
}

#comments-list{
    position:absolute;
    top:50px;
    width:96%;
    padding:2%;
    padding-bottom:160px;
    left:0%;
    background:none;
    z-index:0; 
}

#comment-holder{
    position:fixed;
    bottom:0;
    width:96%;
    padding:2%;
    left:0%;
    background:none;
    z-index:1;
}

@media (max-width:800px){
    html, body {
      margin: 0;
      padding: 0;
      align-items: center;
      justify-content: center;
    }    
    
    #progress-bar {
      position:relative;
      top:20px;
      left:20px;
      width: 40%;
      height: 5px;
      background-color: #ccc;
      border-radius:25px;
    }    
    
    #uploader-div{
        position:absolute;
        left:0;
        padding: 5%;
        padding-top: 10%;
        padding-bottom: 10%;
        width:90%;
        top:100px;
        height:auto;
        background:white;
        border-radius:25px;
        text-align: center;
    } 
    
    #advertise-holder{
        position:absolute;
        padding: 10%;
        width:80%;
        left:0%;
        right:0%;
        top:250px;
        height:auto;
        background:white;
        border-radius:25px;
        text-align: center;
        box-shadow: 0 3px 10px rgb(0 5 30 / 0.3);
    }
    
    .custom-button{
        width:100%;
        padding-top:20px;
        border:none;
        background:none;
        cursor:pointer;
        margin-top:5px;
        font-size: 20px;
        font-weight: bold;
        color:black;
        box-shadow: 0 3px 10px rgb(0 5 30 / 0.3);
    }
    
    /* name flasher holds everything we see on page when NOT LOGGED IN */
    .name-flasher {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        background: none;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 30;
        overflow-y: auto;
    }
    
    #initial-signup {
        position: absolute; /* or position: relative; based on your layout */
        background-size: cover; /* or background-size: contain; */
        top:0;
        left:0;
        padding-bottom: 60px;
        padding-left: 3%;
        padding-right: 3%;
        width: 94%;
        height: auto;
        margin: 0;
    }
    
    /* this styles and animates the text that animates into intro page */
    .flashing-text {
      font-family: "Fredoka One", Arial, sans-serif;
      font-weight: bold;
      color: white;
      z-index: 4;
      opacity: 0;
      display: flex;
      position:fixed;
      bottom:100px;
      animation: zoomAnimation 0.4s linear forwards, colorAnimation 0.5s;
    }  
    
    @keyframes zoomAnimation {
      0% {
        font-size: 120px;
        opacity: 1;
      }
      100% {
        font-size: 32px;
        opacity: 1;
      }
    }
    
    @keyframes colorAnimation {
      0% {
        color: orange;
      }
      50% {
        color: white;
      }
      100% {
        color: dodgerblue;
      }
    }
    
    /* this classes styles the main menu icon on intro page */
    #menu, #menu2{
        position:fixed;
        right:20px;
        top:20px;
        background:red;
        color:white;
        padding:15px;
        border-radius:5px;
        z-index:1000000;
    }
    
    /* this classes styles the login and signup buttons on intro page */
    .menu-buttons{
        width:100%;
        padding-top:15px;
        padding-bottom:15px;
        font-size:20px;
        background:#f9a602;
        color:white;
        border:4px solid #fed000;
        margin-bottom:0px;
        font-weight:bold;
    }
    
    .upload-inputs{
        font-weight:bold;
        color:black;
        width:90%;
        padding:5%;
        padding-top:20px;
        padding-bottom:20px;
        font-size:120%;
        border-radius:10px;
        border:2px solid white;
        background-color: rgba(255, 255, 255, 0.5);
        outline: none; /* Remove the outline when focused */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .upload-inputs::placeholder{
        color:black;
        font-weight:bold;
    }
    
    .upload-select{
        color:black;
        font-weight:bold;
        width:101%;
        height:70px;
        font-size:120%;
        border-radius:10px;
        border:2px solid white;
        background-color: rgba(255, 255, 255, 0.5);
        outline: none; /* Remove the outline when focused */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .upload-select::placeholder{
        color:black;
        font-weight:bold;
    } 
    
    .upload-textarea{
        font-weight:bold;
        color:black;        
        width:90%;
        padding:5%;
        padding-top:20px;
        font-size:120%;
        border-radius:10px;
        border:2px solid white;
        background-color: rgba(255, 255, 255, 0.5);
        outline: none; /* Remove the outline when focused */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .upload-textarea::placeholder{
        color:black;
        font-weight:bold;
    }
    
    .upload-date{
        font-weight:bold;
        color:black;        
        width:60%;
        padding:5%;
        padding-top:20px;
        font-size:120%;
        border-radius:10px;
        border:2px solid white;
        background-color: rgba(255, 255, 255, 0.5);
        outline: none; /* Remove the outline when focused */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .upload-date::placeholder{
        color:black;
        font-weight:bold;
    }
    
    .submit-inputs-button{
        width:100%;
        padding:20px;
        font-size:20px;
        background:white;
        border:none;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
        cursor:pointer;
        color:black;
    }
    
    .upload-inputs-button{
        width:100%;
        padding:20px;
        font-size:20px;
        background:red;
        border:none;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
        cursor:pointer;
        color:white;
    } 

    #login-div{
        position:fixed;
        width:86%;
        padding:0;
        background:none;
        border-radius:none;
    }
    
    #back{
        position:absolute; 
        top:0px; 
        left:20px;
        margin:0 auto;
        padding:15px; 
        border:none; 
        color:white; 
        font-weight:bold; 
        background:none; 
        font-size:20px;
        cursor:pointer;
        z-index:40;
        text-align:left;
    }    
    
    /* this code styles the X button for clearing login form */
    #clear-forms2{
        position:absolute; 
        top:0px; 
        left:20px;
        margin:0 auto;
        padding:15px; 
        border:none; 
        color:white; 
        font-weight:bold; 
        background:none; 
        font-size:20px;
        cursor:pointer;
        text-align:left;
    }
    
    .user-card{
        height:160px;
        width:100%;
        margin:0;
        border-radius:0px;
        background:orange;
        box-shadow: 0 3px 10px rgb(0 5 30 / 0.2);
    }    
    
    /* this styles users page main holder */
    #shopping-div,#users-page,#eventCard{
        margin-top:0;
        width:100%; 
        background:none;         
    }
    
    #footer{
        width:100%;
        height:50px;
        position:fixed;
        z-index:10000;
        bottom:0;
        left:0;
        background:#2c2c2c;
    }
    
    #user-list-holder{
        width:98%; 
        height:auto;
        margin-left:1%;
        margin-right:0;
        margin-top:83px;
        background:none;
        display: inline-flex;
        justify-content: space-around;
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Display three cards in each row */
        grid-auto-flow: row dense; /* Allow cards to fill empty spaces in the grid */
        gap: 10px; /* Add some gap between cards */
    } 
    
    .select-div{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    #merchandise-holder{
        width:100%; 
        height:auto;
        margin-left:0;
        margin-right:0;
        margin-top:0px;
        padding-bottom:60px;
        background:none;
        display: inline-flex;
        justify-content: space-around;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Display three cards in each row */
        grid-auto-flow: row dense; /* Allow cards to fill empty spaces in the grid */
        gap: 10px; /* Add some gap between cards */    
    } 
    
    #concert-holder{
        width:100%;
        height:auto;
        margin-left:0;
        margin-right:0;
        margin-top:-100px;
        padding-bottom:60px;
        background:black;
        display: inline-flex;
        justify-content: space-around;
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Display three cards in each row */
        grid-auto-flow: row dense; /* Allow cards to fill empty spaces in the grid */
        gap: 10px; /* Add some gap between cards */         
    }
    
    #admin-holder,.admin-inner-pages{
        width:100%; 
        height:auto;
        min-height:100%;
        margin-left:0;
        margin-right:0;
        margin-top:0px;
        padding-bottom:60px;
        background:none;
        display: flex;
        justify-content: space-around;
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* Display three cards in each row */
        grid-auto-flow: row dense; /* Allow cards to fill empty spaces in the grid */
        gap: 10px; /* Add some gap between cards */         
    }
    
    #in-page-buttons{
        position:fixed;
        right:20px;
        top:20px;        
    }
    
    .menu-logout{
        background:red;
        color:white;
        padding:20px;
        border-radius:5px; 
        border:none;
        margin-bottom:30px;
    }
    
    .menu-reload{
        background:dodgerblue;
        color:white;
        padding:20px;
        border-radius:5px; 
        border:none;
        margin-bottom:30px;        
    }
    
    #business-container, #event-container{
        align-items:center;
        justify-content:center;
        height:auto;
        width:100%;
        margin-top:-50px;
        font-family:arial; 
        background: none;
    }  
    
    #event-form-holder{
        align-items:center;
        justify-content:center;
        height:auto;
        width:100%;
        position:absolute;
        top:0;
        left:0;
        font-family:arial; 
        background: none;        
    }
    
    #new-product-label{
        font-family:"Fredoka One";
        font-size:30px;
        left:50%;
        transform:translateX(-50%);
        color:white;
    }
    
    #sell-form-holder,
    #event-form-holder{
        position:absolute;
        width: 90%;
        padding: 5%;
        left: 0px;
        top:0px;
        background-size:500%;
        background-position:center;
        border-radius: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    hr{
        color:grey;
    }
    
    /*this will be animation code for view status warning on map page */
  @keyframes colorChange {
    0% {
      background-color: red;
    }
    25% {
      background-color: dodgerblue;
    }
    50% {
      background-color: black;
    }
    75% {
      background-color: orange;
    }
    100% {
      background-color: red;
    }
  }

  #filter-status-report {
    animation: colorChange 15s infinite; /* Adjust the duration as needed */
  }
  
  #signup-div{
      position:absolute;
      top:0;
      left:0;
      width:cover;
      height:auto;
      min-height:100%;
      padding-bottom:50px;
      border-radius:0px;
  }
      
    #loader-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9999;
    }

    #loader {
      width: 50px;
      height: 50px;
      border: 5px solid red;
      border-top: 5px solid red; /* Brown color */
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    
    .formGroup{
      margin-bottom:20px;
    }
    
    .luckiest-guy-regular {
      font-family: "Luckiest Guy", cursive;
      font-weight: 400;
      font-style: normal;
    }
    
    /* Style for the file input container */
    .file-input-container {
        position: relative;
        overflow: hidden;
        display: inline-block;
        padding:20px;
    }

    /* Style for the actual file input */
    .file-input {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

    /* Style for the button */
    .file-input-button {
        border: none;
        color: white;
        background-color: dodgerblue; /* Customize the background color */
        padding: 15px 15px;
        border-radius: 10px;
        cursor: pointer;
        font-family:arial;
    }