body {  
    background-color: rgb(107, 0, 128);  
    display: flex;  
    justify-content: center;   
    align-items: center;  
    height: 90vh;  
    background-image: url(../images/gallery-images/gallery-image-4.jpg);  
    background-size: cover;  
    position: relative;  
}  

* {  
    font-family: sans-serif;  
    box-sizing: border-box; /* Fixed typo for box-shadow (should be box-sizing) */  
}  

/* Form Styles */
form {  
    width: 500px;  
    border: 2px solid #f8f7f7;  
    padding: 20px;  
    background: rgba(15, 1, 7, 0.3); /* Slightly transparent background */
    border-radius: 15px;  
    background-size: cover;  
    position: relative; /* Changed absolute to relative to fix margin issues */  
}  

h2, h3 {  
    text-align: center;  
    margin-bottom: 30px;  
}  

h2 {  
    color: #0f0b0b;  
    font-size: 30px;  
}  

h3 {  
    color: #680303;  
    font-size: 24px; /* Adjusted for uniformity */  
}  

input {  
    display: block;  
    border: 2px solid #a50a0a;  
    width: 95%;  
    padding: 10px;  
    margin: 10px auto;  
    border-radius: 5px;  
}  

label {  
    color: #9c0505;  
    font-size: 18px;  
    padding: 10px;   
}  

button {  
    background: #790808;  
    padding: 10px 15px;  
    color: #f2f7f3;  
    border-radius: 5px;   
    margin-top: 15px;  
    border: none;   
    width: 100%; /* Centered button for all devices */
    text-align: center;  
    cursor: pointer;
}  

button:hover {  
    opacity: 0.7;  
}  

ul {  
    width: 50%;  
    margin: 10px auto;  
    padding: 0;  
    display: flex;  
    justify-content: space-between;  
    list-style: none;  
}  

ul li {  
    padding: 5px;  
}  

ul li a {  
    text-decoration: none;  
    color: blue;  
    margin: 1px;  
    text-align: right;  
}  

p {  
    color: blue;  
    margin-top: 10px;  
}  

/* Media Query for Mobile Devices */  
@media (max-width: 768px) {  
    body {  
        height: auto; /* Allow body to grow based on content */  
        padding: 10px; /* Add some padding to the body */  
    }  

    form {  
        width: 90%; /* Use more of the screen width */  
        padding: 15px; /* Reduced padding for compactness */  
    }  

    h2 {  
        font-size: 24px; /* Smaller font size for heading on mobile */  
    }  

    h3 {  
        font-size: 20px; /* Adjust font size */  
    }  

    input {  
        width: 100%; /* Full width for better touch targets */  
        padding: 12px; /* Increased padding for easier input */  
    }  

    label {  
        font-size: 16px; /* Slightly smaller label text */  
        padding: 5px 0; /* Reduce padding */  
    }  

    button {  
        width: 100%; /* Full width button for ease of clicking */  
        padding: 12px; /* Adjust for mobile interaction */  
        margin-top: 10px; /* Space above button */  
    }  

    ul {  
        width: 100%; /* Full width for ul */  
        flex-direction: column; /* Stack items vertically */  
        align-items: flex-start; /* Align links to the left */  
        padding: 0; /* Remove default padding */  
    }  

    ul li {  
        margin: 5px 0; /* Standardized vertical spacing for list items */  
    }  

    ul li a {  
        width: 100%; /* Also full width for ease */  
        text-align: left; /* Align text to the left */  
        padding: 10px 0; /* Space for touch targets */  
    }  

    p {  
        font-size: 14px; /* Adjust paragraph text for mobile */  
        margin-top: 10px; /* Space above paragraph */  
    }  
}