/*#root {
    
    background-image: url("./photos/background.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: background 0.3s ease-in-out; 
}*/

#root {
    background-color: #edeff3;
    background-image: url("./photos/pattern.svg"); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Remove background-attachment: fixed to fix mobile scaling issues */
    transition: background 0.3s ease-in-out;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Mobile-specific background handling */
@media (max-width: 768px) {
    #root {
        background-attachment: scroll; /* Use scroll instead of fixed on mobile */
        background-size: cover;
        background-position: center center;
        min-height: 100vh;
        /* Additional mobile-specific fixes */
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    
    /* iOS Safari specific fixes */
    @supports (-webkit-touch-callout: none) {
        #root {
            background-attachment: scroll;
            background-size: cover;
            background-position: center center;
            min-height: 100vh;
            /* Prevent iOS Safari from zooming the background */
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
    }
}

/* Desktop can use fixed attachment for better performance */
@media (min-width: 769px) {
    #root {
        background-attachment: fixed;
    }
}
  /* Scrollbar track */
::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Scrollbar thumb */
  ::-webkit-scrollbar-thumb {
    background-color: #007BAA; /* light green */
    border-radius: 10px;
  }